/* nelly-view.css — Nelly (email/communications) view, on the olly-ui design system.
 *
 * Loaded after olly-ui/tokens.css + components.css. The legacy .nelly-* rules in
 * styles.css were migrated onto var(--olly-*) tokens in place (P1 of the Nelly
 * layout overhaul); this file holds the supplementary token the base system lacks
 * plus the restructured inbox layout (filter cards, KPI row, detail drawer).
 *
 * Rule: no hardcoded hex. Everything resolves through olly-ui tokens.
 */

:root {
  /* Red tint fill (priority rows, failed/error badges). The base token set ships
     info/good/warn/purple tints but no "bad" tint — supply it here rather than
     editing the externally-synced tokens.css. */
  --olly-tint-bad: #fee2e2;
}

/* Base typography for the whole Nelly view, matching Olly/Calls. */
#view-nelly {
  font-family: var(--olly-font-sans);
  color: var(--olly-ink);
  background: var(--olly-bg);
}

/* ============================================================================
   P2 — Inbox layout restructure + slide-over detail drawer
   ========================================================================== */

/* ---- Inbox header ---- */
.nelly-inbox-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--olly-sp-3) var(--olly-sp-4) var(--olly-sp-1);
}
.nelly-inbox-title {
  margin: 0; font-size: var(--olly-fs-lg); font-weight: var(--olly-fw-bold);
  color: var(--olly-ink); flex: 1;
}
.nelly-view-select {
  appearance: none; -webkit-appearance: none;
  background: var(--olly-bg); border: 1px solid var(--olly-line-2);
  border-radius: var(--olly-r-pill); padding: 5px 26px 5px 12px;
  font: inherit; font-size: var(--olly-fs-sm); font-weight: var(--olly-fw-medium);
  color: var(--olly-ink); cursor: pointer; margin-right: var(--olly-sp-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}

/* ---- Inbox section fills the view; only the feed scrolls ---- */
#nelly-section-inbox.active-nelly-section {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
#nelly-section-inbox #nelly-inbox-list {
  flex: 1; min-height: 0; overflow-y: auto; max-height: none;
  -webkit-overflow-scrolling: touch;
}

/* ---- Hide the exposed email sub-nav; its sections live in the Nelly tab dropdown ---- */
#view-nelly .nelly-subnav { display: none; }

/* ---- Nelly-tab dropdown: 9 section cards must WRAP into a grid, not overflow a single
   row. The shared .sub-nav uses `overflow-x:auto; justify-content:center`, which on mobile
   centered the overflowing row and pushed the left cards (Inbox/Search/Compose) off-screen
   and out of reach. A responsive auto-fill grid keeps every card visible and tappable. ---- */
#tab-dropdown-tasks.sub-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--olly-sp-2);
  overflow-x: visible;
  justify-content: stretch;
}
#tab-dropdown-tasks .sub-nav-card {
  min-width: 0;            /* let the grid size the columns (was min-width:90px → overflow) */
  padding: var(--olly-sp-3) var(--olly-sp-2);
}

/* ---- Channel filter cards (container + card) ---- */
.nelly-type-cards {
  display: flex; gap: var(--olly-sp-2);
  padding: var(--olly-sp-1) var(--olly-sp-4) var(--olly-sp-2);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.nelly-type-cards:empty { display: none; }
.nelly-type-card {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 72px; padding: var(--olly-sp-2) var(--olly-sp-3);
  background: var(--olly-surface);
  border: 1px solid var(--olly-line-2);
  border-radius: var(--olly-r-md);
  color: var(--olly-muted);
  cursor: pointer; user-select: none;
  transition: border-color .15s, background .15s, color .15s;
}
.nelly-type-card:active { background: var(--olly-bg); }
.nelly-type-card.active {
  border-color: var(--olly-ink); background: var(--olly-ink); color: var(--olly-surface);
}
.nelly-type-card[aria-disabled="true"] { opacity: .45; cursor: default; }
.nelly-type-card .material-icons-outlined { font-size: 1.15rem; }
.nelly-type-card-label { font-size: var(--olly-fs-2xs); font-weight: var(--olly-fw-semibold); }
.nelly-type-card-count { font-size: var(--olly-fs-xs); font-weight: var(--olly-fw-bold); }

/* ---- Email detail = slide-over drawer (mirrors the Calls drill-in drawer) ---- */
#nelly-drawer {
  position: fixed; inset: 0; z-index: 1000;
  pointer-events: none; visibility: hidden;
}
#nelly-drawer.is-open { pointer-events: auto; visibility: visible; }
#nelly-drawer .olly-drawer__scrim {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4);
  opacity: 0; transition: opacity .18s ease;
}
#nelly-drawer.is-open .olly-drawer__scrim { opacity: 1; }
#nelly-drawer .olly-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 560px;
  display: flex; flex-direction: column;
  background: var(--olly-surface);
  box-shadow: var(--olly-shadow-3);
  transform: translateX(100%); transition: transform .22s ease;
}
#nelly-drawer.is-open .olly-drawer__panel { transform: translateX(0); }
.nelly-drawer__head {
  display: flex; align-items: center; gap: var(--olly-sp-2);
  padding: var(--olly-sp-3) var(--olly-sp-4);
  padding-top: calc(var(--olly-sp-3) + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--olly-line);
}
.nelly-drawer__foot {
  display: flex;
  justify-content: flex-end;
  padding: var(--olly-sp-3) var(--olly-sp-4);
  padding-bottom: calc(var(--olly-sp-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--olly-line);
}
.nelly-drawer__head .olly-drawer__title {
  flex: 1; min-width: 0; margin: 0;
  font-size: var(--olly-fs-lg); font-weight: var(--olly-fw-semibold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#nelly-drawer .nelly-detail-body {
  flex: 1; min-height: 0; overflow-y: auto; max-height: none;
  padding: var(--olly-sp-4);
  padding-bottom: calc(var(--olly-sp-4) + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}

/* ---- Bottom-sheet action menu (long-press "teach a rule"; reusable) ---- */
.nelly-sheet { position: fixed; inset: 0; z-index: 1100; }
.nelly-sheet__scrim {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4);
  opacity: 0; transition: opacity .18s ease;
}
.nelly-sheet.is-open .nelly-sheet__scrim { opacity: 1; }
.nelly-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--olly-surface);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--olly-shadow-3);
  padding: var(--olly-sp-2) var(--olly-sp-3)
           calc(var(--olly-sp-3) + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform .22s ease;
}
.nelly-sheet.is-open .nelly-sheet__panel { transform: translateY(0); }
.nelly-sheet__title {
  padding: var(--olly-sp-3) var(--olly-sp-3) var(--olly-sp-2);
  font-size: var(--olly-fs-xs); font-weight: var(--olly-fw-semibold);
  color: var(--olly-muted); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nelly-sheet__item {
  display: flex; align-items: center; gap: var(--olly-sp-3);
  width: 100%; border: none; background: none; cursor: pointer;
  padding: var(--olly-sp-3) var(--olly-sp-3);
  border-radius: var(--olly-r-sm);
  font-size: var(--olly-fs-md); font-weight: var(--olly-fw-medium);
  color: var(--olly-ink); text-align: left;
}
.nelly-sheet__item:active { background: var(--olly-bg); }
.nelly-sheet__item.is-danger { color: var(--olly-bad); }
.nelly-sheet__cancel {
  justify-content: center; margin-top: var(--olly-sp-1);
  color: var(--olly-muted); font-weight: var(--olly-fw-semibold);
  border-top: 1px solid var(--olly-line);
}

/* ---- Chat rows (SMS/WhatsApp): progressive disclosure ---- */
#view-nelly .nelly-email-row { flex-wrap: wrap; }
.nelly-chat-row { align-items: center; }
.nelly-chat-row[data-expand="0"] { padding-top: var(--olly-sp-2); padding-bottom: var(--olly-sp-2); }
.nelly-chat-more {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: none; background: none;
  color: var(--olly-muted-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--olly-r-sm);
}
.nelly-chat-more:active { background: var(--olly-bg); }
.nelly-chat-more .material-icons-outlined { font-size: 1.25rem; }

/* Collapsed: one-line preview. Expanded: full message as an incoming chat bubble. */
.nelly-chat-preview {
  font-size: var(--olly-fs-xs); color: var(--olly-muted-2); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nelly-chat-bubble-in {
  display: none;
  margin-top: 4px; padding: var(--olly-sp-2) var(--olly-sp-3);
  background: var(--olly-surface); border: 1px solid var(--olly-line-2);
  border-radius: 4px 14px 14px 14px;
  font-size: var(--olly-fs-md); color: var(--olly-ink); line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
}
/* State machine: 0 collapsed · 1 message · 2 message + quick buttons */
.nelly-chat-row .nelly-quick-actions { display: none; }
.nelly-chat-row[data-expand="1"] .nelly-chat-preview,
.nelly-chat-row[data-expand="2"] .nelly-chat-preview { display: none; }
.nelly-chat-row[data-expand="1"] .nelly-chat-bubble-in,
.nelly-chat-row[data-expand="2"] .nelly-chat-bubble-in { display: block; }
.nelly-chat-row[data-expand="2"] .nelly-quick-actions { display: flex; }

.nelly-quick-actions {
  flex: 0 0 100%;
  display: flex; gap: var(--olly-sp-2);
  margin-top: var(--olly-sp-2); padding-left: 44px;  /* align past the 3-dots opener */
}
.nelly-qa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto;
  border: 1px solid var(--olly-line-2); border-radius: var(--olly-r-sm);
  background: var(--olly-surface); color: var(--olly-muted); cursor: pointer;
}
.nelly-qa:active { background: var(--olly-bg); }
.nelly-qa .material-icons-outlined { font-size: 1.15rem; }

/* Quick-reply sheet extras (composer / mic / emoji) */
.nelly-quick-textarea { width: 100%; box-sizing: border-box; margin: var(--olly-sp-2) 0 0; }
.nelly-quick-mic {
  margin-top: var(--olly-sp-2); display: inline-flex; align-items: center; gap: 4px;
}
.nelly-quick-mic.is-recording { color: var(--olly-bad); font-weight: var(--olly-fw-semibold); }
.nelly-emoji-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--olly-sp-2);
  padding: var(--olly-sp-2) var(--olly-sp-2) var(--olly-sp-3);
}
.nelly-emoji-btn {
  font-size: 1.7rem; border: none; background: none; cursor: pointer;
  padding: var(--olly-sp-2); border-radius: var(--olly-r-sm); line-height: 1;
}
.nelly-emoji-btn:active { background: var(--olly-bg); }

/* ============================================================================
   Sleek unified chat-reply sheet (SMS/WhatsApp) — modern messenger composer
   ========================================================================== */
.nelly-chatbox { position: fixed; inset: 0; z-index: 1100; }
.nelly-chatbox__scrim {
  position: absolute; inset: 0; background: rgba(15, 23, 42, 0.34);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .2s ease;
}
.nelly-chatbox.is-open .nelly-chatbox__scrim { opacity: 1; }
.nelly-chatbox__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; max-height: 88vh;
  background: var(--olly-surface);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -12px 44px rgba(0, 0, 0, 0.20);
  transform: translateY(100%); transition: transform .28s cubic-bezier(.22, 1, .36, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nelly-chatbox.is-open .nelly-chatbox__panel { transform: translateY(0); }
.nelly-chatbox__grip {
  flex: 0 0 auto; width: 38px; height: 4px; margin: 8px auto 2px;
  border-radius: 999px; background: var(--olly-line-3);
}
.nelly-chatbox__head { display: flex; align-items: center; gap: 8px; padding: 6px 16px 10px; }
.nelly-chatbox__peer {
  flex: 1; min-width: 0; font-weight: var(--olly-fw-semibold); font-size: var(--olly-fs-md);
  color: var(--olly-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nelly-chatbox__close {
  flex: 0 0 auto; border: none; background: none; color: var(--olly-muted-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 4px; border-radius: 50%;
}
.nelly-chatbox__close:active { background: var(--olly-bg); }
.nelly-chatbox__thread {
  flex: 1 1 auto; min-height: 40px; max-height: 40vh; overflow-y: auto;
  padding: 2px 16px 10px; -webkit-overflow-scrolling: touch;
}
.nelly-cb-bubble.in {
  display: inline-block; max-width: 88%;
  background: var(--olly-bg); border: 1px solid var(--olly-line-2);
  border-radius: 4px 16px 16px 16px; padding: 10px 14px;
  font-size: var(--olly-fs-md); line-height: 1.45; color: var(--olly-ink);
  white-space: pre-wrap; word-break: break-word;
}
/* AI smart-reply chips */
.nelly-chatbox__chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 6px 16px 8px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.nelly-chatbox__chips::-webkit-scrollbar { display: none; }
.nelly-cb-chip {
  flex: 0 0 auto; max-width: 78vw;
  background: var(--olly-tint-info); color: var(--olly-info);
  border: none; border-radius: 999px; padding: 9px 15px;
  font-size: var(--olly-fs-sm); font-weight: var(--olly-fw-medium); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform .1s ease;
}
.nelly-cb-chip:active { transform: scale(.96); }
.nelly-cb-chips-loading { font-size: var(--olly-fs-xs); color: var(--olly-muted-2); padding: 9px 2px; }
/* Emoji strip (toggled) */
.nelly-chatbox__emoji {
  display: flex; gap: 2px; overflow-x: auto; padding: 2px 12px 8px; scrollbar-width: none;
}
.nelly-chatbox__emoji[hidden] { display: none; }
.nelly-chatbox__emoji::-webkit-scrollbar { display: none; }
.nelly-cb-emoji-btn {
  flex: 0 0 auto; font-size: 1.65rem; border: none; background: none; cursor: pointer;
  padding: 4px 7px; border-radius: 10px; line-height: 1;
}
.nelly-cb-emoji-btn:active { background: var(--olly-bg); }
/* Docked composer bar */
.nelly-chatbox__bar {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: 6px;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--olly-line);
}
.nelly-cb-iconbtn {
  flex: 0 0 auto; width: 40px; height: 40px; border: none; background: none; cursor: pointer;
  color: var(--olly-muted-2); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
}
.nelly-cb-iconbtn:active { background: var(--olly-bg); }
.nelly-cb-input {
  flex: 1 1 auto; min-width: 0; resize: none; max-height: 120px; overflow-y: auto;
  background: var(--olly-bg); border: 1px solid var(--olly-line-2); border-radius: 20px;
  padding: 9px 14px; font: inherit; font-size: var(--olly-fs-md); line-height: 1.35;
  color: var(--olly-ink); outline: none;
}
.nelly-cb-input:focus { border-color: var(--olly-info); }
.nelly-cb-send {
  flex: 0 0 auto; width: 42px; height: 42px; border: none; border-radius: 50%;
  background: var(--olly-ink); color: var(--olly-surface); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .1s ease;
}
.nelly-cb-send:active { transform: scale(.92); }
.nelly-cb-send.is-send { background: var(--olly-info); }
.nelly-cb-send.is-listening { background: var(--olly-bad); animation: nellyCbPulse 1.3s ease-in-out infinite; }
@keyframes nellyCbPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.45); }
  50% { box-shadow: 0 0 0 9px rgba(229, 62, 62, 0); }
}

/* One-tap-send undo toast */
.nelly-undo-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 1200;
  display: flex; align-items: center; gap: var(--olly-sp-3);
  background: var(--olly-ink); color: var(--olly-surface);
  border-radius: var(--olly-r-pill); padding: 10px 16px;
  box-shadow: var(--olly-shadow-3); font-size: var(--olly-fs-sm); max-width: 90vw;
}
.nelly-undo-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nelly-undo-btn {
  background: none; border: none; color: #7db6ff;
  font-weight: var(--olly-fw-bold); cursor: pointer; flex: 0 0 auto;
}

/* ---- Planner cards on the design system (reminders / tasks / events) ---- */
.planner-card {
  display: flex; align-items: flex-start; gap: var(--olly-sp-2);
  padding: var(--olly-sp-3); margin-bottom: var(--olly-sp-2);
  background: var(--olly-surface); border: 1px solid var(--olly-line-2);
  border-radius: var(--olly-r-md); box-shadow: var(--olly-shadow-1);
  cursor: pointer; font-family: var(--olly-font-sans);
}
.planner-card.p-urgent { border-left: 3px solid var(--olly-bad); }
.planner-card.p-high { border-left: 3px solid var(--olly-warn); }
.planner-card__body { flex: 1; min-width: 0; }
.planner-card__title {
  font-weight: var(--olly-fw-semibold); font-size: var(--olly-fs-md); color: var(--olly-ink);
  line-height: 1.35;
}
.planner-card.is-done .planner-card__title { text-decoration: line-through; opacity: .55; }
.planner-card__kind { font-size: .95rem; vertical-align: -2px; opacity: .5; }
.planner-card__note { font-size: var(--olly-fs-xs); color: var(--olly-muted-2); margin-top: 2px; }
.planner-card__when { font-size: var(--olly-fs-2xs); color: var(--olly-muted); margin-top: 3px; }
.planner-card__when.is-overdue { color: var(--olly-bad); font-weight: var(--olly-fw-semibold); }
.planner-card .planner-lead { color: var(--olly-good); }
.planner-card .planner-reopen { color: var(--olly-info); }
.planner-card .planner-snooze, .planner-card .planner-del, .planner-card .planner-edit { color: var(--olly-muted-2); }
.planner-card .icon-btn .material-icons-outlined { font-size: 1.05rem; }

/* ---- Provenance chip: jump back to the email/SMS/calendar that created the item ---- */
.planner-source {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  padding: 3px 9px; border: 1px solid var(--olly-border, #e5e7eb); border-radius: var(--olly-r-pill);
  background: transparent; color: var(--olly-muted, #6b7280);
  font-size: var(--olly-fs-2xs); font-weight: var(--olly-fw-semibold); cursor: pointer;
}
.planner-source:hover { color: var(--olly-info); border-color: var(--olly-info); }
.planner-source:active { opacity: .85; }

/* ---- Smart-action buttons on planner items (Call / Research / Join) ---- */
.smart-action-btn {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  padding: 6px 12px; border: none; border-radius: var(--olly-r-pill);
  font-size: var(--olly-fs-sm); font-weight: var(--olly-fw-semibold);
  color: var(--olly-surface); background: var(--olly-info); cursor: pointer;
}
.smart-action-btn .material-icons-outlined { font-size: 1rem; }
.smart-action-btn:active { opacity: .85; }
.smart-action-btn.call { background: var(--olly-good); }
.smart-action-btn.research { background: var(--olly-purple); }
.smart-action-btn.join { background: var(--olly-info); }
.nelly-research-body {
  padding: var(--olly-sp-3) var(--olly-sp-4) var(--olly-sp-2);
  max-height: 52vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.nelly-research-reply {
  font-size: var(--olly-fs-md); line-height: 1.5; color: var(--olly-ink); white-space: pre-wrap;
}

/* ---- Threaded conversation view (drawer): bubbles + inline composer ---- */
.nelly-conv { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 10px; }
.nelly-tmsg { max-width: 82%; display: flex; flex-direction: column; }
.nelly-tmsg.in { align-self: flex-start; align-items: flex-start; }
.nelly-tmsg.out { align-self: flex-end; align-items: flex-end; }
.nelly-tmsg-who { font-size: var(--olly-fs-2xs); color: var(--olly-muted-2); margin: 0 6px 2px; }
.nelly-tmsg-bubble {
  padding: 8px 12px; border-radius: 14px; font-size: var(--olly-fs-md); line-height: 1.4;
  white-space: pre-wrap; word-break: break-word;
}
.nelly-tmsg.in .nelly-tmsg-bubble {
  background: var(--olly-bg); border: 1px solid var(--olly-line-2); color: var(--olly-ink);
  border-bottom-left-radius: 4px;
}
.nelly-tmsg.out .nelly-tmsg-bubble {
  background: var(--olly-info); color: var(--olly-surface); border-bottom-right-radius: 4px;
}
.nelly-tmsg-time { font-size: 10px; color: var(--olly-faint); margin: 2px 6px 0; }
/* Delivery/read tick on outbound bubbles (✓ sent, ✓✓ delivered, blue ✓✓ read, red error). */
.nelly-tick { display: inline-flex; vertical-align: middle; margin-left: 2px; }
.nelly-tick .material-icons { font-size: 13px; line-height: 1; color: var(--olly-faint); }
.nelly-tick.read .material-icons { color: var(--olly-info); }
.nelly-tick.err .material-icons { color: var(--olly-danger, #e5484d); }
.nelly-conv-composer {
  position: sticky; bottom: 0; display: flex; align-items: flex-end; gap: 6px;
  padding: 8px 0 calc(4px + env(safe-area-inset-bottom, 0px));
  background: var(--olly-surface); border-top: 1px solid var(--olly-line);
}
.nelly-thread-history {
  margin-bottom: 10px; border: 1px solid var(--olly-line-2); border-radius: var(--olly-r-md); padding: 6px 10px;
}
.nelly-thread-history summary {
  cursor: pointer; font-size: var(--olly-fs-sm); color: var(--olly-info); font-weight: var(--olly-fw-semibold);
}

/* ── MMS media inside chat bubbles (native-SMS parity) ─────────────────────── */
.nelly-tmsg-media { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.nelly-tmsg.out .nelly-tmsg-media { align-items: flex-end; }
.nelly-media { max-width: 240px; border-radius: 14px; overflow: hidden; }
/* Image */
.nelly-media-image { cursor: pointer; line-height: 0; background: var(--olly-bg); }
.nelly-media-image img {
  display: block; max-width: 240px; max-height: 320px; width: auto; height: auto; object-fit: cover;
}
/* Video poster tile */
.nelly-media-video {
  position: relative; width: 240px; height: 160px; cursor: pointer;
  background: #000 center/cover no-repeat; display: flex; align-items: center; justify-content: center;
}
.nelly-media-play { color: #fff; font-size: 54px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.nelly-media-dur, .nelly-audio-dur {
  position: absolute; right: 8px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff;
  font-size: 11px; padding: 1px 6px; border-radius: 8px;
}
.nelly-media-audio { position: relative; }
.nelly-audio-dur { position: static; background: none; color: var(--olly-faint); padding: 0; }
/* Audio (voice note) row */
.nelly-media-audio {
  display: flex; align-items: center; gap: 8px; max-width: 260px;
  padding: 6px 10px; border-radius: 18px;
  background: var(--olly-bg); border: 1px solid var(--olly-line-2);
}
.nelly-tmsg.out .nelly-media-audio { background: var(--olly-tint-info, var(--olly-bg)); }
.nelly-audio-icon { color: var(--olly-info); flex: 0 0 auto; }
.nelly-media-audio audio { height: 34px; max-width: 190px; flex: 1 1 auto; }
/* vCard contact card */
.nelly-vcard {
  display: flex; align-items: center; gap: 10px; max-width: 260px;
  padding: 10px 12px; border-radius: 14px;
  background: var(--olly-surface); border: 1px solid var(--olly-line-2);
}
.nelly-vcard-avatar { font-size: 34px; color: var(--olly-muted-2); flex: 0 0 auto; }
.nelly-vcard-body { flex: 1 1 auto; min-width: 0; }
.nelly-vcard-name { font-weight: var(--olly-fw-semibold); font-size: var(--olly-fs-md); color: var(--olly-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nelly-vcard-num { font-size: var(--olly-fs-xs); color: var(--olly-muted-2); }
.nelly-vcard-add {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--olly-fs-2xs); color: var(--olly-info); text-decoration: none; font-weight: var(--olly-fw-semibold);
}
.nelly-vcard-add .material-icons-outlined { font-size: 1rem; }
/* Location map-pin card */
.nelly-location {
  display: flex; align-items: center; gap: 10px; max-width: 260px;
  padding: 10px 12px; border-radius: 14px; text-decoration: none;
  background: var(--olly-surface); border: 1px solid var(--olly-line-2);
}
.nelly-location-pin { color: var(--olly-bad); font-size: 30px; flex: 0 0 auto; }
.nelly-location-title { font-weight: var(--olly-fw-semibold); font-size: var(--olly-fs-md); color: var(--olly-ink); }
.nelly-location-coord { font-size: var(--olly-fs-xs); color: var(--olly-muted-2); }
/* Generic file link inside a bubble (reuses .nelly-attachment-link look) */
.nelly-media-file { max-width: 260px; margin-bottom: 0; }

/* ── Full-screen media lightbox ────────────────────────────────────────────── */
.nelly-lightbox {
  position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.9);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.nelly-lightbox-media { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.nelly-lightbox-close {
  position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 14px;
  width: 42px; height: 42px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.15); color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.nelly-lightbox-close .material-icons { font-size: 26px; }

/* ── Composer: pending-attachment tray + chips ─────────────────────────────── */
.nelly-attach-tray { display: none; }
.nelly-attach-tray.has-items {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 2px 0;
}
.nelly-attach-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 200px;
  padding: 4px 6px 4px 4px; border-radius: 10px;
  background: var(--olly-bg); border: 1px solid var(--olly-line-2);
}
.nelly-attach-chip.is-uploading { opacity: .7; }
.nelly-chip-thumb { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.nelly-chip-icon { font-size: 20px; color: var(--olly-muted-2); flex: 0 0 auto; }
.nelly-chip-name {
  font-size: var(--olly-fs-xs); color: var(--olly-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px;
}
.nelly-chip-x {
  border: none; background: none; cursor: pointer; padding: 0; flex: 0 0 auto;
  color: var(--olly-muted-2); display: inline-flex; align-items: center;
}
.nelly-chip-x .material-icons-outlined { font-size: 16px; }
.nelly-chip-spin {
  width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid var(--olly-line-2); border-top-color: var(--olly-info);
  animation: nellyChipSpin .7s linear infinite;
}
@keyframes nellyChipSpin { to { transform: rotate(360deg); } }
/* Mic button recording pulse */
.nelly-cb-mic.is-recording { color: var(--olly-bad); animation: nellyCbPulse 1.3s ease-in-out infinite; }

/* WhatsApp-group inbox row: small group glyph next to the conversation title, and an
   unread-style count pill under the timestamp (mirrors WhatsApp's own inbox chip). */
.nelly-group-icon {
  font-size: 0.85rem !important; vertical-align: -1px; margin-left: 4px;
  color: var(--olly-text-3, #94a3b8);
}
.nelly-thread-count {
  display: block; margin-top: 4px; margin-left: auto; width: fit-content;
  min-width: 18px; text-align: center; border-radius: 999px;
  background: #25d366; color: #fff; font-size: 0.68rem; font-weight: 700;
  padding: 1px 6px; line-height: 1.4;
}

/* ── Pattern linking: inbox pill + drawer "part of a pattern" section ───────────────── */
.nelly-pattern-count {
  display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; margin-left: auto;
  width: fit-content; border-radius: 999px; background: var(--olly-tint-info, #eef2ff);
  color: var(--olly-info, #4f46e5); font-size: 0.66rem; font-weight: 700; padding: 1px 6px 1px 4px;
  line-height: 1.4;
}
.nelly-pattern-count .material-icons-outlined { font-size: 0.82rem; }
.nelly-pattern-block > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 600; color: var(--olly-muted); margin-bottom: 6px;
}
.nelly-pattern-block > summary::-webkit-details-marker { display: none; }
.nelly-pattern-block > summary .material-icons-outlined { font-size: 1rem; color: var(--olly-info, #4f46e5); }
.nelly-pattern-meta { font-weight: 500; color: var(--olly-muted); opacity: 0.8; }
.nelly-related-item {
  display: flex; align-items: baseline; gap: 8px; cursor: pointer; padding: 6px 0;
}
.nelly-related-item:hover { color: var(--olly-info, #4f46e5); }
.nelly-related-from { font-weight: 600; flex: 0 0 auto; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nelly-related-subj { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nelly-related-time { flex: 0 0 auto; font-size: 0.72rem; opacity: 0.7; }

/* ── WhatsApp-style bubble thread (grouped conversation detail) ───────────────────── */
.nelly-thread { display: flex; flex-direction: column; gap: 2px; padding: 4px 2px 12px; }
.nelly-thread-bubble-row { display: flex; flex-direction: column; max-width: 78%; }
.nelly-thread-bubble-row.out { align-self: flex-end; align-items: flex-end; }
.nelly-thread-bubble-row.in { align-self: flex-start; align-items: flex-start; }
.nelly-thread-sender {
  font-size: 0.72rem; font-weight: 700; margin: 6px 10px 2px;
  color: var(--olly-accent, #2563eb);
}
.nelly-thread-bubble {
  padding: 8px 12px; border-radius: 14px; font-size: 0.88rem; line-height: 1.4;
  white-space: pre-wrap; word-break: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.06);
}
.nelly-thread-bubble-row.in .nelly-thread-bubble {
  background: #fff; border: 1px solid var(--olly-border, #e2e8f0); border-top-left-radius: 4px;
}
.nelly-thread-bubble-row.out .nelly-thread-bubble {
  background: #dcf8c6; border-top-right-radius: 4px;
}
.nelly-thread-time {
  font-size: 0.66rem; color: var(--olly-text-3, #94a3b8); margin: 2px 10px 0;
}

/* ==== Swipe quick actions (per-type, synced with the APK) ==== */
.nelly-swipe-host { position: relative; overflow: hidden; }
/* The row's real children slide as a group; the reveal panel behind stays put. */
.nelly-swipe-host > *:not(.nelly-swipe-bg) {
  position: relative; z-index: 1;
  transform: translateX(var(--sw, 0));
}
.nelly-swipe-host.animating > *:not(.nelly-swipe-bg) { transition: transform .18s ease; }
.nelly-swipe-bg {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; gap: 8px; padding: 0 22px;
  color: #fff; font-weight: 600; font-size: 0.8rem;
  background: transparent; pointer-events: none;
}
.nelly-swipe-bg.reveal-left { justify-content: flex-start; }
.nelly-swipe-bg.reveal-right { justify-content: flex-end; }
.nelly-swipe-bg.reveal-left, .nelly-swipe-bg.reveal-right { background: #64748b; }
.nelly-swipe-bg.armed { background: var(--olly-accent, #2563eb); }
.nelly-swipe-bg .material-icons-outlined { font-size: 25px; }
.nelly-swipe-label { white-space: nowrap; }

/* ==== Swipe settings panel (Learning tab) ==== */
.nelly-swipe-type { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--olly-border, #e2e8f0); border-radius: 10px; }
.nelly-swipe-type h4 { margin: 0 0 8px; font-size: 0.82rem; color: var(--olly-text-2, #475569); }
.nelly-swipe-dirs { display: flex; gap: 12px; flex-wrap: wrap; }
.nelly-swipe-dir { flex: 1 1 180px; display: flex; flex-direction: column; gap: 4px; }
.nelly-swipe-dir label { font-size: 0.72rem; color: var(--olly-text-3, #94a3b8); }
.nelly-swipe-dir select { padding: 7px 8px; border: 1px solid var(--olly-border, #e2e8f0); border-radius: 8px; background: var(--olly-card, #fff); font: inherit; }

/* ==== Create-new-with-AI chat modal ==== */
.nelly-swipe-ai-body { display: flex; flex-direction: column; height: 60vh; max-height: 520px; }
.nelly-swipe-ai-log { flex: 1; overflow-y: auto; padding: 6px 2px; display: flex; flex-direction: column; gap: 8px; }
.nelly-swipe-ai-msg { max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: 0.85rem; line-height: 1.35; }
.nelly-swipe-ai-msg.user { align-self: flex-end; background: var(--olly-accent, #2563eb); color: #fff; }
.nelly-swipe-ai-msg.bot { align-self: flex-start; background: var(--olly-bg-2, #f1f5f9); color: var(--olly-text, #0f172a); }
.nelly-swipe-ai-proposal { align-self: stretch; border: 1px solid var(--olly-accent, #2563eb); border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.nelly-swipe-ai-proposal .material-icons-outlined { font-size: 26px; color: var(--olly-accent, #2563eb); }
.nelly-swipe-ai-proposal .p-meta { flex: 1; }
.nelly-swipe-ai-proposal .p-label { font-weight: 600; }
.nelly-swipe-ai-proposal .p-instr { font-size: 0.75rem; color: var(--olly-text-3, #94a3b8); }
.nelly-swipe-ai-input { display: flex; gap: 8px; margin-top: 8px; }
.nelly-swipe-ai-input input { flex: 1; padding: 9px 11px; border: 1px solid var(--olly-border, #e2e8f0); border-radius: 999px; font: inherit; }

/* ── Media parity: row avatars + inline media thumbs (A3 / feed media) ───────── */
.nelly-email-avatar { position: relative; overflow: visible; background: var(--olly-bg); }
.nelly-email-avatar img {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block;
}
.nelly-avatar-badge {
  position: absolute; right: -2px; bottom: -2px;
  font-size: 13px !important; width: 16px; height: 16px; border-radius: 50%;
  background: var(--olly-surface); color: var(--olly-info) !important;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--olly-line-2);
}
.nelly-row-media {
  display: inline-flex; align-items: center; gap: 2px; vertical-align: middle;
  margin-right: 6px; position: relative;
}
.nelly-row-media-thumb {
  width: 26px; height: 26px; border-radius: 6px; object-fit: cover;
  border: 1px solid var(--olly-line-2); display: inline-block;
}
.nelly-row-media-glyph { font-size: 18px; color: var(--olly-muted-2); }
.nelly-row-media-n {
  font-size: 10px; color: var(--olly-surface); background: var(--olly-info);
  border-radius: 8px; padding: 0 4px; margin-left: 1px;
}

/* ── Thread bubble: sender avatar, link preview, reactions (A3/A5) ───────────── */
.nelly-tmsg-who { display: inline-flex; align-items: center; gap: 5px; }
.nelly-tmsg-avatar {
  width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
}
.nelly-tmsg-linkpreview {
  display: block; max-width: 260px; margin-top: 4px; text-decoration: none;
  border: 1px solid var(--olly-line-2); border-radius: 12px; overflow: hidden;
  background: var(--olly-bg);
}
.nelly-lp-img { width: 100%; height: 120px; background: #0000000d center/cover no-repeat; }
.nelly-lp-body { padding: 7px 10px; }
.nelly-lp-title { font-size: var(--olly-fs-sm); font-weight: var(--olly-fw-semibold); color: var(--olly-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nelly-lp-desc { font-size: var(--olly-fs-xs); color: var(--olly-muted-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nelly-lp-site { font-size: var(--olly-fs-2xs); color: var(--olly-faint); margin-top: 2px; text-transform: uppercase; letter-spacing: .03em; }
.nelly-tmsg-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 4px 0; }
.nelly-reaction-chip {
  display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
  padding: 1px 7px; border-radius: 12px; font-size: 13px;
  background: var(--olly-bg); border: 1px solid var(--olly-line-2); color: var(--olly-ink);
}
.nelly-reaction-n { font-size: 11px; color: var(--olly-muted-2); }
.nelly-reaction-add {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  width: 24px; height: 22px; border-radius: 12px; padding: 0;
  background: transparent; border: 1px solid var(--olly-line-2); color: var(--olly-muted-2);
}
.nelly-reaction-add .material-icons-outlined { font-size: 15px; }

/* Reaction emoji picker popover */
.nelly-react-picker {
  position: fixed; z-index: 2100; display: flex; gap: 2px; padding: 5px 7px;
  background: var(--olly-surface); border: 1px solid var(--olly-line-2);
  border-radius: 22px; box-shadow: 0 6px 24px rgba(0,0,0,.24);
}
.nelly-react-opt {
  border: none; background: none; cursor: pointer; font-size: 20px; line-height: 1;
  padding: 3px 4px; border-radius: 8px;
}
.nelly-react-opt:hover { background: var(--olly-bg); }

/* ── GIF picker ──────────────────────────────────────────────────────────────── */
.nelly-gif-picker { position: fixed; inset: 0; z-index: 2200; display: flex; align-items: flex-end; justify-content: center; }
.nelly-gif-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.nelly-gif-panel {
  position: relative; width: 100%; max-width: 460px; max-height: 70vh; display: flex; flex-direction: column;
  background: var(--olly-surface); border-radius: 16px 16px 0 0; padding: 12px;
  transform: translateY(12px); opacity: 0; transition: transform .16s ease, opacity .16s ease;
}
.nelly-gif-picker.is-open .nelly-gif-panel { transform: translateY(0); opacity: 1; }
.nelly-gif-head { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.nelly-gif-search {
  flex: 1; padding: 9px 12px; border-radius: 999px; font: inherit;
  border: 1px solid var(--olly-line-2); background: var(--olly-bg); color: var(--olly-ink);
}
.nelly-gif-close {
  border: none; background: var(--olly-bg); cursor: pointer; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: var(--olly-muted-2); flex: 0 0 auto;
}
.nelly-gif-results {
  overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.nelly-gif-item { border: none; padding: 0; cursor: pointer; background: var(--olly-bg); border-radius: 8px; overflow: hidden; line-height: 0; }
.nelly-gif-item img { width: 100%; height: 100px; object-fit: cover; display: block; }
.nelly-gif-hint { grid-column: 1 / -1; text-align: center; color: var(--olly-muted-2); font-size: var(--olly-fs-sm); padding: 24px 0; }

/* Email quick-reply composer (attach parity for email) */
.nelly-email-quickreply { margin-top: 14px; border-top: 1px solid var(--olly-line); padding-top: 10px; }
.nelly-email-quickreply-label {
  display: flex; align-items: center; gap: 5px; font-size: var(--olly-fs-xs);
  color: var(--olly-muted-2); font-weight: var(--olly-fw-semibold); margin-bottom: 6px;
}
.nelly-email-quickreply-label .material-icons-outlined { font-size: 16px; }
.nelly-email-composer { position: static; border-top: none; background: transparent; }