* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --accent: #1e40af;
  --accent-soft: #eff6ff;
  --bot: #0d9488;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
}

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.view { height: 100%; }
.hidden { display: none !important; }

button {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
}
button:hover { filter: brightness(1.07); }
button.secondary {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

.error { color: #dc2626; font-size: 0.85rem; }

/* --- login --- */
#login-view { display: flex; align-items: center; justify-content: center; }

.login-card {
  background: var(--panel);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.login-card h1 { font-size: 1.25rem; text-align: center; }
.login-card label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.login-card input,
.login-card select {
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
}

/* --- app shell --- */
#app-view { display: flex; }

/* --- sidebar --- */
.sidebar {
  width: 264px;
  flex: 0 0 264px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem;
  font-weight: 700;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--border);
}

.sidebar-brand-icon {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 0.3rem;
  flex-shrink: 0;
}

.sidebar-actions {
  display: flex;
  gap: 0.5rem;
  margin: 0.75rem;
}
.sidebar-actions .new-chat { flex: 1; font-size: 1.09rem; }

.search-btn {
  flex: 0 0 auto;
  background: transparent;
  color: var(--muted);
  padding: 0.6rem 0.3rem;
  font-size: 1.26rem;
}
.search-btn:hover { filter: none; background: transparent; color: var(--text); }

.chat-list { flex: 1; overflow-y: auto; }

/* --- search panel (replaces the chat list while searching) --- */
.search-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.search-bar {
  display: flex;
  gap: 0.4rem;
  padding: 0 0.75rem 0.6rem;
}
.search-bar input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
}
.search-close {
  flex: 0 0 auto;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.4rem 0.6rem;
}
.search-close:hover { filter: none; background: var(--bg); }

.search-results { flex: 1; overflow-y: auto; }
.search-result {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  cursor: pointer;
}
.search-result:hover { background: var(--bg); border-left-color: var(--accent); }
.search-result-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.search-result-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-date {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: var(--muted);
}
.search-result-snippet {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.35;
  margin-top: 0.2rem;
}
.search-empty {
  padding: 1rem 0.85rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* --- notifications: bell badge + panel --- */
.notif-btn { position: relative; }
.notif-btn.has-notifs,
.notif-btn.has-notifs:hover { color: #dc2626; }

/* The red unread count, pinned to the bell's top-right corner. */
.notif-badge {
  position: absolute;
  top: 0.1rem;
  right: -0.05rem;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #dc2626;
  color: #fff;
  border-radius: 8px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* The panel reuses .search-panel for layout; only its header differs. */
.notif-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.75rem 0.6rem;
}
.notif-title { flex: 1; font-weight: 600; font-size: 0.9rem; }
.notif-mark-all {
  flex: 0 0 auto;
  background: transparent;
  color: var(--accent);
  padding: 0.3rem 0.4rem;
  font-size: 0.78rem;
}
.notif-mark-all:hover { filter: none; background: var(--bg); }
/* Unread notifications carry the accent edge; read ones (under "Previous
   notifications") drop it and dim until hovered. */
.notif-result { border-left-color: var(--accent); }
.notif-result.read { border-left-color: transparent; opacity: 0.6; }
.notif-result.read:hover { opacity: 1; }

/* "Previous notifications" heading, between the unread list and the read one. */
.notif-section {
  padding: 0.7rem 0.85rem 0.3rem;
  border-top: 1px solid var(--border);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.chat-item {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  cursor: pointer;
}
.chat-item:hover { background: var(--bg); }
.chat-item.active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.chat-item-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-item-time { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }

.chat-list-empty {
  padding: 1rem 0.85rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 0.6rem 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}
.logout { background: transparent; color: var(--muted); font-size: 0.8rem; padding: 0.3rem 0.5rem; }

.prompt-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: transparent;
  color: var(--muted);
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.prompt-btn:hover { background: var(--bg); color: var(--text); }
.prompt-icon { font-size: 0.95rem; color: var(--accent); }

/* Toggle between the active and archived chat lists, pinned below the list. */
.archive-toggle {
  flex: 0 0 auto;
  width: 100%;
  background: transparent;
  color: var(--muted);
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.archive-toggle:hover { filter: none; background: var(--bg); color: var(--text); }
.archive-toggle.viewing-archived {
  background: var(--accent-soft);
  color: var(--text);
}

/* --- view tabs (Chats / Calendar) --- */
.view-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem 0;
}
.view-tab {
  flex: 1;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
  border-radius: 8px;
}
.view-tab:hover { filter: none; background: var(--bg); color: var(--text); }
.view-tab.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

/* --- main --- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Both panes fill .main; only one is visible at a time. */
.pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* --- calendar pane --- */
#calendar-pane { padding: 1rem; background: var(--bg); }
/* The back-button header only appears on mobile, via the media query below. */
.calendar-bar { display: none; padding-bottom: 0.6rem; }
#calendar { flex: 1; min-height: 0; background: var(--panel); font-size: 0.85rem; }
/* FullCalendar inherits font-family from body which is fine; just tone down
   the default button styling so it matches the rest of the app. */
#calendar .fc-button {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border);
  text-transform: none;
  box-shadow: none;
}
#calendar .fc-button:hover { background: var(--bg); }
#calendar .fc-button-primary:not(:disabled).fc-button-active,
#calendar .fc-button-primary:not(:disabled):active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
#calendar .fc-event { cursor: pointer; }
/* Per-person colours, matching the chat bubbles: Matt green, Emily pink, joint
   events purple. The backend stores Google's nearest colorId on the event
   itself so Google Calendar shows the same hue, then maps it back to one of
   these three classes when feeding the frontend. */
.fc-event.event-matt {
  background-color: #059669;
  border-color: #059669;
}
.fc-event.event-emily {
  background-color: #db2777;
  border-color: #db2777;
}
.fc-event.event-both {
  background-color: #9333ea;
  border-color: #9333ea;
}

/* Matt / Emily / Both chip row in the event modal. */
.event-category {
  display: flex;
  gap: 0.4rem;
}
.event-category-chip {
  flex: 1;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.4rem 0.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
}
.event-category-chip:hover {
  filter: none;
  background: var(--bg);
  color: var(--text);
}
.event-category-chip.selected,
.event-category-chip.selected:hover {
  color: #fff;
  border-color: transparent;
  filter: none;
}
.event-category-chip[data-category="matt"].selected { background: #059669; }
.event-category-chip[data-category="emily"].selected { background: #db2777; }
.event-category-chip[data-category="both"].selected { background: #9333ea; }

/* Todo chips run ~15% larger than the calendar's so they read clearly in
   the composer/edit row sitting alongside body text. */
.event-category-chip[data-todo-cat],
.event-category-chip[data-edit-cat] {
  font-size: 0.98rem;
  padding: 0.46rem 0.7rem;
}

/* Todo composer + inline edit chips: same chip class, but go full-bleed in
   the per-person colour with black text so the chosen category really pops.
   Distinct from the calendar's selected chip (which has white text) without
   losing the colour code. */
.event-category-chip[data-todo-cat].selected,
.event-category-chip[data-edit-cat].selected,
.event-category-chip[data-todo-cat].selected:hover,
.event-category-chip[data-edit-cat].selected:hover {
  color: #000;
  filter: none;
}
.event-category-chip[data-todo-cat="matt"].selected,
.event-category-chip[data-edit-cat="matt"].selected {
  background: #059669;
  border-color: #059669;
}
.event-category-chip[data-todo-cat="emily"].selected,
.event-category-chip[data-edit-cat="emily"].selected {
  background: #db2777;
  border-color: #db2777;
}
.event-category-chip[data-todo-cat="both"].selected,
.event-category-chip[data-edit-cat="both"].selected {
  background: #9333ea;
  border-color: #9333ea;
}

.chat-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.chat-name { font-weight: 600; flex: 0 0 auto; }
.chat-dates {
  flex: 1;
  text-align: center;
  font-size: 0.74rem;
  color: var(--muted);
}
.share,
.archive-chat,
.delete-chat {
  flex: 0 0 auto;
  font-size: 0.85rem;
  padding: 0.4rem 0.8rem;
}
.archive-chat {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.archive-chat:hover { filter: none; background: var(--bg); color: var(--text); }
.delete-chat,
button.danger {
  background: #dc2626;
  color: #fff;
}
.back-btn {
  display: none;
  flex: 0 0 auto;
  background: transparent;
  color: var(--accent);
  font-size: 0.85rem;
  padding: 0.3rem 0.5rem;
}

.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.messages { flex: 1; overflow-y: auto; padding: 1rem; }
.thread {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.msg { max-width: 75%; display: flex; flex-direction: column; gap: 0.15rem; }
.msg .who { font-size: 0.72rem; color: var(--muted); padding: 0 0.3rem; }
.msg .bubble {
  padding: 0.55rem 0.8rem;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  overflow-wrap: anywhere;
}
.msg.mine { align-self: flex-end; align-items: flex-end; }
/* Per-sender bubble colour: Matt is green, Emily is pink — same for everyone
   so it's easy to scan who's talking at a glance. */
.msg.sender-matt .bubble {
  background: #059669; color: #fff; border-color: #059669;
}
.msg.sender-emily .bubble {
  background: #db2777; color: #fff; border-color: #db2777;
}
/* Gemini's replies aren't framed as a chat bubble: they span the thread
   width and sit on the page background as plain dark text. */
.msg.bot { max-width: 100%; align-self: stretch; }
.msg.bot .bubble {
  background: transparent;
  border-color: transparent;
  color: var(--text);
  padding: 0.2rem 0;
  border-radius: 0;
}

/* rendered markdown inside message bubbles */
.bubble > *:first-child { margin-top: 0; }
.bubble > *:last-child { margin-bottom: 0; }
.bubble p { margin: 0.4em 0; }
.bubble ul, .bubble ol { margin: 0.4em 0; padding-left: 1.4em; }
.bubble li { margin: 0.1em 0; }
.bubble h1, .bubble h2, .bubble h3, .bubble h4 {
  font-size: 1.05em;
  margin: 0.5em 0 0.3em;
}
.bubble a { color: inherit; text-decoration: underline; }
.bubble img { max-width: 100%; border-radius: 6px; }
.bubble blockquote {
  margin: 0.4em 0;
  padding-left: 0.6em;
  border-left: 3px solid rgba(128, 128, 128, 0.4);
}
.bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(0, 0, 0, 0.08);
  padding: 0.1em 0.3em;
  border-radius: 4px;
}
.bubble pre {
  margin: 0.4em 0;
  padding: 0.5em 0.7em;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  overflow-x: auto;
}
.bubble pre code { background: none; padding: 0; font-size: 0.85em; }

/* @-mentions: bold, colour-coded per person (Matt green, Emily pink) so a
   tag matches the tagged person's bubble colour at a glance. */
.bubble .mention { font-weight: 700; }
.bubble .mention-matt { color: #059669; }
.bubble .mention-emily { color: #db2777; }
/* Sender bubbles have coloured backgrounds with white text, so the deep
   green/pink go muddy there — use lighter tints that still read. */
.msg.sender-matt .bubble .mention-matt,
.msg.sender-emily .bubble .mention-matt { color: #a7f3d0; }
.msg.sender-matt .bubble .mention-emily,
.msg.sender-emily .bubble .mention-emily { color: #fbcfe8; }
/* Flash a message when a search result jumps to it (fallback when the exact
   matching text can't be located). */
.msg-highlight .bubble { animation: msg-flash 2s ease-out; }
@keyframes msg-flash {
  0%, 25% { box-shadow: 0 0 0 3px var(--accent); }
  100% { box-shadow: 0 0 0 3px transparent; }
}

/* The matched run of text a search result jumped to: a bright flash that
   settles into a subtle marker so it stays findable. */
.search-hit {
  border-radius: 3px;
  background: rgba(250, 204, 21, 0.4);
  animation: search-hit-flash 2s ease-out;
}
@keyframes search-hit-flash {
  0%, 15% { background: rgba(250, 204, 21, 0.95); }
  100% { background: rgba(250, 204, 21, 0.4); }
}

.msg.sender-matt .bubble code, .msg.sender-emily .bubble code,
.msg.sender-matt .bubble pre, .msg.sender-emily .bubble pre {
  background: rgba(255, 255, 255, 0.2);
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 1rem 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.composer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--panel);
  border-top: 1px solid var(--border);
}
.composer textarea {
  flex: 1;
  max-width: 620px;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.4;
  resize: none;
  overflow-y: hidden;
}

/* --- modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Above FullCalendar's internal popovers (z-index 9999) so clicks land
     on the modal instead of passing through to the calendar behind. */
  z-index: 10000;
}
.modal {
  background: var(--panel);
  padding: 1.5rem;
  border-radius: 12px;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.modal h2 { font-size: 1.1rem; }
.modal input,
.modal select,
.modal textarea {
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}
.modal textarea {
  resize: vertical;
  min-height: 200px;
  line-height: 1.4;
}
/* A labelled field inside a modal — small muted caption above its control. */
.modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.modal-help {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}
.modal-help.error { color: #dc2626; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; align-items: center; }
.modal-actions .spacer { flex: 1; }

/* Wider modal for content-heavy editors (the system prompt). */
.modal-large {
  width: min(720px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
}
.modal-large textarea {
  width: 100%;
  /* Fill the available height when the viewport allows it. */
  max-height: 60vh;
}

/* --- toast --- */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.toast-action {
  background: transparent;
  color: #93c5fd;
  border: none;
  padding: 0 0 0 0.6rem;
  margin-left: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.toast-action:hover { filter: none; color: #bfdbfe; }

/* --- todos --- */
#todos-pane { background: var(--bg); }

.todo-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Floating-card composer: sits clear of the dark list header above it,
   stays wider than the 720px todo rows below so it visually frames the
   list, but capped so it doesn't sprawl on a wide monitor. The narrow
   media query at the bottom tightens it on phones. */
.todo-composer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: calc(100% - 2rem);
  max-width: 880px;
  margin: 1rem auto 0;
  padding: 0.75rem 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.todo-composer input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
}
.todo-composer-chips { flex: 0 0 auto; }
.todo-composer-add {
  flex: 0 0 auto;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
}

.todo-scroller {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.85rem 1rem 1.5rem;
}

.todo-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 720px;
  margin: 0 auto;
}

.todo-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left-width: 8px;
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
}
/* Coloured left edge, mirroring the calendar / chat-bubble palette. */
.todo-row.cat-matt  { border-left-color: #059669; }
.todo-row.cat-emily { border-left-color: #db2777; }
.todo-row.cat-both  { border-left-color: #9333ea; }

.todo-check {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  cursor: pointer;
}

.todo-text {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.todo-row.done .todo-text {
  text-decoration: line-through;
  color: var(--muted);
}

.todo-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.1s;
}
.todo-row:hover .todo-actions,
.todo-row:focus-within .todo-actions { opacity: 1; }

.todo-icon-btn {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
}
.todo-icon-btn:hover { filter: none; background: var(--bg); color: var(--text); }
.todo-icon-btn.danger {
  background: transparent;
  color: var(--muted);
}
.todo-icon-btn.danger:hover { color: #dc2626; }

/* Inline edit: text replaced with input + chip row underneath. */
.todo-edit {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.todo-edit input {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
}

/* Done section: a collapsible group of completed todos at the bottom. */
.todo-done-section {
  max-width: 720px;
  margin: 1.25rem auto 0;
}
.todo-done-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 0.4rem 0.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.todo-done-toggle:hover { filter: none; background: transparent; color: var(--text); }
.todo-done-caret {
  display: inline-block;
  transition: transform 0.15s;
}
.todo-done-toggle.open .todo-done-caret { transform: rotate(90deg); }

.todo-done-rows { margin-top: 0.4rem; }

/* --- narrow screens: show either the chat list or one chat, not both --- */
@media (max-width: 640px) {
  .sidebar { flex: 1; width: auto; }
  /* Default to sidebar-only; chat-/calendar-/todos-open swap in the main pane. */
  .main { display: none; }
  #app-view.chat-open .main,
  #app-view.calendar-open .main,
  #app-view.todos-open .main { display: flex; }
  #app-view.chat-open .sidebar,
  #app-view.calendar-open .sidebar,
  #app-view.todos-open .sidebar { display: none; }
  .back-btn { display: inline-block; }
  .calendar-bar { display: flex; }
  /* The created/updated metadata wraps awkwardly on phones; drop it
     so the chat name and Share button get the room. */
  .chat-dates { display: none; }
  .chat-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Tighter composer on phones — full screen width with a smaller gutter. */
  .todo-composer {
    width: calc(100% - 1rem);
    margin: 0.5rem auto 0;
    padding: 0.6rem 0.75rem;
  }
}