/* Orava Connect slice 1 (2026-11-11) — one stylesheet for every Connect page and component.
   Global on purpose (prefix cx-): the cards are drawn by several pages AND by components inside
   Radzen containers, where scoped CSS does not reach (CLAUDE.md, CSS isolation rule).
   Theme-agnostic: only semantic Radzen tokens, --akili-accent-fg for accent TEXT, color-mix tints. */

.cx-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    max-width: 960px;
}

.cx-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--rz-border-color);
    border-radius: 16px;
    background: var(--rz-base-background-color);
    color: var(--rz-text-color);
}

.cx-card--muted { background: var(--rz-fill-subtle); }

.cx-card__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.cx-icon-chip {
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--akili-accent-fg);
    background: color-mix(in srgb, var(--akili-accent-fg) 14%, transparent);
}

.cx-card__titles { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }

.cx-kind {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rz-text-secondary-color);
}

.cx-title {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.cx-sub, .cx-muted {
    color: var(--rz-text-secondary-color);
    font-size: 0.875rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.cx-time { flex: 0 0 auto; color: var(--rz-text-secondary-color); font-size: 0.78rem; }

.cx-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }

.cx-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }
.cx-row--between { justify-content: space-between; }
.cx-grow { flex: 1 1 auto; min-width: 0; }

.cx-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.cx-quiet {
    border: none;
    background: transparent;
    color: var(--rz-text-secondary-color);
    font: inherit;
    font-size: 0.875rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    min-height: 36px;
}
.cx-quiet:hover, .cx-quiet:focus-visible { color: var(--rz-text-color); background: var(--rz-fill-subtle); }

.cx-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--rz-border-color);
    font-size: 0.8rem;
    color: var(--rz-text-color);
    background: transparent;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cx-chip .rzi, .cx-chip .material-symbols-outlined { font-size: 1rem; }
.cx-chip--ok { color: var(--rz-success); border-color: color-mix(in srgb, var(--rz-success) 45%, transparent); }
.cx-chip--warn { color: var(--rz-warning-darker, var(--rz-warning)); border-color: color-mix(in srgb, var(--rz-warning) 55%, transparent); }
.cx-chip--danger { color: var(--rz-danger); border-color: color-mix(in srgb, var(--rz-danger) 45%, transparent); }
.cx-chip--accent { color: var(--akili-accent-fg); border-color: color-mix(in srgb, var(--akili-accent-fg) 45%, transparent); }
button.cx-chip { cursor: pointer; font: inherit; font-size: 0.8rem; }
button.cx-chip.is-active { background: color-mix(in srgb, var(--akili-accent-fg) 14%, transparent); border-color: var(--akili-accent-fg); color: var(--akili-accent-fg); }

.cx-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.cx-field > label, .cx-label { font-size: 0.85rem; font-weight: 600; color: var(--rz-text-color); }
.cx-hint { font-size: 0.8rem; color: var(--rz-text-secondary-color); line-height: 1.4; }

.cx-input, .cx-textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--rz-border-color);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    background: var(--rz-base-background-color);
    color: var(--rz-text-color);
    font: inherit;
    font-size: 1rem; /* 16px: iOS never zooms on focus */
}
.cx-textarea { min-height: 6rem; resize: vertical; line-height: 1.45; }
.cx-input:focus, .cx-textarea:focus { outline: 2px solid var(--akili-accent-fg); outline-offset: 1px; }

.cx-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cx-choices--column { flex-direction: column; flex-wrap: nowrap; }
.cx-choices--column .cx-choice { flex: 0 0 auto; }
.cx-choice .cx-chip, .cx-choices--column .cx-choice__sub { margin-left: auto; flex-shrink: 0; white-space: nowrap; }
.cx-choice {
    flex: 1 1 10rem;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--rz-border-color);
    border-radius: 14px;
    background: var(--rz-base-background-color);
    color: var(--rz-text-color);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.cx-choice.is-active { border-color: var(--akili-accent-fg); box-shadow: 0 0 0 1px var(--akili-accent-fg) inset; }
.cx-choice .rzi { color: var(--akili-accent-fg); }
.cx-choice__text { display: flex; flex-direction: column; min-width: 0; }
.cx-choice__sub { font-size: 0.8rem; color: var(--rz-text-secondary-color); }

.cx-list { display: flex; flex-direction: column; gap: 0.6rem; }

.cx-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rz-text-secondary-color);
    margin: 0.4rem 0 0;
}

/* ── Thread ── */
.cx-thread { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }

.cx-bubble {
    max-width: min(46rem, 92%);
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem 0.85rem;
    border-radius: 16px 16px 16px 6px;
    background: var(--rz-fill-subtle);
    color: var(--rz-text-color);
    border: 1px solid var(--rz-border-color);
    min-width: 0;
}
.cx-bubble--out {
    align-self: flex-end;
    border-radius: 16px 16px 6px 16px;
    background: color-mix(in srgb, var(--akili-accent-fg) 10%, var(--rz-base-background-color));
}
.cx-bubble--note { align-self: stretch; max-width: none; border-style: dashed; }
.cx-bubble--draft { align-self: stretch; max-width: none; border-color: var(--akili-accent-fg); }
.cx-bubble__meta { display: flex; align-items: center; gap: 0.4rem; color: var(--rz-text-secondary-color); font-size: 0.75rem; flex-wrap: wrap; }
.cx-bubble__subject { font-weight: 600; overflow-wrap: anywhere; }

.cx-ask {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--rz-warning) 12%, var(--rz-base-background-color));
    border: 1px solid color-mix(in srgb, var(--rz-warning) 40%, transparent);
}

.cx-day {
    align-self: center;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--rz-fill-subtle);
}

.cx-composer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem calc(0.6rem + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
    margin: 0 -0.25rem;
    border-top: 1px solid var(--rz-border-color);
    background: var(--rz-base-background-color);
}
/* Skill rule 3: nothing may sit under the MAUI tab bar. max(), never a sum (the keyboard covers the dock). */
body.has-bottom-tab-bar .cx-composer {
    bottom: max(var(--kb-inset, 0px), calc(var(--maui-tabbar-height, 56px) + var(--safe-bottom, 0px)));
}
body.has-bottom-tab-bar:has(.bottom-tab-bar.dock--hidden) .cx-composer { bottom: var(--kb-inset, 0px); }

/* ── Today ── */
.cx-today-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }

.cx-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 2.5rem 1rem;
    color: var(--rz-text-secondary-color);
}
.cx-empty .rzi { font-size: 2.5rem; color: var(--akili-accent-fg); }
.cx-empty__title { font-weight: 600; color: var(--rz-text-color); font-size: 1.05rem; }

/* ── Notes ── */
.cx-recorder { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.25rem 0.5rem; }
.cx-record-btn {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rz-danger);
    color: var(--rz-on-danger, #fff);
    cursor: pointer;
    box-shadow: 0 6px 22px color-mix(in srgb, var(--rz-danger) 35%, transparent);
}
.cx-record-btn .rzi { font-size: 2.4rem; }
.cx-record-btn.is-recording { animation: cx-pulse 1.4s ease-in-out infinite; }
@keyframes cx-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rz-danger) 45%, transparent); } 50% { box-shadow: 0 0 0 14px transparent; } }
@media (prefers-reduced-motion: reduce) { .cx-record-btn.is-recording { animation: none; } }
.cx-clock { font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 600; }
.cx-recording-banner {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 10px;
    color: var(--rz-danger); background: color-mix(in srgb, var(--rz-danger) 10%, transparent); font-weight: 600;
}
.cx-progress { width: 100%; height: 6px; border-radius: 3px; background: var(--rz-fill-muted); overflow: hidden; }
.cx-progress__bar { height: 100%; background: var(--akili-accent-fg); transition: width 0.2s ease; }

.cx-consent {
    display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.6rem 0.75rem; border-radius: 10px;
    background: var(--rz-fill-subtle); color: var(--rz-text-color); font-size: 0.9rem;
}
.cx-consent .rzi { color: var(--akili-accent-fg); }

/* ── Pickers (no dropdowns in phone dialogs) ── */
.cx-picker { display: flex; flex-direction: column; gap: 0.4rem; }
.cx-picker__results { display: flex; flex-direction: column; border: 1px solid var(--rz-border-color); border-radius: 12px; overflow: hidden; }
.cx-picker__row {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; border: none; border-bottom: 1px solid var(--rz-border-color);
    background: var(--rz-base-background-color); color: var(--rz-text-color); font: inherit; text-align: left; cursor: pointer; min-height: 44px;
}
.cx-picker__row:last-child { border-bottom: none; }
.cx-picker__row:hover, .cx-picker__row:focus-visible { background: var(--rz-fill-subtle); }

/* ── Time ── */
.cx-entry { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.6rem 0; border-top: 1px solid var(--rz-border-color); }
.cx-entry:first-of-type { border-top: none; }
.cx-entry input[type=checkbox] { width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; accent-color: var(--akili-accent-fg); }
.cx-amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

.cx-bottom-bar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem;
    border: 1px solid var(--rz-border-color);
    border-radius: 14px;
    background: var(--rz-base-background-color);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08);
}
body.has-bottom-tab-bar .cx-bottom-bar {
    bottom: max(var(--kb-inset, 0px), calc(var(--maui-tabbar-height, 56px) + var(--safe-bottom, 0px) + 26px));
}

/* ── Public "mailbox connected" page ── */
.cx-done {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: var(--rz-body-background-color);
    color: var(--rz-text-color);
}
.cx-done__card { max-width: 26rem; width: 100%; text-align: center; }
.cx-done__card .rzi { font-size: 3rem; }
.cx-done__ok { color: var(--rz-success); }
.cx-done__fail { color: var(--rz-danger); }

@media (max-width: 767.98px) {
    .cx-card { padding: 0.85rem; border-radius: 14px; }
    .cx-bubble { max-width: 94%; }
}

/* Batch 1 (2026-11-11): an unknown-sender card opens the mail behind it; the sheet's body scrolls on its own. */
.cx-card--tappable { cursor: pointer; }
.cx-card--tappable:hover { border-color: var(--akili-accent-fg); }
.cx-mail-body { max-height: 45vh; overflow: auto; padding: 0.6rem 0.75rem; border: 1px solid var(--rz-border-color); border-radius: 12px; background: var(--rz-base-background-color); }
.cx-mail-row { color: inherit; text-decoration: none; padding: 0.35rem 0; border-bottom: 1px solid var(--rz-border-color); gap: 0.6rem; }
.cx-mail-row:last-child { border-bottom: 0; }
.cx-mail-row:hover .cx-grow { text-decoration: underline; }