/* Compact shared UI: chat first, one navigation row, page-specific accents. */
:root { --font: "Leelawadee UI", "Tahoma", system-ui, sans-serif; --accent: #1460ed; --accent-dark: #1143af; --wash: #edf5ff; --tint: #dbeaff; --edge: #bad2f6; --ink: #172c53; --muted: #496181; --teal: var(--accent); --line: var(--edge); }
body { background: #e6edfb; color: var(--ink); }
body[data-page="today"] { --accent: #c84c0d; --accent-dark: #94330b; --wash: #fff6ea; --tint: #ffe5c3; --edge: #efc69a; --ink: #4a2c1d; --muted: #795239; }
body[data-page="memory"] { --accent: #713cdd; --accent-dark: #5426b0; --wash: #f5f0ff; --tint: #e8d9ff; --edge: #d3baf3; --ink: #352050; --muted: #68517e; }
body[data-page="persona"] { --accent: #d32272; --accent-dark: #a11653; --wash: #fff0f6; --tint: #ffd6e7; --edge: #efb9d0; --ink: #51203b; --muted: #7e4b64; }
body:not(.floating-mode) .app-shell { display: flex; flex-direction: column; height: var(--workspace-height, 100dvh); min-height: 0; max-width: 1080px; background: var(--wash); border: 0; color: var(--ink); }
body:not(.floating-mode) .companion { position: relative; top: auto; display: grid; grid-template-columns: 1fr auto; align-items: center; height: 76px; min-height: 76px; padding: 10px 28px; background: var(--accent); color: white; overflow: hidden; }
body:not(.floating-mode) .brand { align-self: center; flex-direction: row; align-items: baseline; gap: 12px; grid-area: 1 / 1 / 3 / 2; }
.brand > span { font-size: 34px; letter-spacing: -1px; }
.brand-dot { color: #ffe355; }
.brand small { color: #fff; font-size: 12px; margin: 0; letter-spacing: 0; }
body:not(.floating-mode) .companion .avatar-stage { position: absolute; right: 27px; top: 9px; width: 55px; height: 55px; margin: 0; transform: none; }
body:not(.floating-mode) .companion .avatar-surface { width: 55px; height: 55px; border: 2px solid #ffffffc9; box-shadow: none; }
body:not(.floating-mode) .companion .presence { margin: 0 70px 0 0; font-size: 12px; grid-column: 2; }
body:not(.floating-mode) .companion :is(.avatar-view, .orbit, .stage-mark, .companion-caption, .avatar-demo, .demo-note, .companion-footer) { display: none; }
body:not(.floating-mode) .workspace { padding: 0 28px; flex: 1; min-height: 0; background: var(--wash); color: var(--ink); }
.app-shell:has(.page:not([hidden])) { border-color: var(--accent); background: var(--wash); }
.workspace:has(.page:not([hidden])) { --teal: var(--accent); --line: var(--edge); --ink: inherit; --muted: inherit; background: var(--wash); color: inherit; }
body .topbar { display: flex; height: 60px; min-height: 60px; gap: 12px; border-color: var(--edge); flex-shrink: 0; }
body .topbar > nav { display: flex; flex-wrap: nowrap; gap: 6px !important; }
body .topbar .nav-button { font-size: 14px !important; min-height: 44px; padding: 8px 17px; border-radius: 12px; color: var(--muted); }
body .topbar .nav-button[aria-current="page"] { color: white; background: var(--accent); }
body #nol-popup .topbar nav .nav-button[aria-current="page"] { color: white !important; }
body #nol-popup :is(button, a, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body .topbar .nav-button::after { display: none; }
body .count { color: inherit; background: #ffffff29; border-radius: 6px; font-size: 11px; margin-left: 3px; }
.compact-menu { position: relative; flex-shrink: 0; }
.compact-menu > summary { list-style: none; cursor: pointer; color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 10px; border-radius: 10px; white-space: nowrap; }
.compact-menu > summary::-webkit-details-marker { display: none; }
.compact-menu[open] > summary, .compact-menu > summary:hover { color: var(--accent-dark); background: var(--tint); }
.compact-menu > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.menu-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 15; width: 260px; max-width: calc(100vw - 32px); padding: 10px; background: white; color: var(--ink); border: 1px solid var(--edge); border-radius: 16px; box-shadow: 0 12px 36px #172c532b; max-height: min(480px, 65dvh); overflow-y: auto; }
body .menu-panel > button, body .chat-menu-actions > button, body .menu-panel .chat-extra > button { display: block; width: 100%; text-align: left; min-height: 44px; padding: 10px 12px; font-size: 13px; border: 0; background: transparent; color: var(--ink); border-radius: 9px; }
body .menu-panel button:hover { background: var(--wash); color: var(--accent); }
.menu-panel .chat-extra { display: block; border-top: 1px solid var(--edge); margin: 6px 0; padding-top: 6px; }
body[data-page="persona"] .workspace-menu > summary { background: var(--accent); color: white; }
body .page { padding: 18px 0 24px; max-width: 100%; margin: 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
body:not(.floating-mode) .page { flex: 1; }
body .page > h1 { font-size: 25px; font-weight: 700; line-height: 1.4; letter-spacing: -.5px; margin: 0 0 14px; color: var(--ink); }
.page-symbol, body #page-talk .greeting-spark { color: var(--accent); font-size: 22px; margin: 0 0 0 5px; vertical-align: baseline; }
body .page > .eyebrow, body .workspace-footer, body .talk-bottom { display: none; }
body.workspace-keyboard .companion, body.workspace-keyboard #page-talk > h1, body.workspace-keyboard #page-talk > .mode-bar { display: none; }
body.workspace-keyboard #page-talk .composer textarea { min-height: 38px; height: 38px; }
body #page-talk:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; padding: 14px 0 12px; color: var(--ink); gap: 0; }
body #page-talk > h1 { font-size: 20px; margin: 0 0 10px; flex-shrink: 0; }
body #page-talk.has-chat > h1 { display: none; }
body #page-talk .mode-bar { gap: 8px; margin: 0; flex-shrink: 0; }
body #page-talk .mode-bar button { min-height: 40px; font-size: 13px; padding: 6px 14px; border-radius: 11px; background: white; color: var(--accent-dark); border-color: var(--edge); }
body #page-talk .mode-bar button[aria-pressed="true"] { background: var(--accent); color: white; border-color: var(--accent); }
body #page-talk .mode-bar button span { font-size: 16px; margin-right: 3px; }
body .chat-toolbar { display: flex; gap: 8px; margin: 5px 0 3px; flex-shrink: 0; }
.chat-toolbar-actions { display: flex; align-items: center; gap: 4px; }
body #chat-connection { color: var(--muted); font-size: 12px; min-width: 0; line-height: 1.5; flex: 1; }
body .chat-toolbar .text-button { min-height: 40px; padding: 5px 8px; font-size: 13px; color: var(--accent-dark); }
.chat-toolbar .compact-menu > summary { min-height: 40px; }
body .chat-menu-panel { width: 320px; }
body .menu-panel .chat-engine-row { display: flex; flex-wrap: wrap; font-size: 12px; padding: 4px; margin: 0 0 8px; }
body .menu-panel .chat-engine-row label { flex-basis: 100%; font-size: 12px; color: var(--muted); }
body .menu-panel .chat-engine-row select { font-size: 13px; min-height: 44px; padding: 6px; color: var(--ink); border-color: var(--edge); }
body .menu-panel #setup-mobile-ai { min-height: 44px; font-size: 12px; }
body .menu-panel .chat-data-note { display: block; margin: 8px; font-size: 11px; color: var(--muted); }
body #page-talk .chat-history { flex: 1; min-height: 0; max-height: none; padding: 5px 2px 10px; gap: 14px; scrollbar-color: var(--edge) transparent; }
body #page-talk .chat-history:empty { display: block; min-height: 30px; background: radial-gradient(ellipse at 50% 50%, #cde1ff70, transparent 65%); }
body #page-talk .chat-message { max-width: 90%; padding: 12px 15px; border-radius: 16px; }
body #page-talk .from-user { background: var(--accent); border-color: var(--accent); color: white; border-bottom-right-radius: 4px; }
body #page-talk .from-nol { background: white; color: var(--ink); border-color: var(--edge); border-left: 3px solid var(--accent); border-bottom-left-radius: 4px; box-shadow: none; }
body #page-talk .message-text { font-size: 15px; line-height: 1.75; }
body #page-talk .message-author { font-size: 11px; }
body #page-talk .composer { flex-shrink: 0; padding: 12px 14px; margin: 6px 0 0; background: white; border: 2px solid var(--accent); border-radius: 18px; box-shadow: 0 4px 16px #1460ed0c; }
body #page-talk .composer textarea { font-size: 16px; min-height: 60px; height: 60px; max-height: 140px; padding: 2px; line-height: 1.65; color: var(--ink); resize: vertical; }
body #page-talk .composer textarea::placeholder { font-size: 15px; color: var(--muted); }
body #page-talk .composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px #1460ed1f; }
body #page-talk .voice-controls { gap: 5px; padding: 6px 0; min-height: 44px; }
body #page-talk .voice-button { min-height: 40px; padding: 6px 13px; background: var(--tint); border-color: var(--edge); color: var(--accent-dark); font-size: 13px; border-radius: 11px; }
body #page-talk .voice-button[aria-pressed="true"] { background: #ffe2ee; border-color: #d32272; color: #a11653; }
body #page-talk .continuous-buttons { gap: 2px; }
body #page-talk .continuous-buttons button { min-height: 40px; font-size: 12px; padding: 5px 8px; border-radius: 10px; }
body #page-talk #voice-settings-open { min-height: 40px; width: 36px; margin-left: auto; font-size: 20px; }
body #page-talk #voice-status { flex-basis: 100%; order: 5; font-size: 11px; line-height: 1.4; }
body #page-talk #voice-status:empty { display: none; }
body #page-talk .composer-bottom { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; margin: 0; padding-top: 6px; border-top: 1px solid #e3edff; }
body #page-talk #open-tools { min-height: 44px; padding: 6px 10px; font-size: 12px; border: 1px solid var(--edge); border-radius: 10px; background: var(--wash); color: var(--accent-dark); }
body #page-talk .memory-link { min-height: 44px; padding: 4px; font-size: 11px; line-height: 1.4; text-align: center; color: var(--muted); }
body #page-talk .memory-link > span:first-child { display: none; }
body .primary-button, body #page-talk .primary-button { background: var(--accent); border: 1px solid var(--accent); color: white; font-size: 13px; min-height: 44px; padding: 8px 15px; border-radius: 11px; box-shadow: none; gap: 8px; }
body .primary-button:hover, body #page-talk .primary-button:hover { background: var(--accent-dark); }
body .secondary-button, body #page-talk .secondary-button { background: white; color: var(--accent-dark); border: 1px solid var(--edge); font-size: 13px; min-height: 40px; padding: 7px 11px; border-radius: 10px; }
body .text-button { color: var(--accent-dark); }
body #page-talk .starter-row { flex-shrink: 0; display: flex; gap: 6px; margin: 8px 0 0; }
body #page-talk.has-chat .starter-row { display: none; }
body #page-talk .starter-row > span { display: none; }
body #page-talk .starter-row button { color: var(--muted); font-size: 12px; min-height: 36px; background: transparent; border: 1px solid var(--edge); padding: 5px 10px; }
body #page-talk .chat-status { flex-shrink: 0; max-height: 54px; overflow: auto; font-size: 12px; }
body #page-today #today-date { margin: -8px 0 8px; font-size: 13px; color: var(--muted); }
body #today-status { margin: 0; font-size: 12px; color: var(--muted); }
body .daily-actions { gap: 8px; margin: 12px 0; }
body .daily-actions .text-button { min-height: 40px; padding: 5px 8px; }
.daily-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
body .daily-section { margin: 0; padding: 14px; border: 1px solid var(--edge); border-top: 4px solid var(--accent); background: white; border-radius: 14px; min-width: 0; }
body .daily-section h2 { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--ink); line-height: 1.5; }
body .daily-section .section-top { flex-wrap: wrap; gap: 0 6px; margin: 0 0 8px; }
body .daily-section .section-top h2 { margin: 0; }
body .daily-section .section-top .text-button { font-size: 12px; min-height: 32px; }
body .daily-empty { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.65; }
body .daily-card { margin: 8px 0 0; padding: 10px; gap: 4px; border: 1px solid var(--edge); border-left: 3px solid var(--accent); background: var(--wash); color: var(--ink); font-size: 13px; border-radius: 10px; }
body .daily-card .text-button { min-height: 40px; font-size: 12px; text-align: left; }
body .daily-card small { color: var(--muted); }
body .compact-section { border: 1px solid var(--edge); background: white; border-radius: 12px; margin: 10px 0; padding: 0 12px; }
.compact-section > summary { cursor: pointer; font-size: 13px; font-weight: 600; min-height: 44px; padding: 10px 0; color: var(--accent-dark); }
body .memory-overview { color: var(--muted); font-size: 12px; margin: -6px 0 10px; }
body .memory-shelf { gap: 6px; }
body .memory-shelf button { min-height: 40px; padding: 6px 11px; font-size: 12px; border-color: var(--edge); background: white; color: var(--muted); }
body .memory-shelf button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: white; }
body .memory-toolbar { margin: 10px 0; gap: 8px; flex-wrap: wrap; flex-direction: row; }
body .memory-toolbar > .primary-button { align-self: auto; }
body .memory-topics { gap: 3px; }
body .memory-topics button { min-height: 36px; font-size: 12px; padding: 5px 8px; color: var(--muted); }
body .memory-topics button[aria-pressed="true"] { color: var(--accent-dark); background: var(--tint); }
body .memory-assist { margin: 0 0 10px; padding: 0; background: white; border: 0; }
body .memory-assist p { font-size: 12px; margin: 6px 0; }
body .search-wrap { background: white; color: var(--muted); border-color: var(--edge); margin: 10px 0; padding: 7px 12px; border-radius: 12px; }
body .search-wrap input { min-height: 32px; font-size: 16px; color: var(--ink); }
body .memory-card { padding: 13px; background: white; border-color: var(--edge); border-radius: 13px; }
body .memory-card.selected { border-left: 4px solid var(--accent); padding-left: 10px; }
body .memory-text { font-size: 14px; line-height: 1.7; margin: 7px 0; }
body .memory-meta, body .memory-dates, body .memory-controls { color: var(--muted); font-size: 11px; }
body .memory-buttons { flex-wrap: wrap; gap: 2px; }
body .memory-buttons button { min-height: 36px; color: var(--accent-dark); font-size: 11px; padding: 4px 7px; }
body .check-label { color: var(--muted); }
body .data-center, body .device-privacy { border-color: var(--edge); background: var(--wash); border-left-color: var(--accent); padding: 12px; margin: 10px 0; border-radius: 12px; }
body .data-center p, body .device-privacy p { color: var(--muted); font-size: 12px; }
body .storage-note { background: var(--wash); padding: 12px; margin: 10px 0; }
body .storage-note :is(b, p) { color: var(--muted); }
body .data-actions { gap: 12px; margin: 10px 0; }
body .data-actions > button { min-height: 40px; font-size: 12px; }
body .avatar-settings, body .conversation-settings { padding: 15px; margin: 12px 0; border: 1px solid var(--edge); border-radius: 14px; background: white; }
body .avatar-settings h2, body .conversation-settings h2, body .device-privacy h2 { font-size: 16px; margin: 0 0 10px; color: var(--ink); }
body .avatar-settings p { font-size: 12px; margin: 5px 0; color: var(--muted); }
body .conversation-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; align-items: center; }
body .conversation-settings h2 { grid-column: 1 / -1; }
body .conversation-settings :is(input, select) { margin: 0; width: 100%; min-height: 44px; font-size: 14px; border-color: var(--edge); color: var(--ink); background: var(--wash); }
body .conversation-settings label { margin: 0; font-size: 13px; color: var(--muted); }
body .conversation-settings > button { grid-column: 1 / -1; justify-self: end; margin-top: 5px; }
body .setting-row { padding: 12px 0; border-color: var(--edge); }
body .setting-row b { font-size: 13px; color: var(--ink); }
body .setting-row p { font-size: 12px; color: var(--muted); margin: 3px 0 0; }
body .floating-persona-view { display: flex; margin: 8px 0; padding: 0; gap: 6px; }
body .floating-persona-view button { min-height: 40px; font-size: 12px; border-color: var(--edge); color: var(--accent-dark); }
body .floating-persona-view button[aria-pressed="true"] { background: var(--tint); }
body .popup-chrome { background: var(--wash); border-color: var(--edge); }
body .popup-identity h2, body .popup-identity small { color: var(--ink); }
body .popup-window-actions button { color: var(--accent-dark); }
body.floating-mode .workspace { padding: 0 16px; background: var(--wash); color: var(--ink); }
body.floating-mode .topbar { height: 52px; min-height: 52px; }
body.floating-mode .topbar .nav-button { font-size: 13px !important; padding: 6px 12px; min-height: 40px; }
body.floating-mode .page { padding-top: 12px; }
body.floating-mode #page-talk > h1 { font-size: 18px; margin-bottom: 7px; }
body.floating-mode #page-talk .mode-bar button { font-size: 12px; min-height: 36px; padding: 5px 10px; }
body.floating-mode #page-talk .starter-row { display: none; }
body.floating-mode .workspace-menu > summary { font-size: 12px; padding: 6px; }
@media (max-width: 600px) {
  body:not(.floating-mode) .companion { height: calc(64px + env(safe-area-inset-top)); min-height: calc(64px + env(safe-area-inset-top)); padding: calc(8px + env(safe-area-inset-top)) 16px 8px; }
  body:not(.floating-mode) .brand { gap: 8px; }
  .brand > span { font-size: 29px; }
  .brand small { font-size: 11px; }
  body:not(.floating-mode) .companion .avatar-stage { right: 16px; top: calc(8px + env(safe-area-inset-top)); width: 47px; height: 47px; }
  body:not(.floating-mode) .companion .avatar-surface { width: 47px; height: 47px; }
  body:not(.floating-mode) .companion .presence { display: none; }
  body:not(.floating-mode) .workspace { padding: 0 14px; }
  body .topbar { height: 56px; min-height: 56px; gap: 4px; }
  body .topbar > nav { gap: 4px !important; }
  body .topbar .nav-button { font-size: 13px !important; padding: 6px 13px; }
  .workspace-menu > summary { font-size: 12px; padding: 6px 8px; }
  body .page { padding-top: 14px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  body .page > h1 { font-size: 23px; margin-bottom: 12px; }
  body #page-talk { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  body #page-talk > h1 { font-size: 18px; margin-bottom: 8px; }
  body #page-talk .mode-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  body #page-talk .mode-bar button { font-size: 12px; padding: 5px 7px; }
  body #page-talk .composer { padding: 10px; border-radius: 15px; }
  body #page-talk .composer textarea { min-height: 60px; max-height: 110px; }
  body #page-talk .chat-toolbar { margin: 3px 0; }
  body #page-talk #chat-connection { font-size: 11px; }
  body #page-talk .chat-toolbar .text-button { font-size: 12px; padding: 4px 6px; }
  .chat-toolbar .compact-menu > summary { font-size: 12px; padding: 5px 7px; }
  body #page-talk .starter-row { display: none; }
  .daily-grid { gap: 10px; }
  body .daily-section { padding: 12px; }
  body .daily-section h2 { font-size: 15px; }
  body .daily-empty { font-size: 12px; }
  body .memory-toolbar > .primary-button { font-size: 12px; }
  body .memory-toolbar .filter-group { gap: 0; }
  body .memory-topics button { font-size: 11px; padding: 5px 6px; }
  body .menu-panel { max-height: 55dvh; }
  body.floating-mode .workspace-menu > summary > span { display: none; }
}
@media (max-width: 360px) {
  .brand small { font-size: 10px; }
  body .topbar .nav-button { padding: 6px 10px; }
  .workspace-menu > summary > span { display: none; }
  body #page-talk .composer-bottom { gap: 4px; }
  body #page-talk #open-tools { padding: 5px 7px; }
  body #page-talk .primary-button { padding: 8px 12px; }
}
@media (max-height: 520px) {
  body:not(.floating-mode) .companion { display: none; }
  body .topbar, body.floating-mode .topbar { min-height: 46px; height: 46px; }
  body #page-talk > h1, body #page-talk > .mode-bar, body #page-talk .starter-row { display: none; }
  body #page-talk .composer textarea { height: 38px; min-height: 38px; }
  body #page-talk .composer { padding: 7px 10px; }
  body #page-talk .voice-controls { padding: 2px 0; }
  body #page-talk .chat-history:empty { min-height: 6px; }
}
/* Keep replies readable in a short window without shrinking controls. */
@media (max-height: 640px) {
  body:not(.floating-mode):has(#page-talk:is(.private-chat, .has-chat):not([hidden])) .companion { display: none; }
  body #page-talk.private-chat:not([hidden]) { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  body #page-talk.private-chat > .mode-bar { display: none; }
  body #page-talk.private-chat #private-chat-banner { flex-shrink: 0; margin: 4px 0; padding: 6px 10px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) { .menu-panel { scroll-behavior: auto; } }