/* Uses Field's ink/cardinal tokens and the existing phone/keyboard layout. */
.nico-character { width: 64px; height: 64px; flex: none; overflow: visible; }
.nico-small { width: 44px; height: 44px; }
.nico-large { width: 104px; height: 104px; }
.nico-body { fill: var(--ink); }
.nico-accent { fill: var(--red); transform-origin: 70px 34px; transition: opacity .2s, transform .2s; }
.nico-character[data-state="thinking"] .nico-accent { opacity: .65; }
.nico-character[data-state="listening"] .nico-accent { transform: translateY(-2px); }
.nico-character[data-state="offline"] .nico-accent { opacity: .45; }
.nico-presence { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.nico-presence strong { display: block; font-size: 14px; letter-spacing: -.02em; }
.nico-presence #nico-state { display: block; color: var(--ink-dim); font-size: 12px; }
.conversation-heading:has(.nico-presence) { align-items: flex-start; justify-content: space-between; gap: 12px; }
.conversation-heading:has(.nico-presence) { flex-wrap: wrap; }
.conversation-heading:has(.nico-presence) .job-actions-menu { flex: 1; width: auto; }
.conversation-heading:has(.nico-presence) .job-actions-menu[open] { flex-basis: 100%; }
.conversation-empty:has(.nico-welcome) { padding: 8px 0 16px; }
.nico-welcome { margin-bottom: 16px; }
.conversation-empty #ai-empty-title { font-size: clamp(26px, 6vw, 34px); line-height: 1.14; letter-spacing: -.03em; }
.conversation-empty #ai-empty-help { max-width: 42ch; margin: 12px auto 0; }
.nico-starters { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; }
.nico-starters button { min-height: 48px; }
.nico-starters p { flex-basis: 100%; font-size: 12px; margin: 12px 0 0; }
#nico-onboarding { margin-bottom: 16px; }
.mail-panel { scroll-margin-top: 120px; }
.mail-panel h2 { margin-top: 0; }
.mail-providers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mail-providers button { min-height: 56px; padding: 12px 4px; font-weight: 650; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.mail-accounts { display: grid; gap: 12px; margin: 20px 0; }
.mail-account { padding-top: 16px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.mail-account strong { display: block; }
.mail-account .mail-provider { font-size: 12px; color: var(--ink-dim); }
.mail-account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mail-account-actions button { min-height: 44px; }
.mail-status { min-height: 24px; font-size: 14px; color: var(--ink-dim); }
.mail-dialog { width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); }
.mail-dialog::backdrop { background: rgb(0 0 0 / .45); }
.mail-dialog h2 { font-size: 22px; line-height: 1.2; margin: 8px 0 16px; }
.mail-dialog p, .mail-dialog strong { overflow-wrap: anywhere; }
.mail-dialog .mail-close { display: block; margin-left: auto; min-height: 44px; }
.mail-message-list { display: grid; gap: 8px; margin: 16px 0; }
.mail-message { padding: 16px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.mail-message strong, .mail-message span { display: block; overflow-wrap: anywhere; }
.mail-message span { color: var(--ink-dim); font-size: 13px; }
.mail-original { white-space: pre-wrap; overflow-wrap: anywhere; font: 15px/1.5 var(--font); background: var(--surface-2); padding: 16px; border-radius: 14px; max-height: 35dvh; overflow-y: auto; }
.mail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.mail-actions button { min-height: 56px; }
.mail-empty { padding: 16px 0; }
@media (max-height: 720px) { .nico-welcome .nico-large { width: 80px; height: 80px; } .nico-starters { margin-top: 12px; } }
@media (max-height: 700px) and (max-width: 480px) { .nico-welcome .nico-large { width: 56px; height: 56px; } .nico-starters { margin-top: 4px; } }
@media (prefers-reduced-motion: reduce) { .nico-character * { transition: none; } }