:root {
    font: 16px/1.45 system-ui, sans-serif;
    color: #f3f5fa;
    background: #0b0e14;
    --surface: #161a23;
    --raised: #1e2532;
    --line: #2f3848;
    --muted: #aeb8ca;
    --accent: #b9d5ff;
    --blue: #a9caff;
    --green: #99e0bd;
    --gold: #f4d395;
    --red: #ffb5ba;
  }

  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  body { margin: 0; }
  button, input, textarea { font: inherit; color: inherit; }
  button {
    border: 0; background: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  button:disabled { opacity: .48; cursor: default; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  h1, h2, p { margin: 0; }
  h1[tabindex="-1"]:focus { outline: none; }
  .icon {
    width: 22px; height: 22px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .sr {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  .app {
    position: relative; isolation: isolate; width: 100%; max-width: 460px;
    height: 100vh; height: 100dvh; margin: 0 auto; background: var(--surface);
  }
  .screen { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  .list-scroll, .history { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .brand {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 18px 10px;
  }
  .brand-name { display: flex; align-items: center; gap: 9px; font-weight: 750; letter-spacing: .01em; }
  .mark {
    display: grid; place-items: center; width: 32px; height: 32px;
    color: #182338; background: var(--blue); border-radius: 10px;
  }
  .mark .icon { width: 20px; height: 20px; }
  .controls { padding: 0 18px 13px; border-bottom: 1px solid var(--line); }
  .search {
    display: flex; align-items: center; gap: 8px; height: 46px;
    padding: 0 9px 0 12px; background: var(--raised); color: var(--muted); border-radius: 12px;
  }
  .search:focus-within { outline: 2px solid var(--accent); }
  .search input { min-width: 0; width: 100%; border: 0; outline: none; background: transparent; color: #f3f5fa; }
  .search input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
  .search input::-webkit-search-cancel-button { display: none; }
  .filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .filter {
    min-height: 44px; padding: 0 13px; color: var(--muted);
    border: 1px solid var(--line); border-radius: 12px; font-size: .87rem; font-weight: 650;
  }
  .filter[aria-pressed="true"] { color: var(--accent); background: #263754; border-color: #405a80; }
  .filter-count { margin-left: 5px; color: var(--accent); font-variant-numeric: tabular-nums; }
  .icon-button { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; }
  .icon-button:hover:not(:disabled) { background: #2a3548; }

  .row {
    display: grid; grid-template-columns: 48px minmax(0, 1fr) max-content;
    gap: 11px; align-items: center; width: 100%; min-height: 82px;
    padding: 11px 18px; border-bottom: 1px solid #242c3a; text-align: left;
  }
  .row:hover { background: #1c2431; }
  .row:focus-visible { outline-offset: -3px; }
  .avatar {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px;
    color: #f6f9ff; background: #384e72; font-size: .94rem; font-weight: 730;
  }
  .avatar.violet { background: #4e406b; }
  .avatar.teal { background: #2d5759; }
  .avatar.rose { background: #673f53; }
  .avatar.olive { background: #51573a; }
  .avatar.slate { background: #38485c; }
  .row-main { display: grid; gap: 4px; min-width: 0; }
  .row-name, .row-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row-name { font-size: .98rem; font-weight: 680; }
  .row-summary { font-size: .83rem; color: var(--muted); }
  .row-meta { display: grid; justify-items: end; align-content: start; gap: 6px; align-self: stretch; }
  .row-meta time { color: var(--muted); font-size: .73rem; white-space: nowrap; }
  .unread {
    min-width: 20px; padding: 1px 5px; border-radius: 99px; background: var(--blue);
    color: #162136; font-size: .71rem; font-weight: 760; text-align: center;
  }
  .row[data-unread] .row-name { font-weight: 760; }
  .empty { margin: 30px 18px; padding: 22px 18px; text-align: center; background: var(--raised); border-radius: 14px; }
  .empty p { margin-top: 4px; color: var(--muted); font-size: .86rem; }
  .list-note {
    padding: 15px 18px calc(14px + env(safe-area-inset-bottom)); color: var(--muted);
    font-size: .76rem; text-align: center;
  }

  .chat-bar {
    display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px 7px;
    border-bottom: 1px solid var(--line);
  }
  .chat-bar .avatar { width: 38px; height: 38px; border-radius: 12px; font-size: .78rem; }
  .chat-person { flex: 1; min-width: 0; }
  .chat-person h1 { font-size: 1rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-person p { color: var(--muted); font-size: .75rem; }
  .anna-menu {
    display: flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 9px;
    border: 1px solid #465778; border-radius: 12px; color: var(--accent);
    background: #23314a; font-size: .84rem; font-weight: 700;
  }
  .anna-menu .icon { width: 16px; height: 16px; }
  .chat-status {
    display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 15px;
    font-size: .8rem; border-bottom: 1px solid #262f3d; color: var(--green);
  }
  .chat-status.paused { color: var(--gold); }
  .chat-status.disabled { color: var(--muted); }
  .mode-note { padding: 4px 15px; color: var(--green); font-size: .76rem; }
  .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
  .history {
    padding: 16px 14px; background-color: #111620;
    background-image: radial-gradient(ellipse at 20% 15%, #1b2638 0, transparent 65%);
  }
  .date {
    width: fit-content; margin: 0 auto 5px; padding: 4px 11px;
    border-radius: 99px; background: #263247; color: #d6dfed; font-size: .72rem;
  }
  .messages { display: flex; flex-direction: column; gap: 10px; }
  .message { max-width: 86%; min-width: 86px; align-self: flex-start; }
  .message.out { align-self: flex-end; }
  .bubble {
    display: flow-root; padding: 8px 11px 7px; background: #202938; border-radius: 14px 14px 14px 4px;
    font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; touch-action: pan-y pinch-zoom;
  }
  .out .bubble { background: #263c5b; border-radius: 14px 14px 4px 14px; }
  .author { color: var(--gold); font-size: .72rem; font-weight: 750; margin-bottom: 2px; }
  .author.manager { color: #d8e7ff; }
  .bubble-footer { display: flex; justify-content: flex-end; align-items: center; gap: 5px; }
  .bubble time { color: #c0cbe0; font-size: .68rem; }
  .reply-action {
    display: grid; place-items: center; width: 28px; height: 26px; padding: 0;
    border-radius: 6px; color: var(--accent);
  }
  .reply-action .icon { width: 16px; height: 16px; }
  .reply-action:hover:not(:disabled) { background: #354761; }
  .bubble-file { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: #e3edff; font-size: .77rem; }
  .bubble-file .icon { width: 16px; height: 16px; }

  .composer {
    padding: 7px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
    background: var(--surface);
  }
  .composer-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
  .tool {
    display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 8px;
    color: var(--accent); border-radius: 9px; font-size: .79rem; font-weight: 650;
  }
  .tool:hover:not(:disabled) { background: #263754; }
  .tool .icon { width: 18px; height: 18px; }
  .draft-quote {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px;
    padding-left: 8px; border-left: 2px solid var(--blue); border-radius: 6px; background: var(--raised);
  }
  .draft-quote-preview { min-width: 0; font-size: .77rem; }
  .draft-quote-preview strong { color: var(--accent); }
  .draft-quote-preview p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .draft-quote .icon { width: 16px; height: 16px; }
  .composer-row { display: flex; align-items: end; gap: 8px; }
  textarea {
    flex: 1; width: 0; min-width: 0; height: 52px; resize: none;
    border: 1px solid #3a465a; border-radius: 12px; background: var(--raised); padding: 11px;
  }
  .send { background: var(--blue); color: #162136; width: 48px; height: 48px; }
  .send:hover:not(:disabled) { background: #c6ddff; }
  .manual { margin-top: 5px; color: var(--muted); font-size: .71rem; }
  .pending { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 7px; }
  .chip {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding-left: 9px;
    border: 1px solid var(--line); border-radius: 10px; font-size: .76rem;
  }
  .chip span { min-width: 0; overflow-wrap: anywhere; }
  .chip .icon { width: 15px; height: 15px; }

  .sheet {
    position: fixed; inset: auto 0 0; width: min(100%, 460px); max-width: none;
    max-height: 90dvh; margin: 0 auto; padding: 9px 16px calc(16px + env(safe-area-inset-bottom));
    color: #f3f5fa; background: #1b2230; border: 1px solid #3b475c; border-bottom: 0;
    border-radius: 22px 22px 0 0; overflow-y: auto; overscroll-behavior: contain;
  }
  .sheet::backdrop { background: #060911aa; }
  .handle { width: 34px; height: 4px; margin: 0 auto 4px; border-radius: 10px; background: #60718b; }
  .sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
  .sheet-header h2 { font-size: 1.2rem; letter-spacing: -.02em; line-height: 1.2; }
  .sheet-sub { margin: 0 0 12px; color: var(--muted); font-size: .85rem; }
  .choices { display: grid; gap: 7px; }
  .choice {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 9px 12px;
    text-align: left; border: 1px solid #38465c; border-radius: 12px; background: #222c3e;
  }
  .choice:hover:not(:disabled) { border-color: var(--accent); }
  .choice > .icon { color: var(--accent); }
  .choice span { min-width: 0; }
  .choice strong, .choice small { display: block; }
  .choice strong { font-size: .89rem; }
  .choice small { margin-top: 2px; font-size: .75rem; color: var(--muted); }
  .danger strong, .danger > .icon { color: var(--red); }
  .catalog-search {
    width: 100%; min-height: 44px; padding: 0 10px; margin-bottom: 8px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: .9rem;
  }
  .catalog-note { margin: 4px 0 8px; color: var(--muted); font-size: .82rem; }
  .catalog-group { margin: 0 0 12px; }
  .catalog-group h3 { margin: 4px 0 7px; font-size: .86rem; overflow-wrap: anywhere; }
  .catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .catalog-card {
    min-width: 0; padding: 0; overflow: hidden; text-align: left;
    background: #222c3e; border: 1px solid #38465c; border-radius: 10px;
  }
  .catalog-card:hover:not(:disabled) { border-color: var(--accent); }
  .catalog-frame {
    position: relative; display: grid; place-items: center; aspect-ratio: 1;
    background: var(--surface); color: var(--muted);
  }
  .catalog-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .catalog-title {
    display: block; padding: 4px 7px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: .76rem;
  }
  .preview-label { display: block; margin-top: 9px; color: var(--muted); font-size: .77rem; font-weight: 650; }
  .preview {
    max-height: 160px; overflow-y: auto; margin: 4px 0 10px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 10px; background: #151c29;
    white-space: pre-wrap; overflow-wrap: anywhere; font-size: .87rem;
  }
  .primary {
    width: 100%; min-height: 46px; padding: 8px 12px; border-radius: 11px;
    background: var(--blue); color: #172235; font-weight: 720; font-size: .88rem;
  }
  .sheet-footer { display: grid; gap: 5px; margin-top: 10px; }

  @media (min-width: 560px) {
    .app { border-inline: 1px solid var(--line); box-shadow: 0 0 72px #24395952; }
  }
  @media (max-width: 355px) {
    .row { gap: 8px; padding-inline: 12px; grid-template-columns: 42px minmax(0, 1fr) max-content; }
    .row .avatar { width: 42px; height: 42px; }
    .chat-bar { gap: 5px; padding-right: 8px; }
    .anna-menu { padding-inline: 7px; }
    .composer { padding-inline: 9px; }
    .tool { padding-inline: 6px; }
  }

  .auth-card { margin: 20px 18px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--raised); }
  .auth-card h1 { font-size: 1.55rem; line-height: 1.2; }
  .auth-intro { margin-top: 5px; font-size: .89rem; color: var(--muted); }
  .auth-note { margin: 12px 0; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
  .auth-form { display: grid; gap: 7px; }
  .auth-form label { font-size: .86rem; font-weight: 650; }
  .auth-form input { min-width: 0; height: 46px; margin-bottom: 4px; padding: 8px 10px; border: 1px solid #45536b; border-radius: 10px; background: #151c29; }
  .auth-form .primary { margin-top: 5px; }
  .header-actions, .status-row { display: flex; align-items: center; }
  .header-actions { gap: 2px; color: var(--accent); }
  .status-row { justify-content: space-between; gap: 5px; padding-right: 7px; border-bottom: 1px solid #262f3d; }
  .status-row .chat-status { border-bottom: 0; }
  .status-row .icon-button { color: var(--accent); }
  .status-row .icon { width: 19px; height: 19px; }
  .search-note, .history-note, .compose-note { color: var(--muted); font-size: .79rem; overflow-wrap: anywhere; }
  .search-note { margin-top: 7px; }
  .history-note { margin: 0 auto 8px; text-align: center; }
  .compose-note { margin-top: 6px; }
  .resolve-send { color: var(--gold); text-align: left; }
  .notice-warning { color: var(--gold); }
  .notice-error { color: var(--red); }
  .more { display: flex; margin: 5px auto 10px; }
  .avatar { position: relative; overflow: hidden; }
  .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .message-photo { display: block; width: auto; height: auto; max-width: 100%; max-height: 220px; margin: 6px 0; border-radius: 8px; }
  .quoted { margin: 3px 0 6px; padding-left: 8px; border-left: 2px solid #839dc0; color: #d6e3f4; font-size: .79rem; }
  .list-scroll, .history, .auth-screen { scrollbar-color: #46556e transparent; }
  .auth-screen { overflow-y: auto; }
  @media (max-height: 420px) {
    .chat-bar { padding-block: 2px; }
    .composer { padding-block: 4px; }
    .composer-tools { margin-bottom: 2px; }
    textarea { height: 46px; }
  }