:root {
  --navy: #0B2545;
  --navy-2: #13315C;
  --gold: #C9A227;
  --gold-soft: #F3E9C6;
  --paper: #F6F3EC;
  --card: #FFFFFF;
  --ink: #1B1F27;
  --muted: #6B7280;
  --line: #E6E1D6;
  --danger: #B42318;
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); }
body { overscroll-behavior: none; }
[hidden] { display: none !important; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea { font: inherit; font-size: 16px; color: var(--ink); } /* 16px prevents iOS zoom */
.muted { color: var(--muted); }
.small { font-size: 13px; }
.error { color: var(--danger); min-height: 1.5em; margin: 8px 0 0; font-size: 14px; }

/* ---------- screens ---------- */
.screen { height: 100dvh; display: flex; flex-direction: column; }

.login { align-items: center; justify-content: center; background: var(--navy); padding: 24px; }
.login-card { width: 100%; max-width: 360px; text-align: center; color: #fff; }
.login-mark { width: 72px; height: 72px; border-radius: 18px; margin-bottom: 12px; }
.login h1 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 0; }
.login .muted { color: #A9B4C6; margin: 4px 0 28px; }
.login input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid #2A4A75; background: #0F2E55; color: #fff; margin-bottom: 12px; }
.login input::placeholder { color: #8396B2; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(12px + var(--safe-top)) 18px 12px;
  background: var(--navy); color: #fff;
}
.eyebrow { color: var(--gold); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.title { font-family: var(--serif); font-size: 22px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; border: 0; background: transparent; color: inherit; flex: none; }
.topbar .icon-btn { background: rgba(255,255,255,.08); color: var(--gold); }

.banner { background: var(--gold-soft); color: #5B4710; font-size: 14px; padding: 10px 16px; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.banner button { border: 0; background: var(--navy); color: #fff; border-radius: 8px; padding: 6px 12px; font-size: 14px; }
.banner .x { background: transparent; color: #5B4710; padding: 4px 6px; }

/* ---------- views ---------- */
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.view.scroll { overflow-y: auto; padding: 16px 16px 24px; gap: 14px; }

/* ---------- chat ---------- */
.messages { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: 18px; white-space: normal; word-wrap: break-word; line-height: 1.45; }
.msg.user { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 6px; }
.msg.assistant { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg.reminder { align-self: center; background: var(--gold-soft); border: 1px solid #E5D49A; max-width: 92%; font-size: 15px; }
.msg.brief { border-left: 4px solid var(--gold); }
.msg p { margin: 0 0 8px; } .msg p:last-child { margin: 0; }
.msg ul { margin: 4px 0 8px; padding-left: 20px; }
.msg .time { display: block; font-size: 11px; opacity: .55; margin-top: 4px; text-align: right; }
.msg.typing { color: var(--muted); font-style: italic; }
.dots::after { content: ''; animation: dots 1.4s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

.file-card { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.file-card .ficon { width: 36px; height: 44px; border-radius: 6px; background: #2B579A; color: #fff; font: 700 11px var(--sans); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; flex: none; }
.file-card .fname { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.file-card button { border: 0; background: var(--navy); color: #fff; border-radius: 8px; padding: 7px 12px; font-size: 14px; flex: none; }

.empty { position: absolute; inset: 0 0 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; pointer-events: none; }
.empty-title { font-family: var(--serif); font-size: 24px; margin: 0 0 18px; color: var(--navy); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; pointer-events: auto; }
.chip { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 9px 14px; font-size: 15px; }

.attach-preview { margin: 0 12px; padding: 8px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.attach-preview img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.attach-preview .x { margin-left: auto; border: 0; background: transparent; font-size: 20px; color: var(--muted); }

.composer { display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px 10px; background: var(--paper); border-top: 1px solid var(--line); }
.composer textarea { flex: 1; resize: none; border: 1px solid var(--line); background: var(--card); border-radius: 22px; padding: 10px 16px; max-height: 140px; line-height: 1.35; outline: none; }
.composer textarea:focus { border-color: var(--navy-2); }
.composer .icon-btn { color: var(--muted); }
.round-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--navy); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.round-btn:disabled { opacity: .5; }

.recorder { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--card); border-top: 1px solid var(--line); }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); animation: pulse 1s infinite; }
#recTime { font-variant-numeric: tabular-nums; font-weight: 600; }
.recorder .muted { flex: 1; }
@keyframes pulse { 50% { opacity: .3; } }

/* ---------- lists / cards ---------- */
.list { display: flex; flex-direction: column; gap: 10px; }
.event { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; }
.event .date { width: 52px; text-align: center; border-radius: 10px; background: var(--navy); color: #fff; padding: 6px 0; flex: none; }
.event .date b { display: block; font-family: var(--serif); font-size: 20px; line-height: 1.1; color: var(--gold); }
.event .date span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.event .info { flex: 1; min-width: 0; }
.event .info strong { display: block; }
.event .info small { color: var(--muted); }
.event button { border: 0; background: transparent; color: var(--danger); font-size: 14px; }
.hint { color: var(--muted); font-size: 14px; text-align: center; margin: 16px 8px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.card h3 { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--navy); }
.card .muted { margin: 0 0 12px; font-size: 14px; }
.row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.stack { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 14px; }
.stack textarea, .row input[type=time] { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--paper); }
.switch { appearance: none; width: 48px; height: 28px; border-radius: 999px; background: #D5D0C4; position: relative; transition: .2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch:checked { background: var(--navy); }
.switch:checked::after { left: 23px; }
#installSteps ol { margin: 0; padding-left: 20px; }

.btn { border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 600; }
.btn.primary { background: var(--navy); color: #fff; width: 100%; }
.login .btn.primary { background: var(--gold); color: var(--navy); }
.recorder .btn.primary { width: auto; }
.btn.ghost { background: var(--paper); border: 1px solid var(--line); color: var(--navy); width: 100%; margin-top: 8px; }
.recorder .btn.ghost { width: auto; margin: 0; }
.btn.link { background: none; color: var(--danger); align-self: center; }

/* ---------- tab bar ---------- */
.tabbar { display: flex; background: var(--card); border-top: 1px solid var(--line); padding-bottom: var(--safe-bottom); }
.tab { flex: 1; border: 0; background: none; padding: 8px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); }
.tab.active { color: var(--navy); font-weight: 600; }
.tab.active svg { stroke: var(--gold); }

.toast { position: fixed; left: 50%; bottom: calc(90px + var(--safe-bottom)); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; max-width: 90%; z-index: 10; }

@media (min-width: 720px) {
  .screen#app { max-width: 720px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* ---------- read aloud ---------- */
.speak-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 11px 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--navy); font-size: 13px; font-weight: 600; }
.speak-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.speak-btn.playing { background: var(--navy); color: #fff; border-color: var(--navy); }
.speak-btn.playing svg { fill: currentColor; stroke: none; }
.file-card { flex-wrap: wrap; }
.file-card .speak-btn { margin-top: 0; }
#speechTest.playing { background: var(--navy); color: #fff; }
#speechTest svg { display: none; }
a.btn { display: block; text-align: center; text-decoration: none; box-sizing: border-box; }
select { font: inherit; font-size: 16px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }

/* ---------- schedule: tasks ---------- */
.section-title { font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--navy); margin: 4px 2px 10px; }
.task-add { display: flex; gap: 8px; margin-bottom: 10px; }
.task-add input[type=text] { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--card); }
.task-add input[type=date] { width: 128px; flex: none; border: 1px solid var(--line); border-radius: 12px; padding: 8px 6px; background: var(--card); color: var(--muted); }
.task-add button { border: 0; border-radius: 12px; background: var(--navy); color: #fff; padding: 0 14px; font-weight: 600; }
.task { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; gap: 12px; align-items: center; }
.task.high { border-left: 4px solid var(--gold); }
.task .check { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--navy); background: transparent; color: #fff; font-weight: 700; font-size: 14px; line-height: 1; padding: 0; }
.task.done .check { background: var(--navy); }
.task.done strong { text-decoration: line-through; color: var(--muted); font-weight: 400; }
.task .info { flex: 1; min-width: 0; }
.task .info strong { display: block; font-weight: 600; }
.task .info small { color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.task .del { border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; padding: 0 4px; }
.due { color: var(--muted); }
.due.today { color: #8A6D0B; font-weight: 600; }
.due.overdue { color: var(--danger); font-weight: 600; }
.flag { color: #8A6D0B; font-weight: 600; }
.hint.compact { margin: 6px 0; text-align: left; }
.small-link { color: var(--navy) !important; font-size: 14px; padding: 8px 0; }
#doneList { margin-top: 6px; opacity: .85; }

/* ---------- files ---------- */
.search { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--card); width: 100%; box-sizing: border-box; }
.doc-row { background: var(--card); margin-top: 0; }
.doc-row .fname small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.ficon[data-type=letter] { background: #1F6E43; }
.ficon[data-type=speech] { background: #7A3E9D; }
.ficon[data-type=brief] { background: #B5651D; }
.ficon[data-type=minutes] { background: #2F6F8F; }
.ficon[data-type=report] { background: #5B6B7F; }
.ficon[data-type=circular] { background: #8C2F39; }
.file-card .ficon { font-size: 9px; letter-spacing: .02em; }

/* ---------- memory ---------- */
.memory-list { display: flex; flex-direction: column; }
.mem-cat { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); margin: 10px 0 4px; font-weight: 600; }
.mem { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.mem button { border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; padding: 0 2px; flex: none; }

/* =====================================================================
   Design refresh: navy & gold "Personal Assistant" look
   (appended last so it overrides the earlier base rules)
   ===================================================================== */
:root {
  --navy: #0D2A52;
  --navy-deep: #081D3D;
  --gold: #C9A227;
  --gold-deep: #C08A16;
  --gold-soft: #FBEBC6;
  --gold-line: #EED9A2;
  --paper: #F4F5F9;
  --line: #E4E7EF;
  --ink: #111A2E;
  --muted: #5F6878;
  --shadow: 0 6px 22px rgba(13, 32, 66, .07), 0 1px 3px rgba(13, 32, 66, .05);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}
html, body { background: var(--paper); }
svg.logo { stroke: none; }

/* ---------- header ---------- */
.topbar {
  position: relative; z-index: 2;
  padding: calc(18px + var(--safe-top)) 22px 22px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-bottom-right-radius: 96px 64px;
  overflow: hidden;
}
.topbar::before { /* soft light sweep, like the mockup */
  content: ''; position: absolute; right: -40px; top: -60px; width: 260px; height: 220px;
  background: radial-gradient(closest-side, rgba(255,255,255,.07), transparent); pointer-events: none;
}
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand .logo { width: 58px; height: 58px; flex: none; }
.brand-divider { width: 1.5px; height: 50px; background: rgba(255,255,255,.75); flex: none; }
.brand-text .eyebrow { font-size: 13px; letter-spacing: .24em; font-weight: 600; color: var(--gold); }
.brand-text .title { font-family: var(--serif); font-size: 32px; line-height: 1.05; color: #fff; letter-spacing: .01em; }
.topbar .icon-btn.gear { width: 52px; height: 52px; border-radius: 15px; background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.4); color: #fff; }
.topbar .icon-btn.gear svg { width: 26px; height: 26px; }

.banner { margin: 10px 16px 0; border-radius: 14px; }

/* ---------- home dashboard ---------- */
.chat-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 16px 10px; -webkit-overflow-scrolling: touch; }
.home { display: flex; flex-direction: column; gap: 14px; }
.hello { margin: 0; font-family: var(--serif); color: var(--ink); line-height: 1.04; }
.hello span { display: block; font-size: 38px; font-weight: 400; }
.hello strong { display: block; font-size: 46px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
.hello-sub { margin: -4px 0 4px; color: var(--muted); font-size: 18px; }

.today-banner {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border: 0; border-radius: 20px; padding: 18px 16px 18px 18px; background: var(--gold-soft); color: var(--ink);
  box-shadow: 0 2px 10px rgba(201, 162, 39, .12);
}
.tb-icon svg { width: 34px; height: 34px; stroke-width: 2; }
.tb-divider { width: 1.5px; align-self: stretch; margin: 4px 0; background: var(--gold); flex: none; }
.tb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tb-text b { font-size: 17px; font-weight: 600; }
.tb-text small { font-size: 14px; color: #4A4535; margin-top: 2px; }
.chev { width: 20px; height: 20px; flex: none; stroke-width: 2.2; }

.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qcard {
  display: flex; align-items: center; gap: 12px; text-align: left; min-width: 0;
  border: 0; border-radius: 20px; padding: 14px 12px; background: var(--card); box-shadow: var(--shadow);
}
.qicon { width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 4px 10px rgba(13, 42, 82, .25); }
.qicon svg { width: 22px; height: 22px; }
.qtext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qtext b { font-size: 15.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qtext small { font-size: 13px; color: var(--muted); line-height: 1.3; }
.qcard .chev { color: var(--ink); width: 18px; height: 18px; }

.suggest { display: flex; gap: 8px; overflow-x: auto; margin: 2px -16px 0; padding: 2px 16px 6px; scrollbar-width: none; }
.suggest::-webkit-scrollbar { display: none; }
.suggest .chip { flex: none; white-space: nowrap; border: 0; background: var(--card); box-shadow: var(--shadow); font-size: 14px; padding: 9px 14px; color: var(--ink); }

/* ---------- conversation ---------- */
.messages { overflow: visible; padding: 18px 0 4px; gap: 14px; flex: none; }
.msg { border-radius: 22px; padding: 14px 18px 10px; font-size: 16px; }
.msg.user { background: var(--navy); border-bottom-right-radius: 22px; max-width: 82%; box-shadow: 0 6px 16px rgba(13, 42, 82, .18); }
.msg.user .time { color: rgba(255,255,255,.8); opacity: 1; }
.msg.assistant { background: var(--card); border: 0; border-bottom-left-radius: 22px; box-shadow: var(--shadow); max-width: none; min-width: 0; flex: 0 1 auto; }
.msg.assistant .time { text-align: left; color: var(--muted); opacity: 1; }
.msg.brief { border-left: 0; box-shadow: inset 4px 0 0 var(--gold), var(--shadow); }
.msg ul { padding-left: 22px; }
.msg ul li::marker { color: var(--ink); }
.msg-group { display: flex; flex-direction: column; gap: 12px; align-self: stretch; }
.msg-row { display: flex; align-items: flex-start; gap: 10px; align-self: flex-start; max-width: 88%; }
.avatar-mini { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 4px 10px rgba(13, 42, 82, .22); }
.avatar-mini .logo { width: 32px; height: 32px; }

.reminder-card {
  display: flex; align-items: center; gap: 14px; align-self: stretch;
  background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: 20px; padding: 16px 14px;
}
.rc-icon { width: 58px; height: 58px; border-radius: 50%; background: var(--gold-deep); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 4px 12px rgba(192, 138, 22, .3); }
.rc-icon svg { width: 28px; height: 28px; }
.rc-divider { width: 1.5px; align-self: stretch; background: var(--ink); flex: none; margin: 4px 0; }
.rc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-family: var(--serif); }
.rc-text b { font-size: 20px; color: var(--ink); }
.rc-text span { font-size: 16px; color: #2C3243; line-height: 1.35; }
.rc-text small { font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.rc-btn { flex: none; border: 1.5px solid var(--ink); background: transparent; border-radius: 14px; padding: 9px 14px; font-weight: 600; font-size: 15px; color: var(--ink); }

/* Word document card */
.file-card {
  flex-wrap: nowrap; gap: 14px; margin-top: 0; padding: 16px; border: 0; border-radius: 20px;
  background: var(--card); box-shadow: var(--shadow); align-items: center;
}
.wicon { position: relative; width: 44px; height: 52px; flex: none; border-radius: 6px 12px 6px 6px; background: linear-gradient(135deg, #2B7CD3, #185ABD); box-shadow: 0 3px 8px rgba(24, 90, 189, .3); display: flex; align-items: center; justify-content: center; }
.wicon::after { content: ''; position: absolute; top: 0; right: 0; width: 14px; height: 14px; background: linear-gradient(225deg, #E8F1FC 50%, #9CC3F0 50%); border-radius: 0 10px 0 4px; }
.wicon span { color: #fff; font: 800 22px var(--sans); margin-right: 4px; }
.file-card .fname { display: flex; flex-direction: column; align-items: flex-start; -webkit-line-clamp: unset; overflow: visible; min-width: 0; }
.file-card .fname b { font-size: 16px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.file-card .fname small { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.file-card .dl { display: inline-flex; align-items: center; gap: 7px; background: var(--navy); color: #fff; border-radius: 14px; padding: 10px 14px; font-size: 15px; font-weight: 600; box-shadow: 0 4px 10px rgba(13, 42, 82, .2); }
.file-card .dl svg { width: 19px; height: 19px; stroke-width: 2.2; }
.file-card .speak-btn { margin-top: 6px; padding: 3px 10px 3px 8px; background: var(--paper); color: var(--navy); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; }
.file-card .speak-btn.playing { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- composer ---------- */
.attach-preview { margin: 0 16px 6px; border: 0; box-shadow: var(--shadow); border-radius: 16px; }
.composer { align-items: center; gap: 12px; padding: 8px 16px 12px; background: linear-gradient(to bottom, rgba(244,245,249,0), var(--paper) 30%); border-top: 0; }
.pill { flex: 1; min-width: 0; display: flex; align-items: center; background: var(--card); border-radius: 30px; box-shadow: var(--shadow); padding: 5px 10px 5px 8px; }
.pill .attach { color: var(--ink); width: 40px; height: 40px; }
.pill .attach svg { width: 24px; height: 24px; }
.pill-divider { width: 1px; height: 28px; background: var(--line); margin: 0 6px 0 2px; flex: none; }
.composer textarea { border: 0; background: transparent; padding: 10px 6px; border-radius: 0; font-size: 17px; }
.composer textarea:focus { border-color: transparent; }
.composer textarea::placeholder { color: #8A92A3; }
.round-btn { width: 56px; height: 56px; background: var(--navy); color: #fff; box-shadow: 0 8px 18px rgba(13, 42, 82, .3); }
.round-btn svg { width: 24px; height: 24px; }
.recorder { margin: 0 16px 12px; border-radius: 20px; border: 0; box-shadow: var(--shadow); }

/* ---------- tab bar ---------- */
.tabbar { border-top: 0; border-radius: 26px 26px 0 0; box-shadow: 0 -6px 24px rgba(13, 32, 66, .07); padding: 4px 6px var(--safe-bottom); position: relative; z-index: 2; }
.tab { position: relative; padding: 12px 0 14px; gap: 4px; font-size: 14px; color: #6B7385; }
.tab svg { width: 28px; height: 28px; stroke-width: 1.7; }
.tab.active { color: var(--ink); font-weight: 600; }
.tab.active svg { stroke: var(--gold-deep); }
.tab[data-view=chat].active svg path { fill: var(--gold-deep); }
.tab.active::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 60%; max-width: 76px; height: 4px; border-radius: 4px; background: var(--gold-deep); }

/* ---------- other pages ---------- */
.view.scroll { padding: 20px 16px 28px; gap: 16px; }
.page-title { font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--navy); margin: 0; line-height: 1.1; }
.section-title { font-size: 21px; color: var(--ink); }
.card, .event, .task { border: 0; box-shadow: var(--shadow); }
.card { border-radius: 20px; padding: 18px; }
.card h3 { font-size: 20px; color: var(--ink); }
.event, .task { border-radius: 18px; padding: 14px; }
.task.high { box-shadow: inset 4px 0 0 var(--gold), var(--shadow); border-left: 0; }
.event .date { border-radius: 14px; width: 54px; }
.task-add input[type=text], .task-add input[type=date], .search { border: 0; box-shadow: var(--shadow); border-radius: 16px; }
.task-add input[type=text], .search { padding: 12px 14px; }
.task-add button { border-radius: 16px; padding: 0 18px; }
.btn { border-radius: 14px; }
.btn.ghost { background: var(--paper); }

.filters { display: flex; gap: 8px; overflow-x: auto; margin: -4px -16px 0; padding: 2px 16px 4px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filter { flex: none; border: 0; border-radius: 999px; padding: 8px 14px; background: var(--card); box-shadow: var(--shadow); font-size: 14px; color: var(--ink); }
.filter.active { background: var(--navy); color: #fff; }

.profile-card { display: flex; align-items: center; gap: 16px; background: var(--card); border-radius: 20px; padding: 18px; box-shadow: var(--shadow); }
.profile-card .avatar { width: 62px; height: 62px; border-radius: 50%; background: var(--navy); color: var(--gold); font: 600 23px var(--serif); display: flex; align-items: center; justify-content: center; flex: none; border: 2px solid var(--gold); }
.profile-card b { display: block; font-size: 18px; color: var(--ink); }
.profile-card small { display: block; color: var(--muted); font-size: 14px; line-height: 1.35; }

/* ---------- login ---------- */
.login { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); }
.login-mark { width: auto; height: auto; margin: 0 auto 14px; }
.login-mark .logo { width: 88px; height: 88px; }
.login .eyebrow { font-size: 13px; letter-spacing: .24em; font-weight: 600; }
.login h1 { font-size: 38px; margin-top: 2px; }
.login input { border-radius: 14px; }

/* small phones */
@media (max-width: 370px) {
  .brand .logo { width: 48px; height: 48px; }
  .brand-text .title { font-size: 27px; }
  .hello span { font-size: 32px; }
  .hello strong { font-size: 38px; }
  .qcard { padding: 12px 10px; gap: 9px; }
  .qicon { width: 40px; height: 40px; }
  .qtext b { font-size: 14px; }
  .rc-btn { padding: 8px 10px; font-size: 14px; }
  .file-card .dl span { display: none; }
}
@media (min-width: 720px) {
  .screen#app { border: 0; box-shadow: 0 0 40px rgba(13, 32, 66, .08); }
}

/* file type badges */
.wicon[data-kind=pdf] { background: linear-gradient(135deg, #E5484D, #B4232A); box-shadow: 0 3px 8px rgba(180, 35, 42, .3); }
.wicon[data-kind=excel] { background: linear-gradient(135deg, #21A366, #107C41); box-shadow: 0 3px 8px rgba(16, 124, 65, .3); }
.wicon[data-kind=ppt] { background: linear-gradient(135deg, #E8743B, #C43E1C); box-shadow: 0 3px 8px rgba(196, 62, 28, .3); }
.wicon[data-kind=text], .wicon[data-kind=image] { background: linear-gradient(135deg, #7A8699, #4F5B6E); box-shadow: 0 3px 8px rgba(79, 91, 110, .3); }
.wicon[data-kind=pdf] span, .wicon[data-kind=text] span, .wicon[data-kind=image] span { font-size: 12px; letter-spacing: .02em; margin-right: 2px; }

/* Google Drive setup */
.btn.google { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1F1F1F; border: 1px solid #DADCE0; font-weight: 600; text-decoration: none; }
.btn.google .g-logo { width: 20px; height: 20px; stroke: none; }
.drive-setup { display: flex; flex-direction: column; gap: 10px; }
.drive-setup .setup-intro { margin: 0; font-size: 14px; color: var(--ink); }
.drive-setup ol { margin: 0; padding-left: 20px; font-size: 14px; color: var(--ink); display: flex; flex-direction: column; gap: 8px; }
.drive-setup a { color: var(--navy); font-weight: 600; }
.copy-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.copy-row code { flex: 1; min-width: 0; overflow-wrap: anywhere; background: var(--paper); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; }
.mini { border: 0; background: var(--navy); color: #fff; border-radius: 8px; padding: 6px 10px; font-size: 13px; flex: none; }
.drive-setup input { border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; background: var(--paper); width: 100%; }

/* show/hide password */
.pw-wrap { position: relative; margin-bottom: 12px; }
.pw-wrap input { margin-bottom: 0 !important; padding-right: 52px !important; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; background: transparent; color: #A9B4C6; display: flex; align-items: center; justify-content: center; }
.pw-toggle .eye-closed { display: none; }
.pw-toggle.on .eye-open { display: none; }
.pw-toggle.on .eye-closed { display: block; }
.login button[type=submit]:disabled { opacity: .6; }

/* photos and PDFs in the chat */
.msg.user.has-media { padding: 6px 6px 8px; }
.msg.user.has-media p { padding: 6px 10px 0; }
.msg.user.has-media .time { padding-right: 8px; }
.att-grid { display: grid; gap: 4px; }
.att-grid.n2 { grid-template-columns: 1fr 1fr; }
.att-grid.n3 { grid-template-columns: 1fr 1fr 1fr; }
.att-img { display: block; width: 100%; max-width: 260px; max-height: 320px; object-fit: cover; border-radius: 16px; background: rgba(255,255,255,.12); min-height: 120px; cursor: zoom-in; }
.att-grid.n2 .att-img, .att-grid.n3 .att-img { height: 130px; min-height: 0; }
.att-img.broken { min-height: 60px; }
.att-pdf { display: flex; align-items: center; gap: 10px; border: 0; background: rgba(255,255,255,.12); color: #fff; border-radius: 14px; padding: 8px 12px 8px 8px; text-align: left; font-size: 14px; }
.att-pdf .wicon { width: 32px; height: 38px; }
.viewer { position: fixed; inset: 0; z-index: 50; background: rgba(5, 12, 26, .92); display: flex; align-items: center; justify-content: center; padding: 16px; }
.viewer img { max-width: 100%; max-height: 100%; border-radius: 10px; }

/* booked meeting card with Add to Calendar */
.event-card { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 20px; padding: 14px; box-shadow: var(--shadow); }
.event-card .date { width: 50px; text-align: center; border-radius: 14px; background: var(--navy); color: #fff; padding: 6px 0; flex: none; }
.event-card .date b { display: block; font-family: var(--serif); font-size: 20px; line-height: 1.1; color: var(--gold); }
.event-card .date span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.event-card .info { flex: 1; min-width: 0; }
.event-card .info strong { display: block; color: var(--ink); }
.event-card .info small { color: var(--muted); }
.event-card.cancelled { opacity: .6; }
.cal-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; background: var(--gold-soft); color: var(--ink); border: 1px solid var(--gold-line); border-radius: 14px; padding: 9px 12px; font-size: 14px; font-weight: 600; text-decoration: none; }
.cal-btn svg { width: 18px; height: 18px; }
.cal-mini { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--gold-soft); color: var(--ink); flex: none; }
.cal-mini svg { width: 19px; height: 19px; }
@media (max-width: 370px) { .cal-btn span { display: none; } }

.login-foot { margin-top: 18px; font-size: 13px; } .login-foot a { color: #A9B4C6; }

/* live (streamed) replies */
.msg.live { min-width: 120px; }
.live-text:empty { display: none; }
.live-text p { margin: 0 0 8px; } .live-text p:last-child { margin: 0; }
.live-status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; font-style: italic; padding: 2px 0; }
.live-text:not(:empty) + .live-status { margin-top: 8px; }
.live-status .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-deep); animation: pulse 1.1s ease-in-out infinite; flex: none; }

/* compact top bar */
.topbar { padding: calc(8px + var(--safe-top)) 16px 10px; border-bottom-right-radius: 56px 36px; }
.brand { gap: 10px; }
.brand .logo { width: 38px; height: 38px; }
.brand-divider { height: 32px; }
.brand-text .eyebrow { font-size: 10px; letter-spacing: .22em; }
.brand-text .title { font-size: 22px; }
.topbar .icon-btn.gear { width: 40px; height: 40px; border-radius: 12px; }
.topbar .icon-btn.gear svg { width: 21px; height: 21px; }
.chat-scroll { padding-top: 16px; }
@media (max-width: 370px) { .brand .logo { width: 34px; height: 34px; } .brand-text .title { font-size: 20px; } }

/* live dictation text in the recorder bar */
#recLabel { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; line-height: 1.3; }

/* lower, tighter tab bar: use part of the iPhone home-bar zone instead of leaving it blank */
.tabbar { padding: 2px 6px max(4px, calc(var(--safe-bottom) - 20px)); }
.tab { padding: 8px 0 6px; gap: 2px; font-size: 13px; }
.tab svg { width: 26px; height: 26px; }
.tab.active::after { bottom: 1px; height: 3px; }

/* =====================================================================
   Blue theme (matches the Chisom onboarding design)
   ===================================================================== */
:root {
  --navy: #1F5EF5;          /* primary blue (name kept for older rules) */
  --navy-deep: #1646CF;
  --navy-2: #3B7BFF;
  --gold: #3B7BFF;          /* accent */
  --gold-deep: #1F5EF5;
  --gold-soft: #EAF1FF;
  --gold-line: #D3E1FF;
  --paper: #F4F7FE;
  --card: #FFFFFF;
  --line: #E2E9F7;
  --ink: #0D1B4D;
  --muted: #5E6B8C;
  --blue-grad: linear-gradient(135deg, #3A82FF 0%, #1A4FE0 100%);
  --green-grad: linear-gradient(135deg, #34D06B 0%, #16A34A 100%);
  --shadow: 0 6px 22px rgba(31, 94, 245, .08), 0 1px 3px rgba(13, 27, 77, .05);
  --serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html, body { background: var(--paper); color: var(--ink); }

/* header */
.topbar { background: var(--blue-grad); border-bottom-right-radius: 40px 32px; padding: calc(10px + var(--safe-top)) 18px 14px; }
.topbar::before { background: radial-gradient(closest-side, rgba(255,255,255,.18), transparent); }
.brand-divider { background: rgba(255,255,255,.45); height: 34px; }
.brand-text .eyebrow { color: #D6E4FF; letter-spacing: .14em; font-size: 11px; }
.brand-text .title { color: #fff; font-weight: 700; font-size: 24px; letter-spacing: -.01em; }
.topbar .icon-btn.gear { background: rgba(255,255,255,.14); border: 0; color: #fff; width: 44px; height: 44px; border-radius: 14px; }
.topbar .chisom.sm { --s: 44px; }

/* headings: bold sans like the design */
.hello strong, .page-title, .empty-title { color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
.card h3, .section-title { color: var(--ink); font-weight: 700; }
.eyebrow { color: var(--navy); }

/* buttons and accents */
.btn.primary, .file-card .dl, .task-add button, .mini, .banner button { background: var(--blue-grad); color: #fff; }
.btn.primary { border-radius: 14px; box-shadow: 0 8px 20px rgba(31, 94, 245, .25); }
.btn.ghost { background: #fff; color: var(--navy); border-color: var(--line); }
.round-btn { background: var(--blue-grad); color: #fff; box-shadow: 0 8px 18px rgba(31, 94, 245, .3); }
.msg.user { background: var(--blue-grad); box-shadow: 0 6px 16px rgba(31, 94, 245, .22); }
.banner, .banner .x { color: var(--ink); }
.tb-text small { color: var(--muted); }
.today-banner { background: #fff; box-shadow: var(--shadow); }
.tb-icon { color: var(--navy); }
.qicon, .event .date, .event-card .date, .profile-card .avatar { background: var(--blue-grad); }
.event .date b, .event-card .date b { color: #fff; }
.profile-card .avatar { color: #fff; border-color: #D6E4FF; }
.due.today, .flag { color: #E8590C; }
.switch:checked { background: #22C55E; }
.tab.active { color: var(--navy); }
.tab.active svg { stroke: var(--navy); }
.filter.active { background: var(--blue-grad); }
.speak-btn.playing, #speechTest.playing, .file-card .speak-btn.playing { background: var(--navy); border-color: var(--navy); }
.cal-btn, .cal-mini { background: var(--gold-soft); border-color: var(--gold-line); color: var(--navy); }
.mem-cat { color: var(--navy); }
.avatar-mini { background: transparent; box-shadow: none; }

/* login */
.login { background: radial-gradient(120% 60% at 80% 0%, #DCE7FF 0%, #F4F7FE 55%); }
.login-card { color: var(--ink); }
.login h1 { color: var(--ink); font-weight: 800; font-size: 32px; letter-spacing: -.02em; }
.login .eyebrow { color: var(--navy); }
.login .muted { color: var(--muted); }
.login input { background: #fff; border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow); }
.login input::placeholder { color: #8A96B5; }
.login .btn.primary { background: var(--blue-grad); color: #fff; border-radius: 999px; padding: 15px; }
.pw-toggle { color: #8A96B5; }
.login-foot a { color: var(--muted); }
.login-mark.chisom { --s: 120px; margin: 0 auto 10px; }

/* ================= Chisom (robot) ================= */
.chisom { --s: 44px; position: relative; display: inline-block; width: var(--s); height: var(--s); flex: none; }
.chisom svg.robot { width: 100%; height: 100%; display: block; overflow: visible; stroke: none; }
.robot .rb-eye { transform-box: fill-box; transform-origin: center; animation: rb-blink 5s infinite; }
.robot .rb-mouth { transform-box: fill-box; transform-origin: center top; }
.robot .rb-eyes { transform-box: fill-box; transform-origin: center; }
.chisom.speaking .rb-mouth { animation: rb-talk .24s ease-in-out infinite alternate; }
.chisom.thinking .rb-eyes { animation: rb-think 1.4s ease-in-out infinite; }
.chisom.thinking .robot { animation: rb-nod 1.4s ease-in-out infinite; }
.robot .rb-float { animation: rb-float 3.4s ease-in-out infinite; }
.robot .rb-shadow { transform-box: fill-box; transform-origin: center; animation: rb-shadow 3.4s ease-in-out infinite; }
.robot .rb-wave { transform-box: view-box; transform-origin: 52px 162px; animation: rb-wave 1.8s ease-in-out infinite; }
.robot .rb-thumbs { transform-box: view-box; transform-origin: 148px 162px; animation: rb-thumb 2.2s ease-in-out infinite; }
.robot .rb-star { transform-box: fill-box; transform-origin: center; animation: rb-star 3s ease-in-out infinite; }
.robot .rb-sparks path, .ill-sparks path { animation: rb-spark 2s ease-in-out infinite; }
.robot .rb-sparks path:nth-child(2), .ill-sparks path:nth-child(2) { animation-delay: .25s; }
.robot .rb-sparks path:nth-child(3) { animation-delay: .5s; }
.chisom.speaking .rb-sparks path { animation-duration: .7s; }

@keyframes rb-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.15); } }
@keyframes rb-talk { from { transform: scale(.9, .6); } to { transform: scale(1.08, 1.9); } }
@keyframes rb-think { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5px, -3px); } }
@keyframes rb-nod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
@keyframes rb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes rb-shadow { 0%, 100% { transform: scaleX(1); opacity: .14; } 50% { transform: scaleX(.82); opacity: .08; } }
@keyframes rb-wave { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(16deg); } }
@keyframes rb-thumb { 0%, 70%, 100% { transform: translateY(0) rotate(0); } 80% { transform: translateY(-6px) rotate(-6deg); } 90% { transform: translateY(0) rotate(3deg); } }
@keyframes rb-star { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18) rotate(10deg); } }
@keyframes rb-spark { 0%, 100% { opacity: 1; transform: translate(0, 0); } 50% { opacity: .35; transform: translate(-2px, -2px); } }

/* only the face that is thinking or talking moves in the chat list */
.avatar-mini.chisom:not(.thinking):not(.speaking) .rb-eye { animation: none; }
@media (prefers-reduced-motion: reduce) { .chisom *, .onboard * { animation-duration: 0s !important; animation-iteration-count: 1 !important; } }

/* ================= onboarding ================= */
body.ob-open { overflow: hidden; }
.onboard {
  position: fixed; inset: 0; z-index: 60; overflow: hidden;
  display: flex; flex-direction: column; color: var(--ink);
  background: linear-gradient(180deg, #F7F9FF 0%, #EEF3FF 100%);
  padding: var(--safe-top) 0 var(--safe-bottom);
  animation: ob-in .45s ease both;
}
.onboard.leaving { animation: ob-out .45s ease both; }
@keyframes ob-in { from { opacity: 0; } }
@keyframes ob-out { to { opacity: 0; transform: scale(1.03); } }
.ob-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.ob-blob.b1 { width: 72vw; height: 72vw; max-width: 420px; max-height: 420px; right: -28vw; top: -22vw; background: radial-gradient(circle at 40% 60%, #DCE7FF, #E9F0FF 70%); animation: ob-drift 12s ease-in-out infinite alternate; }
.ob-blob.b2 { width: 60vw; height: 60vw; left: -30vw; bottom: 8vh; background: radial-gradient(circle, #E6EEFF, transparent 70%); animation: ob-drift 16s ease-in-out infinite alternate-reverse; }
@keyframes ob-drift { to { transform: translate(-6vw, 5vw) scale(1.08); } }

.ob-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 0; min-height: 56px; }
.ob-back { width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.ob-back svg { width: 26px; height: 26px; stroke-width: 2.2; }
.ob-skip { display: none; border: 0; background: transparent; color: var(--navy); font-weight: 600; font-size: 17px; align-items: center; gap: 2px; margin-left: auto; }
.ob-skip svg { width: 18px; height: 18px; stroke-width: 2.4; }
.ob-icon { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(31, 94, 245, .15); }
.ob-icon .off, .ob-icon.muted .on { display: none; }
.ob-icon.muted .off { display: block; }
.onboard.first .ob-back, .onboard.first .ob-icon { display: none; }
.onboard.first .ob-skip { display: inline-flex; }

.ob-viewport { position: relative; z-index: 1; flex: 1; min-height: 0; overflow: hidden; }
.ob-track { display: flex; height: 100%; transition: transform .55s cubic-bezier(.22, .8, .22, 1); will-change: transform; }
.ob-slide { flex: 0 0 100%; height: 100%; overflow-y: auto; padding: 0 26px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ob-slide::before, .ob-slide::after { content: ''; flex: 1 1 0; min-height: 4px; }
.ob-slide::after { flex-grow: .6; }
.onboard .ob-art svg, .onboard .ob-toggle svg { stroke: none; }
.ob-slide > * { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .9, .3, 1.2); }
.ob-slide.active > * { opacity: 1; transform: none; }
.ob-slide.active > *:nth-child(2) { transition-delay: .1s; }
.ob-slide.active > *:nth-child(3) { transition-delay: .2s; }
.ob-slide.active > *:nth-child(4) { transition-delay: .3s; }
.ob-slide.active > *:nth-child(5) { transition-delay: .4s; }
.ob-h { font-family: var(--sans); font-weight: 800; font-size: 34px; line-height: 1.12; letter-spacing: -.02em; margin: 6px 0 12px; color: #0B1A4A; }
.s-meet .ob-h { font-size: 42px; margin-top: 10px; }
.ob-p { color: #2A3A66; font-size: 18px; line-height: 1.45; margin: 0 auto 12px; max-width: 330px; }

.ob-art { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 200px; margin: 10px 0; }
.s-meet .ob-art { margin-top: 2vh; }
.ob-robot { --s: min(70vw, 300px); }
.s-meet .ob-robot { height: calc(var(--s) * .92); }
.s-meet.active .ob-robot { animation: ob-pop .9s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes ob-pop { from { opacity: 0; transform: scale(.6) translateY(30px); } }

/* slide 2 */
.ob-hello { position: relative; width: 100%; max-width: 380px; height: 250px; margin-top: 4px; }
.ob-hello .ob-robot { position: absolute; left: -20px; bottom: -6px; --s: 190px; height: 170px; overflow: hidden; }
.ob-bubble { position: absolute; right: 0; top: 0; width: 230px; text-align: left; background: #fff; border-radius: 24px 24px 24px 8px; padding: 16px 18px; font-size: 17px; line-height: 1.4; color: #0B1A4A; box-shadow: 0 12px 30px rgba(31, 94, 245, .14); min-height: 112px; }
.ob-bubble::after { content: ''; position: absolute; left: 34px; bottom: -12px; border: 12px solid transparent; border-top-color: #fff; border-bottom: 0; transform: skewX(-25deg); }
.ob-caret { display: inline-block; width: 2px; height: 1em; background: var(--navy); vertical-align: -2px; margin-left: 2px; animation: ob-caret 1s steps(1) infinite; }
@keyframes ob-caret { 50% { opacity: 0; } }
.ob-field { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 360px; background: #fff; border: 1.5px solid #D9E3FA; border-radius: 999px; padding: 0 18px; box-shadow: 0 8px 22px rgba(31, 94, 245, .08); z-index: 1; }
.ob-field:focus-within { border-color: var(--navy); }
.ob-field svg { color: #8EA2CF; width: 22px; height: 22px; flex: none; }
.ob-field input { flex: 1; border: 0; outline: none; background: transparent; padding: 16px 0; font-size: 17px; color: var(--ink); min-width: 0; }
.ob-or { color: var(--navy); font-size: 14px; margin: 16px 0 10px; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ob-chip { border: 1px solid #D5E2FF; background: #E9F0FF; color: #0B1A4A; border-radius: 999px; padding: 10px 18px; font-size: 16px; font-weight: 500; transition: transform .15s, background .2s; }
.ob-chip:active { transform: scale(.95); }
.ob-chip.on { background: var(--blue-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(31, 94, 245, .3); }

/* feature illustrations */
.ill { width: min(86vw, 330px); height: auto; overflow: visible; }
.ill-cal .cal-body { animation: rb-float 3.6s ease-in-out infinite; }
.ill-cal .cal-clock { transform-box: fill-box; transform-origin: center; animation: ill-bob 3.6s ease-in-out infinite .4s; }
.ill-cal .clk-m { transform-box: view-box; transform-origin: 206px 158px; animation: spin 6s linear infinite; }
.ill-cal .clk-h { transform-box: view-box; transform-origin: 206px 158px; animation: spin 36s linear infinite; }
.ill-cal .hit { animation: cal-hit 3s ease-in-out infinite; }
.ill-cal .hit.h2 { animation-delay: 1s; } .ill-cal .hit.h3 { animation-delay: 2s; }
@keyframes cal-hit { 0%, 30%, 100% { fill: #E3ECFD; } 10%, 22% { fill: #3B7BFF; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ill-bob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.03); } }

.ill-pad { position: absolute; width: min(84vw, 330px); height: 74%; border-radius: 48% 52% 46% 54% / 55% 50% 50% 45%; background: #E4EDFF; animation: ill-morph 9s ease-in-out infinite alternate; }
@keyframes ill-morph { to { border-radius: 55% 45% 52% 48% / 45% 55% 45% 55%; transform: scale(1.04); } }
.ill-docs { gap: 22px; }
.doc-card { position: relative; width: 116px; height: 140px; border-radius: 20px; background: #fff; box-shadow: 0 18px 34px rgba(13, 27, 77, .16); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 16px 18px; overflow: hidden; }
.doc-card b { position: absolute; left: 0; right: 0; top: 18px; margin: auto; width: 76px; height: 76px; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #fff; font: 800 34px var(--sans); box-shadow: 0 10px 20px rgba(0, 0, 0, .15); }
.doc-card.word b { background: linear-gradient(135deg, #3A82FF, #1747D6); font-size: 44px; }
.doc-card.pdf b { background: linear-gradient(135deg, #FF6B5B, #E5352B); font-size: 26px; }
.doc-card i { display: block; height: 5px; border-radius: 3px; background: #E3E9F6; margin-top: 6px; }
.doc-card i:last-child { width: 60%; }
.doc-card .fold { position: absolute; right: 0; top: 0; width: 26px; height: 26px; background: linear-gradient(225deg, #EEF3FF 50%, #D8E2F5 50%); border-bottom-left-radius: 8px; }
.doc-card.word { transform: rotate(-9deg); animation: doc-a 4s ease-in-out infinite; }
.doc-card.pdf { transform: rotate(8deg); animation: doc-b 4s ease-in-out infinite; }
@keyframes doc-a { 0%, 100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-12px); } }
@keyframes doc-b { 0%, 100% { transform: rotate(8deg) translateY(-10px); } 50% { transform: rotate(4deg) translateY(4px); } }

.ill-talk { flex-direction: column; gap: 16px; }
.ill-talk .mic { position: relative; width: 92px; height: 92px; border-radius: 50%; background: var(--blue-grad); display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 30px rgba(31, 94, 245, .35); }
.ill-talk .mic svg { width: 44px; height: 44px; stroke-width: 2; position: relative; }
.ill-talk .ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #3B7BFF; animation: mic-ring 2s ease-out infinite; }
.ill-talk .ring.r2 { animation-delay: 1s; }
@keyframes mic-ring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.8); opacity: 0; } }
.ill-talk .bubbles { position: relative; display: flex; gap: 18px; }
.ill-talk .bub { width: 72px; height: 72px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(13, 27, 77, .12); animation: bub 3s ease-in-out infinite; }
.ill-talk .bub svg { width: 34px; height: 34px; stroke-width: 1.8; }
.ill-talk .bub:nth-child(2) { animation-delay: .4s; } .ill-talk .bub:nth-child(3) { animation-delay: .8s; }
@keyframes bub { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.ill-done .ob-robot { --s: min(60vw, 250px); height: calc(var(--s) * .92); }
.ill-done .bell { position: absolute; right: 8%; top: 4%; width: 70px; height: 70px; overflow: visible; }
.ill-done .bell-body { transform-box: view-box; transform-origin: 32px 8px; animation: bell 2.4s ease-in-out infinite; }
.ill-done .rays { animation: rb-spark 1.2s ease-in-out infinite; }
@keyframes bell { 0%, 50%, 100% { transform: rotate(0); } 10% { transform: rotate(16deg); } 20% { transform: rotate(-14deg); } 30% { transform: rotate(9deg); } 40% { transform: rotate(-5deg); } }
.ob-toggle { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 360px; background: #fff; border-radius: 20px; padding: 14px 16px; box-shadow: 0 10px 26px rgba(13, 27, 77, .1); font-weight: 600; font-size: 16px; text-align: left; }
.ob-toggle svg { width: 24px; height: 24px; flex: none; }
.ob-toggle span { flex: 1; }
.ob-switch { appearance: none; -webkit-appearance: none; width: 54px; height: 32px; border-radius: 999px; background: #D7DEEC; position: relative; flex: none; transition: background .25s; }
.ob-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.ob-switch:checked { background: #22C55E; }
.ob-switch:checked::after { transform: translateX(22px); }
.ob-switch:disabled { opacity: .5; }
.ob-note { color: var(--muted); font-size: 14px; max-width: 340px; margin: 10px auto 0; }

.ob-foot { position: relative; z-index: 2; padding: 10px 22px 14px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ob-next { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 64%; max-width: 290px; min-width: 220px; border: 0; border-radius: 999px; padding: 16px 22px; background: var(--blue-grad); color: #fff; font-size: 18px; font-weight: 600; box-shadow: 0 12px 28px rgba(31, 94, 245, .35); transition: transform .15s, background .3s; }
.ob-next svg { width: 22px; height: 22px; stroke-width: 2.2; transition: transform .2s; }
.ob-next:active { transform: scale(.97); }
.ob-next:active svg { transform: translateX(4px); }
.ob-next.go { background: var(--green-grad); box-shadow: 0 12px 28px rgba(22, 163, 74, .35); }
.ob-progress { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; min-height: 20px; }
.ob-dots { display: flex; gap: 8px; }
.ob-dots span { width: 8px; height: 8px; border-radius: 50%; background: #C9D5EE; transition: background .3s, transform .3s; }
.ob-dots span.on { background: var(--navy); transform: scale(1.25); }
.ob-count { position: absolute; right: 4px; font-size: 15px; color: #2A3A66; font-weight: 500; letter-spacing: .04em; }
@media (max-height: 700px) {
  .ob-h { font-size: 28px; } .s-meet .ob-h { font-size: 34px; } .ob-p { font-size: 16px; }
  .ob-art { min-height: 160px; } .ob-hello { height: 210px; } .ob-hello .ob-robot { height: 140px; --s: 124px; }
}

/* ================= Notes (feels like the Notes app) ================= */
.notes-view { position: relative; display: flex; flex-direction: column; padding: 18px 16px 0; }
.notes-head { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 4px 10px; }
.notes-head .page-title { font-size: 34px; }
.notes-search { display: flex; align-items: center; gap: 8px; background: #E9EEF8; border-radius: 12px; padding: 0 12px; margin-bottom: 8px; }
.notes-search svg { width: 18px; height: 18px; color: #7C88A6; flex: none; }
.notes-search input { flex: 1; border: 0; background: transparent; outline: none; padding: 10px 0; font-size: 16px; min-width: 0; }
.notes-list { flex: 1; padding-bottom: 12px; }
.notes-group { font-size: 20px; font-weight: 700; margin: 18px 4px 8px; color: var(--ink); }
.notes-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.note-row { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 12px 16px; position: relative; }
.note-row + .note-row::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); }
.note-row:active { background: #F1F5FD; }
.note-row b { display: block; font-size: 16.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-meta { display: flex; gap: 8px; align-items: center; font-size: 14.5px; color: var(--muted); margin-top: 2px; min-width: 0; }
.nr-date { flex: none; color: #3E4A6B; }
.nr-prev { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nr-tag { flex: none; display: inline-flex; align-items: center; gap: 3px; color: var(--navy); font-weight: 600; font-size: 13px; background: var(--gold-soft); border-radius: 999px; padding: 1px 8px 1px 5px; }
.nr-tag svg { width: 13px; height: 13px; stroke-width: 2.2; }
.notes-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; color: var(--muted); padding: 40px 18px; }
.notes-empty b { color: var(--ink); font-size: 18px; }
.ne-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--gold-soft); color: var(--navy); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.ne-icon svg { width: 30px; height: 30px; }
.notes-fabs { position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 12px 2px 16px; background: linear-gradient(rgba(244, 247, 254, 0), var(--paper) 40%); }
.fab { border: 0; display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; font-weight: 600; font-size: 16px; }
.fab.rec { background: #fff; color: var(--ink); padding: 13px 18px; box-shadow: 0 8px 22px rgba(13, 27, 77, .14); }
.fab-dot { width: 14px; height: 14px; border-radius: 50%; background: #F04438; box-shadow: 0 0 0 4px rgba(240, 68, 56, .18); }
.fab.compose { width: 54px; height: 54px; justify-content: center; background: var(--blue-grad); color: #fff; box-shadow: 0 10px 24px rgba(31, 94, 245, .35); }
.fab.compose svg { width: 24px; height: 24px; }

/* editor sheet */
.note-sheet { position: fixed; inset: 0; z-index: 55; background: #fff; display: flex; flex-direction: column; padding-top: var(--safe-top); transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.note-sheet.open { transform: none; }
.ns-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; min-height: 52px; }
.ns-link { display: inline-flex; align-items: center; gap: 2px; border: 0; background: transparent; color: var(--navy); font-size: 17px; padding: 8px; }
.ns-link svg { width: 24px; height: 24px; stroke-width: 2.2; }
.ns-link.strong { font-weight: 700; }
.ns-actions { display: flex; align-items: center; gap: 2px; }
.ns-icon { width: 42px; height: 42px; border: 0; background: transparent; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; }
.ns-menu { position: absolute; right: 12px; top: calc(52px + var(--safe-top)); z-index: 3; background: rgba(255, 255, 255, .97); backdrop-filter: blur(12px); border-radius: 14px; box-shadow: 0 16px 40px rgba(13, 27, 77, .2); overflow: hidden; min-width: 240px; animation: ob-in .15s ease; }
.ns-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 13px 16px; font-size: 16px; color: var(--ink); }
.ns-menu button + button { border-top: 1px solid var(--line); }
.ns-menu .danger { color: #D92D20; }
.ns-scroll { flex: 1; overflow-y: auto; padding: 0 20px 30px; -webkit-overflow-scrolling: touch; }
.ns-date { text-align: center; color: #8A93A8; font-size: 13px; margin: 2px 0 12px; }
.ns-title { width: 100%; border: 0; outline: none; font: 800 28px/1.2 var(--sans); color: var(--ink); padding: 0; margin-bottom: 8px; letter-spacing: -.01em; background: transparent; resize: none; overflow: hidden; display: block; }
.ns-title::placeholder { color: #B5BDD0; }
.ns-body { width: 100%; border: 0; outline: none; resize: none; font: 17px/1.55 var(--sans); color: #1E2640; padding: 0; min-height: 200px; background: transparent; overflow: hidden; }
.ns-body::placeholder { color: #B5BDD0; }
.ns-writeup { margin-top: 16px; background: #F6F9FF; border: 1px solid #E1E9FB; border-radius: 18px; padding: 16px; animation: ob-in .4s ease; }
.ns-writeup h4 { margin: 14px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--navy); }
.ns-writeup p { margin: 0; line-height: 1.5; }
.ns-writeup ul { margin: 0; padding-left: 20px; line-height: 1.5; }
.nw-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.nw-face { --s: 30px; }
.nw-working { display: flex; align-items: center; gap: 10px; color: var(--muted); font-style: italic; }
.nw-working .nw-face { --s: 40px; }
.nw-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.nw-item { display: flex; gap: 10px; align-items: flex-start; }
.nw-item small { display: block; color: var(--muted); font-size: 13px; }
.nw-box { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #9DB9F7; flex: none; margin-top: 2px; }
.nw-btn { display: block; width: 100%; margin-top: 12px; border: 1px solid #D3E1FF; background: #fff; color: var(--navy); border-radius: 12px; padding: 11px; font-weight: 600; font-size: 15px; }
.nw-btn.primary { background: var(--blue-grad); color: #fff; border: 0; }
.ns-transcript { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.ns-transcript summary { font-weight: 700; color: var(--ink); cursor: pointer; padding: 6px 0; }
.ns-transcript summary span { font-weight: 400; color: var(--muted); font-size: 14px; margin-left: 6px; }
#nsTranscript { color: #3E4A6B; font-size: 15px; line-height: 1.6; white-space: pre-wrap; }

.ns-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px calc(8px + var(--safe-bottom)); border-top: 1px solid var(--line); background: rgba(255, 255, 255, .96); }
.ns-tool { height: 44px; min-width: 44px; border: 0; background: transparent; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; font-weight: 600; }
.ns-tool svg { width: 24px; height: 24px; }
.ns-tool.rec { color: #F04438; }
.ns-tool.pill { background: var(--gold-soft); padding: 0 14px; }

.ns-recorder { border-top: 1px solid var(--line); background: #FBFCFF; padding: 12px 18px calc(14px + var(--safe-bottom)); animation: ns-up .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes ns-up { from { transform: translateY(100%); } }
.ns-rec-row { display: flex; align-items: center; gap: 8px; }
.ns-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #F04438; animation: rec-blink 1.2s ease-in-out infinite; }
@keyframes rec-blink { 50% { opacity: .25; } }
.ns-rec-time { font: 700 22px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.ns-rec-state { color: var(--muted); font-size: 14px; margin-left: auto; }
.ns-wave { width: 100%; height: 64px; display: block; margin: 8px 0 4px; }
.ns-live { color: #3E4A6B; font-size: 14px; min-height: 2.6em; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ns-rec-btns { display: flex; align-items: center; gap: 14px; }
.ns-round { width: 54px; height: 54px; border-radius: 50%; border: 0; background: #E9EEF8; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ns-round .i-play, .ns-round.paused .i-pause { display: none; }
.ns-round.paused .i-play { display: block; }
.ns-stop { flex: 1; height: 54px; border: 0; border-radius: 999px; background: #F04438; color: #fff; font-weight: 700; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 10px 24px rgba(240, 68, 56, .3); }
.ns-stop span { width: 14px; height: 14px; border-radius: 3px; background: #fff; }
.ns-stop:disabled { opacity: .6; }
.note-sheet.recording .ns-rec-dot { display: inline-block; }

/* ================= Home: quick-service cards ================= */
.home-view { padding: 18px 16px 110px; }
.home-view .home { gap: 14px; }
.home-view .hello span { font-size: 18px; font-weight: 500; color: var(--muted); }
.home-view .hello strong { font-size: 30px; line-height: 1.15; margin-top: 2px; }
.svc-title { margin: 8px 2px 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.svc { --c: #1F5EF5; --bg: #EAF1FF; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 0; background: #fff; border-radius: 20px; padding: 14px 14px 15px; box-shadow: var(--shadow); color: var(--ink); min-height: 118px; transition: transform .15s ease, box-shadow .2s ease; animation: svc-in .5s cubic-bezier(.2, .9, .3, 1.2) both; }
.svc:active { transform: scale(.97); }
.svc-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--bg); color: var(--c); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.svc-ic svg { width: 24px; height: 24px; stroke-width: 1.9; }
.svc b { font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.svc small { font-size: 13px; color: var(--muted); line-height: 1.3; }
.svc.c-blue { --c: #1F5EF5; --bg: #E7EFFF; }
.svc.c-indigo { --c: #4F46E5; --bg: #ECEBFF; }
.svc.c-red { --c: #E5352B; --bg: #FFECEA; }
.svc.c-teal { --c: #0E9488; --bg: #E2F6F3; }
.svc.c-purple { --c: #8B3FD9; --bg: #F3E8FF; }
.svc.c-navy { --c: #0D1B4D; --bg: #E6EAF5; }
.svc.c-orange { --c: #E8590C; --bg: #FFF0E3; }
.svc.c-green { --c: #16A34A; --bg: #E3F7EA; }
.svc.c-sky { --c: #0284C7; --bg: #E4F4FD; }
.svc.c-pink { --c: #DB2777; --bg: #FDE8F2; }
.svc:nth-child(2) { animation-delay: .03s; } .svc:nth-child(3) { animation-delay: .06s; } .svc:nth-child(4) { animation-delay: .09s; }
.svc:nth-child(5) { animation-delay: .12s; } .svc:nth-child(6) { animation-delay: .15s; } .svc:nth-child(7) { animation-delay: .18s; } .svc:nth-child(8) { animation-delay: .21s; }
.svc:nth-child(n+9) { animation-delay: .24s; }
@keyframes svc-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }

/* ================= Floating Chisom button ================= */
.chat-fab { position: fixed; right: 18px; bottom: calc(84px + max(4px, calc(var(--safe-bottom) - 20px))); z-index: 40; width: 66px; height: 66px; border: 0; border-radius: 50%; padding: 0; background: #fff; box-shadow: 0 12px 30px rgba(31, 94, 245, .35), 0 2px 6px rgba(13, 27, 77, .12); display: flex; align-items: center; justify-content: center; animation: fab-float 3.2s ease-in-out infinite; }
.chat-fab:active { transform: scale(.94); }
.fab-face { --s: 54px; }
.fab-ring { position: absolute; inset: -4px; border-radius: 50%; border: 3px solid rgba(59, 123, 255, .5); animation: fab-ring 2.6s ease-out infinite; pointer-events: none; }
.fab-hint { position: absolute; right: 76px; top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 12px; box-shadow: var(--shadow); animation: fab-hint 6s ease 1.2s both; pointer-events: none; }
.fab-hint::after { content: ''; position: absolute; right: -6px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-left-color: var(--ink); border-right: 0; }
@keyframes fab-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fab-ring { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
@keyframes fab-hint { 0% { opacity: 0; transform: translate(10px, -50%); } 8%, 85% { opacity: 1; transform: translate(0, -50%); } 100% { opacity: 0; transform: translate(0, -50%); visibility: hidden; } }
body.chat-open .chat-fab, body.ob-open .chat-fab { opacity: 0; pointer-events: none; transform: scale(.6); transition: opacity .2s, transform .2s; }

/* ================= Chat window ================= */
.chat-panel { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--paper); padding-top: var(--safe-top); transform-origin: calc(100% - 50px) calc(100% - 120px); transform: scale(.2); opacity: 0; border-radius: 40px; transition: transform .38s cubic-bezier(.2, .9, .25, 1), opacity .25s ease, border-radius .38s ease; }
.chat-panel.open { transform: none; opacity: 1; border-radius: 0; }
.cp-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; background: var(--blue-grad); color: #fff; border-bottom-right-radius: 28px 22px; box-shadow: 0 6px 20px rgba(31, 94, 245, .2); }
.cp-face { --s: 42px; background: #fff; border-radius: 50%; }
.cp-who { flex: 1; min-width: 0; line-height: 1.2; }
.cp-who b { display: block; font-size: 18px; }
.cp-who small { color: #D6E4FF; font-size: 13px; }
.cp-btn { width: 42px; height: 42px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .16); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.cp-btn svg { width: 22px; height: 22px; stroke-width: 2.2; }
.chat-panel .chat-scroll { flex: 1; }
.chat-panel .composer { padding-bottom: calc(10px + var(--safe-bottom)); }
.chat-panel .recorder { padding-bottom: calc(10px + var(--safe-bottom)); }
.chat-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8vh 18px 10px; color: var(--muted); animation: svc-in .5s ease both; }
.ce-face { --s: 92px; margin-bottom: 8px; }
.chat-empty h3 { margin: 4px 0; font-size: 24px; color: var(--ink); font-weight: 800; letter-spacing: -.01em; }
.chat-empty p { margin: 0 0 16px; max-width: 300px; }
.ce-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ce-chips .chip { border: 1px solid var(--gold-line); background: #fff; color: var(--ink); border-radius: 999px; padding: 9px 14px; font-size: 14px; box-shadow: var(--shadow); }
@media (min-width: 700px) {
  .chat-panel { inset: auto 24px 24px auto; width: 420px; height: min(720px, calc(100vh - 48px)); border-radius: 26px; overflow: hidden; box-shadow: 0 30px 80px rgba(13, 27, 77, .3); padding-top: 0; }
  .chat-panel.open { border-radius: 26px; }
  .chat-fab { bottom: 96px; }
}

/* ================= Onboarding voice step (morphing orb) ================= */
.onboard.voice .ob-next { display: none; }
.onboard.voice.typing .ob-next { display: inline-flex; }
.s-voice { justify-content: flex-start; }
.s-voice::before { flex: .5 1 0; }
.vc-status { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 7px 14px; border-radius: 999px; background: #fff; color: #2A3A66; font-size: 14px; font-weight: 600; box-shadow: 0 4px 14px rgba(31, 94, 245, .12); }
.vc-dot { width: 8px; height: 8px; border-radius: 50%; background: #9DB9F7; }
.vc-status.speaking .vc-dot { background: var(--navy); animation: rec-blink .8s ease-in-out infinite; }
.vc-status.listening .vc-dot { background: #22C55E; animation: rec-blink .6s ease-in-out infinite; }
.vc-status.thinking .vc-dot { background: #8B5CF6; animation: rec-blink 1.2s ease-in-out infinite; }

.vc-orb-wrap { position: relative; margin: 18px 0 14px; animation: rb-float 4s ease-in-out infinite; }
.vc-orb { --lvl: 0; position: relative; width: min(58vw, 240px); aspect-ratio: 1; transform: scale(calc(1 + var(--lvl) * .22)); filter: drop-shadow(0 26px 40px rgba(31, 94, 245, calc(.25 + var(--lvl) * .3))); }
.vc-orb > span { position: absolute; inset: 0; }
.vc-orb .o1 { border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%; background: radial-gradient(circle at 32% 28%, #F2F7FF 0%, #9CC2FF 30%, #3D7BFF 62%, #1A3FD1 100%); animation: orb-morph 8s ease-in-out infinite, spin 16s linear infinite; }
.vc-orb .o2 { border-radius: 58% 42% 44% 56% / 55% 60% 40% 45%; background: conic-gradient(from 90deg, rgba(110, 220, 255, 0), rgba(110, 220, 255, .85), rgba(160, 120, 255, .7), rgba(110, 220, 255, 0) 70%); filter: blur(16px); mix-blend-mode: screen; animation: orb-morph2 7s ease-in-out infinite, spin 6s linear infinite reverse; }
.vc-orb .o3 { inset: 14%; border-radius: 50% 40% 55% 45% / 45% 55% 45% 55%; background: radial-gradient(circle at 60% 60%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 62%); filter: blur(12px); mix-blend-mode: screen; animation: orb-morph 5s ease-in-out infinite reverse, orb-drift 7s ease-in-out infinite; }
.vc-orb .o4 { inset: 4%; border-radius: 48% 52% 40% 60% / 60% 42% 58% 40%; background: radial-gradient(circle at 75% 80%, rgba(56, 189, 248, .75), rgba(56, 189, 248, 0) 55%); mix-blend-mode: screen; animation: orb-morph2 9s ease-in-out infinite reverse, spin 11s linear infinite; }
.vc-orb .gloss { inset: 7% 24% 58% 22%; border-radius: 50%; background: radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%); }
.vc-orb.listening .o1 { animation-duration: 3.2s, 9s; }
.vc-orb.listening .o2 { animation-duration: 3s, 3.5s; }
.vc-orb.speaking .o1 { animation-duration: 4.5s, 10s; }
.vc-orb.speaking .o2 { animation-duration: 4s, 3s; }
.vc-orb.thinking .o1 { animation-duration: 6s, 3s; filter: saturate(.8); }
.vc-orb.thinking .o2 { animation-duration: 5s, 1.6s; }
@keyframes orb-morph { 0%, 100% { border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%; } 25% { border-radius: 55% 45% 40% 60% / 55% 40% 60% 45%; } 50% { border-radius: 40% 60% 55% 45% / 40% 60% 40% 60%; } 75% { border-radius: 60% 40% 45% 55% / 55% 45% 55% 45%; } }
@keyframes orb-morph2 { 0%, 100% { border-radius: 58% 42% 44% 56% / 55% 60% 40% 45%; } 33% { border-radius: 40% 60% 62% 38% / 45% 40% 60% 55%; } 66% { border-radius: 52% 48% 38% 62% / 62% 52% 48% 38%; } }
@keyframes orb-drift { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(8%, -6%); } 66% { transform: translate(-7%, 5%); } }

.vc-text { min-height: 96px; max-width: 340px; }
.vc-caption { margin: 0; font-size: 21px; line-height: 1.35; font-weight: 600; color: #0B1A4A; letter-spacing: -.01em; }
.vc-heard { margin: 10px 0 0; font-size: 15px; color: var(--muted); font-style: italic; }
.vc-confirm { width: 100%; max-width: 360px; margin-top: 10px; animation: svc-in .4s ease both; }
.vc-name { font-size: 30px; font-weight: 800; color: var(--navy); margin-bottom: 14px; letter-spacing: -.01em; }
.vc-btns { display: flex; flex-direction: column; gap: 10px; }
.vc-yes, .vc-no { border: 0; border-radius: 999px; padding: 14px; font-size: 16px; font-weight: 600; }
.vc-yes { background: var(--green-grad); color: #fff; box-shadow: 0 10px 24px rgba(22, 163, 74, .3); }
.vc-no { background: #fff; color: var(--navy); border: 1px solid #D5E2FF; }
.vc-type { width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: 8px; animation: svc-in .4s ease both; }
.vc-controls { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: auto; padding: 14px 0 4px; }
.vc-ctl { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: transparent; color: #2A3A66; font-size: 12px; font-weight: 600; }
.vc-ctl svg { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: #fff; color: var(--navy); box-shadow: 0 6px 16px rgba(31, 94, 245, .14); }
.vc-mic { position: relative; width: 74px; height: 74px; border-radius: 50%; border: 0; background: var(--blue-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 14px 30px rgba(31, 94, 245, .35); }
.vc-mic svg { width: 32px; height: 32px; stroke-width: 2; }
.vc-mic .i-stop { display: none; }
.vc-mic.live { background: linear-gradient(135deg, #34D06B, #16A34A); box-shadow: 0 14px 30px rgba(22, 163, 74, .35); }
.vc-mic.live .i-mic { display: none; }
.vc-mic.live .i-stop { display: block; }
.vc-mic.live::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid rgba(34, 197, 94, .5); animation: mic-ring 1.6s ease-out infinite; }
.onboard.typing .vc-controls { display: none; }
@media (max-height: 720px) { .vc-orb { width: min(44vw, 180px); } .vc-caption { font-size: 18px; } .vc-orb-wrap { margin: 10px 0 8px; } }

/* ================= Readability pass: bigger icons and small text ================= */
/* keep content and buttons clear of the floating Chisom button */
.view.scroll { padding-bottom: 110px; }
.notes-view { padding-bottom: 0; }
.notes-fabs { justify-content: flex-start; padding-right: 96px; }

/* base icon size */
svg { width: 24px; height: 24px; stroke-width: 2; }
.tab svg { width: 26px; height: 26px; }
.tab { font-size: 13.5px; }

/* note editor */
.ns-top { min-height: 56px; }
.ns-link { font-size: 18px; }
.ns-link svg { width: 28px; height: 28px; }
.ns-icon { width: 48px; height: 48px; }
.ns-icon svg { width: 28px; height: 28px; stroke-width: 2; }
.ns-tool { height: 48px; min-width: 48px; font-size: 16px; }
.ns-tool svg { width: 28px; height: 28px; stroke-width: 2; }
.ns-menu button { font-size: 17px; padding: 15px 18px; }
.ns-date { font-size: 14px; }
.notes-search svg { width: 21px; height: 21px; }
.notes-search input { font-size: 17px; }
.nr-tag { font-size: 13.5px; }
.nr-tag svg { width: 15px; height: 15px; }

/* chat */
.cp-btn { width: 46px; height: 46px; }
.cp-btn svg { width: 26px; height: 26px; }
.icon-btn svg { width: 26px; height: 26px; }
.round-btn svg { width: 27px; height: 27px; }
.msg .time { font-size: 12.5px; }
.speak-btn { font-size: 15px; }
.speak-btn svg { width: 20px; height: 20px; }
.file-card .speak-btn { font-size: 14.5px; }
.file-card .dl svg { width: 22px; height: 22px; }
.cal-btn svg { width: 22px; height: 22px; }
.cal-mini svg { width: 23px; height: 23px; }
.rc-text small { font-size: 14px; }

/* lists and settings */
.event .date span, .event-card .date span { font-size: 12.5px; }
.doc-row .fname small { font-size: 13.5px; }
.mem-cat { font-size: 13.5px; }
.eyebrow { font-size: 13px; }
.brand-text .eyebrow { font-size: 12px; }
.topbar .icon-btn.gear svg { width: 27px; height: 27px; }
.svc-ic svg { width: 26px; height: 26px; }
.svc small { font-size: 13.5px; }
.vc-ctl { font-size: 13.5px; }
.ob-skip svg { width: 20px; height: 20px; }
.copy-row code { font-size: 13.5px; }

/* meeting recording player in a note */
.ns-audio { background: #F6F9FF; border: 1px solid #E1E9FB; border-radius: 18px; padding: 12px 14px; margin: 0 0 14px; animation: ob-in .3s ease; }
.na-head { display: flex; align-items: center; gap: 10px; }
.na-ic { width: 40px; height: 40px; border-radius: 12px; background: #FFECEA; color: #E5352B; display: flex; align-items: center; justify-content: center; flex: none; }
.na-ic svg { width: 22px; height: 22px; }
.na-t { flex: 1; min-width: 0; line-height: 1.25; }
.na-t b { display: block; font-size: 16px; }
.na-t small { color: var(--muted); font-size: 14px; }
.na-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #D3E1FF; background: #fff; color: var(--navy); border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 15px; }
.na-btn svg { width: 20px; height: 20px; }
.na-load { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; border: 0; border-radius: 12px; padding: 12px; background: var(--blue-grad); color: #fff; font-weight: 600; font-size: 16px; }
.na-load svg { width: 20px; height: 20px; }
.na-load:disabled { opacity: .7; }
.na-audio { width: 100%; margin-top: 12px; }
.na-speed { display: flex; gap: 6px; margin-top: 8px; }
.na-speed button { flex: 1; border: 1px solid #D3E1FF; background: #fff; color: var(--navy); border-radius: 10px; padding: 7px 0; font-weight: 600; font-size: 14px; }
.na-speed button.on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* bottom nav: lifted a little with extra space underneath */
.tabbar { padding-bottom: max(14px, calc(var(--safe-bottom) - 6px)); }
.chat-fab { bottom: calc(84px + max(14px, calc(var(--safe-bottom) - 6px))); }

/* swipe to reply */
.msg-row, .msg.user { position: relative; touch-action: pan-y; }
.msg-row::before, .msg.user::before { content: ''; position: absolute; left: -38px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5EF5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h10.5A5.5 5.5 0 0 1 20 14.5v0A5.5 5.5 0 0 1 14.5 20H11'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 3px 10px rgba(31, 94, 245, .2); opacity: var(--swipe, 0); transform: scale(calc(.5 + var(--swipe, 0) * .5)); pointer-events: none; }
.msg.user::before { left: -40px; }
.swipe-ready::before { background-color: #EAF1FF; }
.reply-bar { display: flex; align-items: center; gap: 10px; margin: 0 16px 6px; padding: 8px 8px 8px 12px; background: #fff; border-radius: 14px; box-shadow: var(--shadow); border-left: 4px solid var(--navy); animation: ob-in .2s ease; }
.rb-body { flex: 1; min-width: 0; line-height: 1.3; }
.rb-body b { display: block; color: var(--navy); font-size: 14px; }
.rb-body span { display: block; color: var(--muted); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-x { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--paper); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.rb-x svg { width: 20px; height: 20px; }
.quote { display: block; margin: 0 0 6px; padding: 6px 10px; border-radius: 10px; border-left: 3px solid #fff; background: rgba(255, 255, 255, .18); font-size: 14px; line-height: 1.3; }
.quote b { display: block; font-size: 13px; opacity: .9; }
.quote span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; opacity: .92; }
.chat-scroll { overflow-x: hidden; }