:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  margin: 0; padding: 0;
  background: #f7f8fa;
  color: #1f2937;
  font-size: 14px;
}
.wrap { max-width: 1680px; margin: 0 auto; padding: 14px 22px 80px; }
@media (max-width: 700px) {
  /* Even left/right gutters on phones — small enough that cards feel
     edge-to-edge without horizontal overflow. */
  .wrap { padding: 8px 8px 60px; }
  body  { overflow-x: hidden; }
  /* Cards on phones use min-width 0 so long text wraps instead of
     pushing the row wider than the viewport. */
  .meetings-grid { grid-template-columns: 1fr; }
  .meeting { min-width: 0; }
  .m-mail, .m-name { word-break: break-word; }
  /* Reclaim horizontal space on narrow viewports: hide row labels and
     tighten the owner panel + chip rows so the cards aren't pushed
     down by chrome. */
  .chip-row-label { display: none; }
  .chips { gap: 4px; }
  .chip { padding: 4px 8px; font-size: 11.5px; }
  .chip-count { padding: 0 5px; font-size: 10.5px; }
  .owner-panel { padding: 8px; margin-bottom: 10px; }
  .owner-checklist { grid-template-columns: 1fr; gap: 2px; max-height: 40vh; }
  .owner-row { font-size: 12.5px; gap: 6px; padding: 3px 4px; }
  /* Drop the Updated timestamp on phones so the toolbar takes one row
     less of vertical space — tap Refresh to see freshness instead. */
  .toolbar-right .meta { display: none; }
  .sort-row { margin: 4px 0 8px; }
}

/* ---------- Header / brand ---------- */
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { height: 38px; width: auto; }
h1 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -0.01em; color: #111827; }
.subtitle { color: #6b7280; font-size: 12px; margin-top: 2px; }

.picker-row { display: flex; align-items: center; gap: 8px; background: #ffffff; padding: 6px 10px; border-radius: 8px; font-size: 12px; border: 1px solid #e5e7eb; flex-wrap: wrap; }
.picker-row label { color: #6b7280; }
.picker-row select { border: 1px solid #d1d5db; background: white; border-radius: 6px; padding: 5px 8px; font-size: 13px; min-width: 200px; }
.dev-pill { background: #fef3c7; color: #92400e; font-size: 10px; padding: 2px 7px; border-radius: 999px; font-weight: 600; letter-spacing: 0.04em; }
.user-chip { font-size: 12px; padding: 3px 9px 3px 4px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid #e5e7eb; margin-bottom: 18px; flex-wrap: wrap; }
.tab { padding: 9px 14px; cursor: pointer; border: none; background: transparent; color: #6b7280; font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; text-decoration: none; }
.tab.active { color: #0066cc; border-bottom-color: #0066cc; }
.tab:hover:not(.active) { color: #374151; }

/* Dept-tab variant. Push the (secondary) Templates link to the far
   right so primary navigation reads left-to-right at a glance:
   Sales → Support → … → Zoom | Templates. */
.tabs-depts { gap: 0; }
.tabs-depts .tab { padding: 10px 16px; font-weight: 600; }
.tabs-depts .tab-secondary {
    margin-left: auto;
    font-weight: 400;
    color: #9ca3af;
    border-left: 1px solid #e5e7eb;
    padding-left: 18px;
}
.tabs-depts .tab-secondary.active { color: #0066cc; }

/* Stat cards — Zoom tab today, Finance / DM tabs once their data lands. */
.stat-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
}
.stat-card .stat-label {
    font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: #6b7280; margin-bottom: 6px;
}
.stat-card .stat-value {
    font-size: 26px; font-weight: 700; line-height: 1.05;
    color: #111827;
}

/* Zoom tables — same compact look as the meetings list. */
.zoom-table thead th {
    font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}
.zoom-table tbody td { border-bottom: 1px solid #f3f4f6; }
.zoom-table tbody tr:hover td { background: #f9fafb; }

@media (prefers-color-scheme: dark) {
    .stat-card { background: #0f172a; border-color: #1f2937; }
    .stat-card .stat-value { color: #e5e7eb; }
    .zoom-table thead th { border-bottom-color: #1f2937; }
    .zoom-table tbody td { border-bottom-color: #111827; }
    .zoom-table tbody tr:hover td { background: #0f172a; }
    .tabs-depts .tab-secondary { border-left-color: #1f2937; color: #6b7280; }
}

/* ---------- Buttons ---------- */
.btn { border: 1px solid #d1d5db; background: white; padding: 7px 13px; border-radius: 6px; font-size: 13px; cursor: pointer; color: #374151; text-decoration: none; display: inline-block; }
.btn:hover { background: #f9fafb; }
.btn.primary { background: #0066cc; color: white; border-color: #0066cc; }
.btn.primary:hover { background: #0055aa; }
.btn.small { padding: 4px 9px; font-size: 12px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Refresh-button "thinking" state — spinner + "Refreshing…" label
   swapped in by window.refreshLock() in app.js. Cursor reads as
   "wait" so the user knows the click registered and the page is
   working. */
.btn.is-refreshing { cursor: wait; opacity: 0.85; }
.refresh-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  margin-right: 6px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: refresh-spin 0.7s linear infinite;
}
@keyframes refresh-spin { to { transform: rotate(360deg); } }

/* ---------- Toolbar ---------- */
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; justify-content: space-between; flex-wrap: wrap; }
.toolbar-left, .toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Download Excel — extra emphasis so it's easy to spot at the right edge. */
.btn-export { background: #065f46; color: white; border-color: #064e3b; }
.btn-export:hover { background: #064e3b; color: white; }
.date-nav { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* Visual box around the date-range filter so it reads as one grouped unit. */
.date-box {
  background: #f9fafb; border: 2px solid #e5e7eb; border-radius: 10px;
  padding: 6px 8px; gap: 6px;
}
.date-box .date-label { background: white; }
.date-dow {
  display: inline-block; min-width: 24px;
  font-size: 10px; font-weight: 600; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.sort-row { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 8px 0 12px; }
.sort-row .sort-label { background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 4px 10px; }
/* Cards / List view toggle. Two segmented buttons; the active one
   gets a filled background like a chip. */
.view-toggle { display: inline-flex; background: white; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.view-btn {
  background: white; border: none; padding: 4px 10px; font-size: 12px;
  color: #6b7280; cursor: pointer; border-right: 1px solid #e5e7eb;
}
.view-btn:last-child { border-right: none; }
.view-btn:hover { background: #f9fafb; }
.view-btn.is-active { background: #0066cc; color: white; }
/* Compact list view — header row + N data rows, all sharing the same
   grid-template-columns so each cell lines up vertically across rows
   like a real table. Vertical borders separate columns. */
.meetings-grid.is-list { display: flex; flex-direction: column; gap: 0; grid-template-columns: none; }

/* Single source of truth for the column layout — keep in sync with
   LIST_COLUMNS in app.js (Time, Type, Status, Name, Phone, Email,
   Country, Owner, Actions). All widths are fixed except Name (1fr)
   so every row's columns line up perfectly regardless of how wide
   the action buttons in that row happen to be. The Actions column
   is wide enough for Open-in-Zoho + WhatsApp + Telegram + Viber
   without clipping on a typical viewport; on narrow screens the
   whole list scrolls horizontally (overflow-x: auto below). */
.meeting-list-header,
.meetings-grid.is-list .meeting.meeting-row {
  display: grid;
  /* columns: Time | Type | Status | Name | Phone | Email | Country | Owner | Tags | Actions */
  grid-template-columns: 70px 110px 110px minmax(160px, 1fr) 140px 220px 140px 150px minmax(160px, 1.2fr) 360px;
  align-items: stretch;
  gap: 0;
  font-size: 12px;
  line-height: 1.2;
}
/* List-view tag cell wraps pills onto multiple lines so a lead with
   many tags doesn't blow the row width. .card-tags inside is given
   width:auto so it lays out within the cell instead of below it. */
.meetings-grid.is-list .meeting.meeting-row .ml-tags { padding: 4px 8px; overflow: hidden; }
.meetings-grid.is-list .meeting.meeting-row .ml-tags .card-tags {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0;
}
.meeting-list-header {
  background: #f3f4f6;
  font-weight: 600;
  color: #4b5563;
  border: 1px solid #d1d5db;
  border-radius: 6px 6px 0 0;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.meeting-list-header .ml-cell { padding: 6px 8px; }
/* Sortable header cell. Renders as a button so the whole header is
   clickable; arrow is dim ↕ when idle, dark ▲/▼ when this column is
   the active sort. */
.meeting-list-header .ml-sort-btn {
  background: transparent; border: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  display: flex; align-items: center; gap: 4px;
}
.meeting-list-header .ml-sort-btn:hover { color: #111827; background: #e5e7eb; }
.meeting-list-header .ml-sort-btn.is-active { color: #0066cc; }
.meeting-list-header .sort-arrow.sort-idle   { color: #9ca3af; font-size: 9px; }
.meeting-list-header .sort-arrow.sort-active { color: #0066cc; font-size: 9px; }
.meetings-grid.is-list .meeting.meeting-row {
  /* Override the card layout entirely — the grid above replaces it. */
  display: grid;
  background: white;
  border: 1px solid #e5e7eb;
  border-top: none;            /* kill base 3px stripe AND avoid double border */
  border-left: 3px solid var(--type-color, #6b7280);
  border-radius: 0;
  padding: 0;
  min-height: 26px;
  overflow: hidden;
}
.meetings-grid.is-list .meeting.meeting-row:last-child { border-radius: 0 0 6px 6px; }
.meetings-grid.is-list .meeting.meeting-row.meeting-orphan { background: #fffbeb; border-color: #fde68a; }
/* Each cell: vertical separator on the right, ellipsis on overflow. */
.meeting-list-header .ml-cell,
.meetings-grid.is-list .meeting.meeting-row .ml-cell {
  padding: 4px 8px;
  border-right: 1px solid #e5e7eb;
  display: flex; align-items: center; gap: 5px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meeting-list-header .ml-cell:last-child,
.meetings-grid.is-list .meeting.meeting-row .ml-cell:last-child { border-right: none; }
/* Per-cell tweaks. */
.meetings-grid.is-list .ml-time   { font-weight: 600; color: #111827; }
.meetings-grid.is-list .ml-tz     { font-size: 9.5px; font-weight: 500; color: #6b7280; }
.meetings-grid.is-list .ml-name   { font-weight: 600; color: #111827; }
.meetings-grid.is-list .ml-phone, .meetings-grid.is-list .ml-email,
.meetings-grid.is-list .ml-country { color: #4b5563; font-size: 11px; }
.meetings-grid.is-list .ml-pill   {
  display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 600; color: white; line-height: 1.4;
  white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.meetings-grid.is-list .ml-owner > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.meetings-grid.is-list .meeting.meeting-row .m-actions {
  display: inline-flex; align-items: center; gap: 3px;
  margin: 0; flex-wrap: nowrap;
}
.meetings-grid.is-list .meeting.meeting-row .m-btn { padding: 1px 6px; font-size: 9.5px; line-height: 1.4; white-space: nowrap; min-height: 22px; height: 22px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto !important; min-width: 0 !important; }
.meetings-grid.is-list .meeting.meeting-row .m-btn svg { width: 10px !important; height: 10px !important; margin-right: 2px; }
.meetings-grid.is-list .wa-lang-tag { display: none; }
.meetings-grid.is-list .avatar.avatar-xs { width: 18px; height: 18px; font-size: 9px; line-height: 18px; flex-shrink: 0; }
/* Horizontal scroll for the whole list on narrow viewports rather than
   per-row scrollbars. The grid container (#meetingsList) handles it. */
.meetings-grid.is-list { overflow-x: auto; }
.meeting-list-header,
.meetings-grid.is-list .meeting.meeting-row { min-width: 1460px; }
/* The actions cell holds the IM buttons — let it expand naturally
   inside the row's grid track instead of clipping with overflow:hidden,
   so a long row always shows every button (the row scrolls
   horizontally with the rest of the list when it overflows). */
.meetings-grid.is-list .meeting.meeting-row .ml-actions-cell { overflow: visible; white-space: nowrap; }
.date-sep { color: #6b7280; font-size: 14px; padding: 0 2px; }
.date-presets { border: 1px solid #e5e7eb; background: white; border-radius: 8px; padding: 6px 10px; font-size: 12px; color: #374151; cursor: pointer; }
/* Per-card date pill (only shown when range > 1 day). */
.m-date { font-size: 11px; padding: 2px 7px; border-radius: 6px; background: #f3f4f6; color: #374151; font-weight: 500; }
.btn.day-nav { width: 28px; padding: 4px 0; text-align: center; font-weight: 600; font-size: 14px; line-height: 1; }
.date-label, .sort-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7280; background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 4px 10px; }
.date-label input[type="date"], .sort-label select { border: none; background: transparent; font: inherit; font-size: 13px; color: #1f2937; padding: 2px 0; }
.date-label input[type="date"]:focus, .sort-label select:focus { outline: none; }

/* Tighten the toolbar on narrow screens — smaller controls so the
   filter row doesn't push the meeting cards halfway down the screen. */
@media (max-width: 700px) {
  .toolbar { gap: 6px; }
  .toolbar-left, .toolbar-right { gap: 4px; }
  .date-label, .sort-label, .date-presets, .btn.small {
    font-size: 11.5px; padding: 3px 8px;
  }
  .date-label input[type="date"], .sort-label select, .date-presets {
    font-size: 12px;
  }
  .date-presets { padding: 4px 8px; }
  .date-nav { gap: 3px; }
}

.meta { color: #6b7280; font-size: 12px; }
.summary { background: #ffffff; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13px; color: #374151; border: 2px solid #e5e7eb; }
.summary strong { color: #111827; }

/* Per-source loading bar (Zoho + Calendly). Pure CSS spinner so we
   don't need a separate <img>. The state attribute drives both the
   icon and the colour. */
.load-bar {
  display: flex; gap: 16px; flex-wrap: wrap;
  background: white; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 12px; font-size: 12.5px;
}
.load-row { display: inline-flex; align-items: center; gap: 8px; color: #6b7280; }
.load-row .load-state {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
}
.load-row[data-state="loading"] .load-state {
  border: 2px solid #d1d5db; border-top-color: #0066cc;
  animation: spin 0.8s linear infinite;
}
.load-row[data-state="done"]   .load-state {
  background: #10b981; position: relative;
}
.load-row[data-state="done"]   .load-state::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.load-row[data-state="done"]   { color: #047857; }
.load-row[data-state="error"]  .load-state { background: #ef4444; }
.load-row[data-state="error"]  { color: #b91c1c; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { padding: 40px 20px; text-align: center; color: #6b7280; font-style: italic; border: 1px dashed #d1d5db; border-radius: 10px; background: white; grid-column: 1 / -1; }
.loading { padding: 40px 20px; text-align: center; color: #6b7280; grid-column: 1 / -1; }
.error { padding: 14px; background: #fef2f2; color: #991b1b; border-radius: 8px; border: 1px solid #fecaca; }
.card { background: white; border: 2px solid #e5e7eb; border-radius: 10px; padding: 16px; margin-bottom: 14px; }

/* ---------- Type chips ---------- */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: white; border: 1px solid #e5e7eb; padding: 5px 10px;
  border-radius: 999px; font-size: 12px; color: #374151;
  cursor: pointer; transition: background .12s, opacity .12s;
}
.chip:hover { background: #f9fafb; }
.chip.chip-dim { opacity: 0.45; }
.chip-active, .chip-all.chip-active { background: #eff6ff; border-color: #bfdbfe; }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.chip-count { font-weight: 600; color: #111827; background: #f3f4f6; padding: 1px 6px; border-radius: 999px; font-size: 11px; }
.chips.chips-status { margin-top: -4px; margin-bottom: 10px; }
.chips.chips-status:empty { display: none; }
.chips.chips-country { margin-top: -4px; margin-bottom: 10px; }
.chips.chips-country:empty { display: none; }
.chips.chips-lead-status { margin-top: -4px; margin-bottom: 10px; }
.chips.chips-lead-status:empty { display: none; }
.chips.chips-viewing { margin-bottom: 10px; }

/* ---------- Multi-select dropdown (Country, Viewing) ---------- */
.multi-dropdown { position: relative; display: inline-block; }
.multi-dropdown-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: white; border: 1px solid #d1d5db; border-radius: 8px;
  padding: 5px 10px; font-size: 12px; color: #374151; cursor: pointer;
  min-width: 180px; max-width: 380px;
}
.multi-dropdown-toggle:hover { background: #f9fafb; }
.multi-dropdown-toggle.is-open { background: #eff6ff; border-color: #bfdbfe; }
.multi-dropdown-label {
  flex: 1; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #111827; font-weight: 500;
}
.multi-dropdown-label .placeholder { color: #6b7280; font-weight: 400; }
.multi-dropdown-count {
  font-weight: 600; color: #111827; background: #f3f4f6;
  padding: 1px 6px; border-radius: 999px; font-size: 11px;
}
.multi-dropdown-arrow { color: #6b7280; font-size: 10px; }

.multi-dropdown-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
  min-width: 280px; max-width: 420px; max-height: 380px;
  background: white; border: 1px solid #e5e7eb; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.multi-dropdown-panel[hidden] { display: none; }
.multi-dropdown-search {
  width: 100%; padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px;
  font: inherit; font-size: 13px; background: #fafbfc;
}
.multi-dropdown-actions { display: flex; gap: 6px; }
.multi-dropdown-list {
  display: flex; flex-direction: column; gap: 1px;
  overflow-y: auto; max-height: 260px; padding-right: 2px;
}
.multi-dropdown-list .row {
  display: flex; align-items: center; gap: 8px; padding: 5px 7px;
  border-radius: 5px; font-size: 13px; color: #1f2937; cursor: pointer;
}
.multi-dropdown-list .row:hover { background: #f3f4f6; }
.multi-dropdown-list .row input[type="checkbox"] { margin: 0; flex-shrink: 0; }
.multi-dropdown-list .row .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-dropdown-list .row .count { font-size: 11px; color: #6b7280; background: #f3f4f6; padding: 1px 6px; border-radius: 999px; }
.multi-dropdown-list .row.is-other { border-top: 1px solid #f3f4f6; padding-top: 8px; margin-top: 4px; }
.multi-dropdown-empty { color: #9ca3af; font-size: 12px; text-align: center; padding: 12px; }
/* The owner-panel reuses .multi-dropdown-panel positioning when it
   sits inside .multi-dropdown. Override the old .owner-panel block
   layout so it overlays correctly. */
.multi-dropdown-panel.owner-panel { padding: 10px; margin: 0; max-width: 460px; }
.multi-dropdown-panel.owner-panel .owner-panel-head { margin-bottom: 8px; }
.multi-dropdown-panel.owner-panel .owner-checklist { max-height: 280px; }
.chip.chip-country { background: #f3f4f6; color: #374151; }
.chip.chip-country.chip-dim { opacity: 0.45; }
.chip-row-label { font-size: 12px; color: #6b7280; margin-right: 4px; align-self: center; }
/* Per-meeting status pill on each card. Colour is applied inline; this
   handles the layout, typography and contrast. */
.m-status-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: white;
  letter-spacing: 0.01em; line-height: 1.3;
}

/* ---------- Owner panel (multi-user picker for admins) ---------- */
.owner-panel { background: white; border: 2px solid #e5e7eb; border-radius: 10px; padding: 12px; margin-bottom: 14px; }
.owner-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.owner-panel-head strong { font-size: 13px; }
.owner-search {
  width: 100%; padding: 7px 11px; border: 1px solid #d1d5db; border-radius: 8px;
  font: inherit; font-size: 13px; margin-bottom: 8px; background: #fafbfc;
}
.owner-search:focus { outline: none; border-color: #0066cc; box-shadow: 0 0 0 3px rgba(0,102,204,0.1); }
.owner-checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; max-height: 260px; overflow-y: auto; }
.owner-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.owner-row:hover { background: #f9fafb; }
.owner-row input[type="checkbox"] { margin: 0; }
.owner-row-name { flex: 1; }

/* ---------- Meetings grid (2 columns desktop, 1 column mobile) ---------- */
/* Auto-fill the available width — 3 columns on wide laptops, 2 on
   medium screens, 1 on phones. Min raised to 420px so all three
   action items (Zoho / WhatsApp / Zoom link) fit on one line. */
.meetings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }

/* ---------- Meeting card ---------- */
.meeting {
  position: relative; overflow: hidden;
  border: 1px solid #e5e7eb; border-radius: 12px;
  /* Equal padding on all sides — left/right symmetric. */
  padding: 14px;
  background: #ffffff;
  /* Type color shown as a thin top border (replaces the old left stripe
     so left/right margins match exactly). */
  border-top: 3px solid var(--type-color, #6b7280);
  display: flex; flex-direction: column; gap: 8px;
  transition: box-shadow .15s, transform .15s;
}
.meeting:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.m-type-stripe { display: none; }      /* superseded by the top border */

.m-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.m-head-left { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.m-head-right { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #4b5563; }
.m-type-pill {
  color: white; font-size: 11px; padding: 3px 9px; border-radius: 999px;
  font-weight: 600; letter-spacing: 0.01em; text-transform: none; line-height: 1;
}
.m-time { font-size: 14px; color: #111827; font-weight: 700; font-variant-numeric: tabular-nums; }
.m-tz { font-size: 10px; font-weight: 500; color: #6b7280; margin-left: 3px; letter-spacing: 0.04em; }

/* Click-to-toggle lead-local-time on Calendly-enriched meeting cards
   AND list rows. When the chip is clickable, a faint dotted underline
   + help cursor advertises it without committing to a button style.
   Active lead-time state paints an amber background so it's obvious
   the displayed hour is the lead's time, not the viewer's. */
.m-time-clickable,
.ml-time-clickable { cursor: pointer; border-bottom: 1px dotted #9ca3af; padding-bottom: 1px; }
.m-time-clickable:hover,
.ml-time-clickable:hover { background: #fef3c7; border-radius: 4px; }
.m-time.m-time-lead,
.ml-time.ml-time-lead {
    background: #fef3c7;
    color: #92400e;
    padding: 2px 8px;
    border-radius: 4px;
    border-bottom: 1px dotted #d97706;
}
.m-time.m-time-lead .m-tz,
.ml-time.ml-time-lead .ml-tz { color: #b45309; }
.m-tz-lead-suffix { font-size: 10px; font-weight: 600; color: #b45309; margin-left: 4px; letter-spacing: 0.02em; }
.m-owner-name { font-weight: 500; color: #374151; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.m-body { flex: 1; }
.m-name { font-size: 15px; font-weight: 600; color: #111827; margin-bottom: 6px; }
.m-table { font-size: 12.5px; color: #4b5563; border-collapse: collapse; margin-top: 2px; }
.m-table td { padding: 1px 12px 1px 0; }
.m-table .lbl { color: #9ca3af; font-size: 11.5px; }
.m-actions { margin-top: 6px; display: flex; gap: 6px; flex-wrap: nowrap; align-items: stretch; }
/* All action buttons in .m-actions share a uniform shape regardless
   of label length or browser zoom. Each button:
     - takes an equal share of the row (flex: 1 1 0 + min-width: 0
       so even the longest label can shrink)
     - keeps a single, never-wrapping line of text (clipped with
       ellipsis if the column is narrower than the label)
     - has the same fixed height (32px) so the row reads as a single
       horizontal band regardless of which buttons have side-labels
       (e.g. "WhatsApp · French")
   !important on white-space + height + display because these props
   have been overridden by other rules in the past — locking them
   here avoids regressions when a tab adds its own .m-btn variant. */
.m-actions > .m-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 32px !important;
  padding: 0 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  line-height: 1 !important;
  font-size: 11px;
  gap: 2px;
}
/* Icons inside action buttons keep their 14×14 footprint at every
   browser-zoom level. flex-shrink:0 stops the parent's overflow:
   hidden from squashing them; explicit width/height override any
   global "img/svg max-width:100%" rule so Cmd-+ / Cmd-- can't
   stretch the icon away from the rest of the row. */
.m-actions > .m-btn > svg {
  flex-shrink: 0 !important;
  width: 12px !important;
  height: 12px !important;
  display: inline-block !important;
}
/* Email link in the m-table looks like plain text but is still a
   clickable mailto: hyperlink (no underline, no blue). */
.m-mail { color: inherit; text-decoration: none; }
.m-mail:hover { text-decoration: underline; }
/* Calendly Zoom link rendered as inline text alongside the buttons
   (compact, blue, no padding so it doesn't read as a button). */
.m-zoom-link {
  margin-left: auto; padding: 4px 4px;
  font-size: 12.5px; color: #006bff; text-decoration: underline;
  white-space: nowrap; cursor: pointer;
}
.m-zoom-link:hover { color: #0058d4; }
.m-btn { text-decoration: none; padding: 5px 11px; border-radius: 6px; font-size: 12.5px; font-weight: 500; display: inline-block; }
.m-btn.zoho { background: #0066cc; color: white; }
.m-btn.wa { background: #25D366; color: white; }
.m-btn.wa.wa-done { background: #10b981; }
.m-btn.tg { background: #229ED9; color: white; }
.m-btn.tg.wa-done { background: #1a7ea9; }
.m-btn.vb { background: #7360F2; color: white; }
.m-btn.vb.wa-done { background: #5a4ad6; }
.m-btn.wa-app { background: #128C7E; color: white; }
.m-btn.wa-app:hover { background: #0d6e60; }
.m-btn.zoho.zoho-done { background: #1a4f8b; }
.m-btn.disabled { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; }
.m-btn.m-btn-calendly { background: #006bff; color: white; border: 1px solid #006bff; cursor: pointer; }
.m-btn.m-btn-calendly:hover { background: #0058d4; }
.m-btn.m-btn-zoom { background: #2D8CFF; color: white; }
.m-calendly-result { background: #f8fafc; border-radius: 8px; padding: 8px 10px; margin-top: 6px; font-size: 12px; }
.m-calendly-result .empty, .m-calendly-result .error, .m-calendly-result .loading { padding: 6px 0; }
.cal-event { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; flex-wrap: wrap; }
.cal-event-name { font-weight: 500; color: #111827; }

/* Per-card Calendly enrichment row (matched data from Calendly API). */
.m-cal-row { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.m-cal-row:empty { display: none; }
.m-cal-tag { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: #eff6ff; color: #1e3a8a; font-weight: 500; }
.m-btn.m-btn-cal { background: #006bff; color: white; cursor: pointer; border: 1px solid #006bff; padding: 4px 10px; font-size: 11.5px; }
.m-btn.m-btn-cal:hover { background: #0058d4; }
.meeting-done { background: #f0fdf4; }
/* Orphan card — meeting exists in Calendly but missing from Zoho. */
.meeting-orphan { background: #fffbeb; border-color: #fde68a; }
.orphan-banner {
  grid-column: 1 / -1;
  background: #fef3c7; border: 1px solid #fde68a; color: #92400e;
  padding: 10px 14px; border-radius: 10px; margin-bottom: 4px;
  font-size: 12.5px; line-height: 1.5;
}
.orphan-tag {
  align-self: flex-start;
  background: #f59e0b; color: white; font-size: 10.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; cursor: help;
}

/* ---------- Avatars (initials, color-hashed by email) ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  background: #6b7280; color: white; border-radius: 50%;
  font-weight: 600; line-height: 1; flex-shrink: 0;
  font-size: 11px;
}
.avatar-xs { width: 22px; height: 22px; font-size: 10px; }
.avatar-sm { width: 26px; height: 26px; font-size: 11px; }
.avatar-md { width: 36px; height: 36px; font-size: 13px; }

/* ---------- Admin badge + role pill + read-only pill ---------- */
.admin-badge { color: #d97706; margin-left: 2px; font-size: 11px; }
.readonly-pill { display: inline-block; margin-left: 8px; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #fef3c7; color: #92400e; font-weight: 500; vertical-align: middle; }
.role-pill { display: inline-block; margin-left: 6px; font-size: 10px; padding: 2px 7px; border-radius: 999px; font-weight: 600; letter-spacing: 0.02em; vertical-align: middle; }
.role-pill.role-admin { background: #fef3c7; color: #92400e; }
.role-pill.role-user  { background: #e5e7eb; color: #4b5563; }

/* ---------- WhatsApp click status ---------- */
.wa-status { display: inline-block; margin-top: 6px; font-size: 11.5px; padding: 3px 8px; border-radius: 6px; font-weight: 500; }
.wa-status-yes { background: #dcfce7; color: #166534; }
.wa-status-no  { background: #fee2e2; color: #991b1b; }

/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0 4px; }

/* ---------- Restricted (dev) mode banner + toggle ---------- */
.restricted-banner {
  display: flex; align-items: center; gap: 10px;
  background: #fef3c7; border: 1px solid #fde68a; color: #92400e;
  padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; font-size: 13px;
}
.restricted-toggle { margin-bottom: 8px; text-align: right; }
.owner-row-admin .owner-row-name { font-weight: 600; }

/* ---------- Connection indicators (MS / Calendly) in the owner picker ---------- */
.owner-row-badges { display: inline-flex; gap: 4px; margin-left: auto; }
.conn-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 999px; line-height: 1;
}
.conn-ms  { background: #dbeafe; color: #1e40af; }
.conn-cal { background: #d1fae5; color: #065f46; }
.conn-off { background: #f3f4f6; color: #9ca3af; }

/* ---------- Settings modal ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
}
.modal[hidden] { display: none; }
.modal-card {
  background: white; border-radius: 14px; max-width: 540px; width: 100%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.18); max-height: 90vh; overflow-y: auto;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #e5e7eb;
}
.modal-head h2 { margin: 0; font-size: 18px; font-weight: 650; color: #111827; }
.modal-close {
  background: transparent; border: none; font-size: 18px; cursor: pointer;
  color: #6b7280; padding: 4px 8px; border-radius: 6px;
}
.modal-close:hover { background: #f3f4f6; }
.modal-body { padding: 16px 20px; }
.settings-row { padding: 14px 0; border-bottom: 1px solid #f3f4f6; }
.settings-row:last-child { border-bottom: none; }
.settings-row h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: #111827; }
.settings-row p { margin: 0 0 10px; font-size: 12px; color: #6b7280; line-height: 1.5; }
.status-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; margin: 6px 0 10px; flex-wrap: wrap; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.status-dot.ok  { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.18); }
.status-dot.off { background: #d1d5db; }
body.modal-open { overflow: hidden; }

/* ---------- Templates page ---------- */
.tpl-owner-bar { background: white; border: 2px solid #e5e7eb; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tpl-owner-bar select { border: 1px solid #d1d5db; background: white; border-radius: 6px; padding: 5px 8px; font-size: 13px; }
/* Template language tabs (default + per-Email_language overrides). */
.tpl-lang-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.tpl-lang-tab {
  background: white; border: 1px solid #e5e7eb; padding: 6px 12px;
  border-radius: 999px; font-size: 12.5px; color: #374151; cursor: pointer;
}
.tpl-lang-tab:hover { background: #f9fafb; }
.tpl-lang-tab.is-active { background: #0066cc; color: white; border-color: #0066cc; }
.tpl-lang-tab.tpl-lang-add { color: #0066cc; border-style: dashed; }
/* Inline × that deletes a language tab. Only present on non-default tabs. */
.tpl-lang-del {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px; width: 16px; height: 16px; border-radius: 50%;
  font-size: 12px; line-height: 1; color: inherit; opacity: 0.6;
  cursor: pointer; transition: opacity 0.1s, background 0.1s;
}
.tpl-lang-tab:hover .tpl-lang-del { opacity: 0.9; }
.tpl-lang-del:hover { opacity: 1; background: rgba(255,255,255,0.25); }
.tpl-lang-tab:not(.is-active) .tpl-lang-del:hover { background: rgba(0,0,0,0.08); }
/* Drag-and-drop visual feedback for reordering language tabs. */
.tpl-lang-tab[draggable="true"] { cursor: grab; }
.tpl-lang-tab[draggable="true"]:active { cursor: grabbing; }
.tpl-lang-tab.dragging { opacity: 0.45; }
.tpl-lang-tab.drag-over { box-shadow: -3px 0 0 0 #0066cc; }
/* Language tag pill on the WhatsApp button. */
.wa-lang-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; background: rgba(255,255,255,0.25); border-radius: 999px; font-size: 10px; font-weight: 600; }

.tpl-card { border: 2px solid #e5e7eb; border-radius: 10px; padding: 14px; margin-bottom: 12px; background: white; }
.tpl-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; flex-wrap: wrap; }
.tpl-label { font-size: 14px; font-weight: 600; color: #111827; display: inline-flex; align-items: center; gap: 8px; }
.tpl-head-right { display: inline-flex; align-items: center; gap: 6px; }
textarea { width: 100%; min-height: 70px; padding: 9px 11px; border: 1px solid #d1d5db; border-radius: 8px; font: inherit; font-size: 13px; resize: vertical; background: #fcfcfd; color: #1f2937; }
textarea:focus { outline: none; border-color: #0066cc; box-shadow: 0 0 0 3px rgba(0,102,204,0.1); }
.preview { margin-top: 8px; font-size: 12px; color: #4b5563; padding: 8px 10px; background: #f9fafb; border-radius: 6px; border: 1px solid #f0f0f0; }
.preview .label { color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; margin-bottom: 3px; }
.vars-hint { font-size: 11.5px; color: #6b7280; }
.vars-hint code { background: #f3f4f6; padding: 1px 5px; border-radius: 4px; font-size: 11.5px; color: #374151; }
.save-bar { position: sticky; bottom: 0; background: linear-gradient(to top, #f7f8fa 60%, rgba(247,248,250,0)); padding: 14px 0 6px; display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* ---------- Toast ---------- */
.saved-toast { position: fixed; right: 18px; bottom: 18px; background: #10b981; color: white; padding: 10px 16px; border-radius: 8px; font-size: 13px; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; pointer-events: none; }
.saved-toast.show { opacity: 1; transform: translateY(0); }

/* ---------- Microsoft sign-in button ---------- */
.btn.ms-signin {
  background: #2f2f2f; color: white; border-color: #2f2f2f;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; font-size: 14px; font-weight: 500;
}
.btn.ms-signin:hover { background: #1a1a1a; }
.ms-logo { width: 18px; height: 18px; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.ms-logo span:nth-child(1) { background: #f25022; }
.ms-logo span:nth-child(2) { background: #7fba00; }
.ms-logo span:nth-child(3) { background: #00a4ef; }
.ms-logo span:nth-child(4) { background: #ffb900; }

/* Refresh buttons are locked (visually + functionally) while their
   fetch is in flight. Toggled by window.refreshLock(). */
.btn.is-loading, button.is-loading {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────
   Floating feedback-chat widget ("Talk to Claude")
   Pinned BOTTOM-LEFT — sibling to the bottom-right "Ask Sales" pill.
   Visual language mirrors that one (rounded purple pill, soft shadow,
   hover lift) so the two chips read as a matched pair from opposite
   corners. The expanded panel uses the dashboard's standard card
   palette (white bg, 1px #e5e7eb border, 12px radius, soft shadow)
   and the meeting-status colours for the per-thread dots.
   ───────────────────────────────────────────────────────────────── */

/* Mount container is invisible — its children are absolutely
   positioned. Keeps the rest of the DOM untouched. */
#fc-mount { position: static; }

/* Bubble launcher. matches the "Ask Sales" footprint but on the
   opposite side. Purple (#7c3aed) keeps it visually distinct from
   the Zoho-blue and WhatsApp-green dashboard buttons. */
.fc-bubble {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 2147483000;             /* above every page-content layer */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #7c3aed;
  color: #fff;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35),
              0 2px 4px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.fc-bubble:hover {
  transform: translateY(-1px);
  background: #6d28d9;
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.45),
              0 3px 6px rgba(15, 23, 42, 0.10);
}
.fc-bubble:focus { outline: none; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.30); }
.fc-bubble-icon  { font-size: 15px; line-height: 1; }
.fc-bubble-label { line-height: 1; }
.fc-bubble-hidden { display: none; }

/* Unread badge sits on the right edge of the pill. */
.fc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.fc-badge[hidden] { display: none; }

/* Panel — opens UPWARDS from the bubble. Anchored to the same
   bottom-left corner so the panel's bottom edge sits roughly where
   the bubble's top is. */
.fc-panel {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 2147483001;
  width: 360px;
  height: 500px;
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18),
              0 4px 10px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  font: inherit;
}
.fc-panel[hidden] { display: none; }

/* Sticky header inside the panel. Matches the panel border. */
.fc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  flex: 0 0 auto;
}
.fc-title {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-iconbtn {
  appearance: none;
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: #4b5563;
}
.fc-iconbtn:hover { background: #f3f4f6; color: #111827; }

/* Status pill in the detail header — same colour family as the
   per-thread dots, but rendered as a clickable rounded pill so the
   user can cycle status. */
.fc-status-pill {
  appearance: none;
  border: none;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.fc-status-pill:hover { filter: brightness(1.06); }

/* Panel body slot — list, detail, and compose all flow inside. */
.fc-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- List view ---- */
.fc-list-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 8px 10px;
  border-bottom: 1px solid #f3f4f6;
  flex: 0 0 auto;
}
.fc-newbtn {
  appearance: none;
  background: #0066cc;      /* matches .m-btn.zoho */
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.fc-newbtn:hover { background: #0055aa; }

.fc-list-rows {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 0;
}
.fc-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
}
.fc-row:hover { background: #f9fafb; }
.fc-row-unread { background: #eff6ff; }
.fc-row-unread:hover { background: #dbeafe; }

.fc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex: 0 0 auto;
}
/* Filled blue = unread (matches the row's pale-blue tint). */
.fc-dot-unread { background: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, .15); }
/* Hollow gray = read. Subtle ring instead of fill so the row still
   has an alignment marker without screaming "new". */
.fc-dot-read   { background: transparent; box-shadow: inset 0 0 0 1px #d1d5db; }

.fc-row-main { flex: 1 1 auto; min-width: 0; }
.fc-row-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}
.fc-row-name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}
.fc-row-time {
  font-size: 11px;
  color: #6b7280;
  flex: 0 0 auto;
}
.fc-row-preview {
  font-size: 12px;
  color: #4b5563;
  line-height: 1.4;
  /* Full body lives in the DOM (no JS truncation); the visual is
     capped at 3 lines so a 5000-char essay can't blow up the list. */
  white-space: pre-wrap;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.fc-empty {
  padding: 20px 16px;
  text-align: center;
  font-size: 12.5px;
  color: #6b7280;
  line-height: 1.45;
}

/* ---- Detail view ---- */
.fc-convo {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fc-msg {
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  padding: 8px 10px;
}
.fc-msg-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.fc-msg-author {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}
.fc-msg-time {
  font-size: 10.5px;
  color: #9ca3af;
}
.fc-msg-body {
  font-size: 13px;
  color: #1f2937;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
  /* Break un-spaced URLs / token strings so they wrap inside the 360px
     panel instead of horizontally scrolling the whole convo. */
  overflow-wrap: anywhere;
}

/* ---- Persistent "bot is working" indicator ---- */
/* Looks like a real message row (gray, italic author label, 3 animated
   dots in the body) plus a small red Stop button on the right of the
   header — so the user knows the bot is actively running and can
   cancel the in-flight GitHub Actions workflow. */
.fc-thinking {
  opacity: 0.9;
  animation: fc-thinking-pulse 1.4s ease-in-out infinite;
}
.fc-thinking .fc-msg-head {
  align-items: center;
}
.fc-thinking .fc-msg-author {
  color: #6b7280;
  font-style: italic;
  font-weight: 500;
}
.fc-thinking-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  min-height: 18px;
}
.fc-thinking-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ca3af;
  display: inline-block;
  animation: fc-thinking-bounce 1s ease-in-out infinite;
}
.fc-thinking-dot:nth-child(2) { animation-delay: 0.15s; }
.fc-thinking-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes fc-thinking-pulse {
  0%, 100% { background: #f9fafb; }
  50%      { background: #f3f4f6; }
}
@keyframes fc-thinking-bounce {
  0%, 80%, 100% { transform: translateY(0);    opacity: 0.4; }
  40%           { transform: translateY(-3px); opacity: 1; }
}
.fc-stopbtn {
  appearance: none;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.4;
}
.fc-stopbtn:hover:not(:disabled) { background: #b91c1c; }
.fc-stopbtn:disabled { opacity: 0.55; cursor: not-allowed; }

.fc-composer {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
  flex: 0 0 auto;
}
.fc-textarea {
  flex: 1 1 auto;
  resize: none;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fafbfc;
  color: #111827;
}
.fc-textarea:focus {
  outline: none;
  border-color: #0066cc;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
  background: #fff;
}
.fc-sendbtn {
  appearance: none;
  background: #0066cc;       /* matches .m-btn.zoho */
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  align-self: stretch;
}
.fc-sendbtn:hover:not(:disabled) { background: #0055aa; }
.fc-sendbtn:disabled { opacity: .55; cursor: not-allowed; }

/* ---- Compose view ---- */
.fc-compose {
  padding: 12px;
  gap: 10px;
}
.fc-compose .fc-input,
.fc-compose .fc-textarea {
  width: 100%;
  margin-bottom: 10px;
}
.fc-input {
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fafbfc;
  color: #111827;
}
.fc-input:focus {
  outline: none;
  border-color: #0066cc;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
  background: #fff;
}
.fc-compose-body { min-height: 140px; }
.fc-compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.fc-ghostbtn {
  appearance: none;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.fc-ghostbtn:hover { background: #e5e7eb; }

/* ---- Attachments (chips on the composer + media under message bodies) ---- */
/* Wrapper that holds the chips strip on top of the composer; itself
   transparent so the original .fc-composer border-top still reads
   the same. Sits ABOVE .fc-composer in the reply view. */
.fc-composer-wrap {
  flex: 0 0 auto;
  border-top: 1px solid #e5e7eb;
  background: #fff;
}
.fc-composer-wrap > .fc-composer {
  border-top: none;  /* avoid double-border with the wrap */
}
/* Chip strip — flex-wraps so 5 chips don't horizontally scroll the
   composer. Hidden when empty (HTML `hidden` attribute). */
.fc-attach-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px 0;
}
.fc-attach-chips[hidden] { display: none; }
.fc-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 3px 8px 3px 4px;
  font-size: 12px;
  color: #374151;
  max-width: 220px;
}
.fc-attach-chip-thumb {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
  display: block;
}
.fc-attach-chip-icon {
  font-size: 13px;
  line-height: 1;
  padding-left: 4px;
}
.fc-attach-chip-name {
  /* Truncate long filenames so a chip never breaks the row layout. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.fc-attach-chip-x {
  appearance: none;
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  margin-left: 2px;
  border-radius: 50%;
}
.fc-attach-chip-x:hover { background: #e5e7eb; color: #111827; }

/* Paperclip button — same visual weight as fc-iconbtn; sits between
   the textarea and the Send button in the reply composer (and to the
   left of Send in the compose actions row). */
.fc-attach-btn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: #6b7280;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 8px;
  border-radius: 6px;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
}
.fc-attach-btn:hover { background: #f3f4f6; color: #111827; }
.fc-attach-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1); }

/* Rendered attachment list under a message body. Single column so
   thumbnails sit one per row inside the narrow panel; small gap
   matches .fc-convo's 10px between-message rhythm. */
.fc-attachments {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fc-attachment-img {
  display: block;
  max-width: 100%;
  max-height: 200px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  cursor: zoom-in;
}
.fc-attachment-file {
  display: inline-block;
  font-size: 12px;
  color: #0066cc;
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #f9fafb;
  /* Wrap long filenames so they don't overflow the message bubble. */
  overflow-wrap: anywhere;
}
.fc-attachment-file:hover { background: #f3f4f6; }

/* Narrow viewports — phone in portrait. Pin the panel to the bottom
   sheet so it stays usable instead of overflowing off-screen. */
@media (max-width: 480px) {
  .fc-panel {
    left: 6px;
    right: 6px;
    bottom: 6px;
    width: auto;
    height: 70vh;
  }
  .fc-bubble-label { display: none; }
  .fc-bubble { padding: 10px 12px; }
}

/* Column-resize handles auto-wired by app.js for every list view. */
.col-resizer {
  position: absolute; right: 0; top: 0;
  width: 6px; height: 100%;
  cursor: col-resize; user-select: none;
  background: transparent;
}
.col-resizer:hover {
  background: rgba(79, 70, 229, 0.25);
}
body.col-resizing {
  cursor: col-resize; user-select: none;
}
.zoom-table th, .meeting-list-header .ml-cell {
  position: relative;
}

/* ---------- Digital Marketing → Creatives sub-tab (Bug 13) ----------
 * Grid of ad creative cards. Each card shows a thumbnail / first frame,
 * the ad name, and its campaign + run date. Click → opens the modal. */
.dm-creative-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 4px;
}
.dm-creative-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.dm-creative-card:hover,
.dm-creative-card:focus-visible {
  border-color: #c7d2fe;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
  outline: none;
}
.dm-creative-card .dm-creative-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dm-creative-card .dm-creative-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dm-creative-card .dm-creative-noimg {
  color: #9ca3af;
  font-size: 13px;
  text-align: center;
  padding: 8px;
}
.dm-creative-card .dm-creative-video-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 14px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px; /* visually center the ▶ glyph */
}
.dm-creative-card .dm-creative-status {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.dm-creative-card .dm-creative-meta {
  padding: 10px 12px 12px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dm-creative-card .dm-creative-name {
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-creative-card .dm-creative-campaign {
  color: #6b7280;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-creative-card .dm-creative-date {
  color: #9ca3af;
  font-size: 11px;
  margin-top: 2px;
}

/* Modal — full-screen overlay, panel scales to viewport. */
.dm-creative-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dm-creative-modal[hidden] {
  display: none;
}
.dm-creative-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
}
.dm-creative-modal-panel {
  position: relative;
  background: #fff;
  border-radius: 12px;
  max-width: 760px;
  width: calc(100% - 32px);
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px 24px 24px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.4);
}
.dm-creative-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
  padding: 6px 10px;
  border-radius: 6px;
}
.dm-creative-modal-close:hover {
  background: #f3f4f6;
  color: #111827;
}
.dm-creative-modal-info {
  margin-top: 6px;
}
.dm-creative-pager .btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ---------- Email-tab drill-down row hover ----------
 * Visual affordance that a row is clickable on the Zoho sub-tab —
 * hover highlights the row and slides the chevron a few pixels
 * right so the user notices it before clicking. */
#emailTable tr.drillable-row {
  cursor: pointer;
  transition: background-color .12s ease;
}
#emailTable tr.drillable-row:hover {
  background-color: #f5f9ff;
}
#emailTable tr.drillable-row .drill-chevron-cell {
  font-size: 18px;
  font-weight: 600;
  color: #93c5fd;
  transition: transform .12s ease, color .12s ease;
}
#emailTable tr.drillable-row:hover .drill-chevron-cell {
  color: #1d4ed8;
  transform: translateX(3px);
}

/* ---------- Email-tab drill-down modal (Zoho sub-tab) ----------
 * Click a user row → modal listing every email that user sent in
 * the current window. Backdrop dims the page; the centered card
 * scrolls internally so long lists don't push past the viewport. */
.email-drilldown-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.email-drilldown-modal {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 1100px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.4);
  overflow: hidden;
}
.email-drilldown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #e5e7eb;
  gap: 12px;
}
.email-drilldown-title {
  font-size: 15px;
  color: #111827;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-drilldown-meta {
  color: #6b7280;
  font-weight: 400;
}
.email-drilldown-close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
  padding: 4px 10px;
  border-radius: 6px;
}
.email-drilldown-close:hover {
  background: #f3f4f6;
  color: #111827;
}
.email-drilldown-search {
  padding: 10px 20px;
  border-bottom: 1px solid #f3f4f6;
}
.email-drilldown-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13px;
  box-sizing: border-box;
}
.email-drilldown-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.email-drilldown-loading,
.email-drilldown-empty,
.email-drilldown-error {
  padding: 22px;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
}
.email-drilldown-error {
  color: #b91c1c;
  background: #fef2f2;
  border-left: 4px solid #ef4444;
  text-align: left;
}
.email-drilldown-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #e5e7eb;
  border-top-color: #6b7280;
  border-radius: 50%;
  animation: ye-spin 0.8s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}
@keyframes ye-spin {
  to { transform: rotate(360deg); }
}
.email-drilldown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.email-drilldown-table thead th {
  position: sticky;
  top: 0;
  background: #f9fafb;
  color: #374151;
  font-weight: 600;
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
  z-index: 1;
}
.email-drilldown-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid #f3f4f6;
  color: #111827;
}
.email-drilldown-table tbody tr:nth-child(even) td {
  background: #fafafa;
}
.email-drilldown-table tbody tr:hover td {
  background: #eff6ff;
}
/* ---------- Drill-down row: expand-in-place body panel ----------
 * A clicked .email-drilldown-row inserts a sibling .email-body-panel-row
 * directly underneath; the inner .email-body-panel holds the loading
 * spinner / error text / sandboxed iframe (one at a time). The iframe
 * is sized by JS up to a 600px cap with its own internal scroll past
 * that — keeps long marketing templates from blowing out the modal. */
.email-drilldown-row[data-expandable="1"] {
  cursor: pointer;
}
.email-drilldown-row-expanded td {
  background: #eef2ff;
}
.email-body-panel-row td {
  padding: 0 !important;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.email-body-panel {
  padding: 12px 16px;
  background: #f9fafb;
}
.email-body-panel-loading,
.email-body-panel-empty {
  color: #6b7280;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.email-body-panel-error {
  color: #b91c1c;
  font-size: 13px;
}
.email-body-iframe {
  width: 100%;
  height: 200px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  display: block;
}

/* ---------- Zoho Lead tags — per-card pills ----------
 * Renders inside .card-tags directly under the meeting body. One
 * .tag-pill per attached tag plus a trailing .tag-add affordance for
 * a tag picker. The .tag-x close button stays subdued (light gray)
 * until hover, when it goes red to telegraph the destructive action. */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 2px;
  align-items: center;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-size: 11px;
  line-height: 1.4;
  border: 1px solid #e5e7eb;
}
.tag-add {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 999px;
  background: transparent;
  color: #6b7280;
  font-size: 11px;
  line-height: 1.4;
  border: 1px dashed #d1d5db;
  cursor: pointer;
}
.tag-add:hover {
  color: #2563eb;
  border-color: #93c5fd;
  background: #eff6ff;
}
.tag-x {
  background: transparent;
  border: 0;
  padding: 0 2px;
  margin: 0;
  cursor: pointer;
  color: #9ca3af;
  font-size: 13px;
  line-height: 1;
}
.tag-x:hover { color: #dc2626; }
.tag-popover {
  position: absolute;
  z-index: 5000;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  padding: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 220px;
}
.tag-popover input[type="text"] {
  flex: 1;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}
.tag-popover .btn { padding: 3px 8px; font-size: 11px; }

/* Tag-filter dropdown on the Sales toolbar — matches the existing
 * multi-dropdown owner picker visually. */
.tag-filter-dropdown { position: relative; display: inline-block; }
.tag-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 12px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
}
.tag-filter-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  padding: 8px;
  max-height: 320px;
  overflow: auto;
  min-width: 220px;
  z-index: 5000;
}
.tag-filter-panel label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  font-size: 12px;
  cursor: pointer;
}
.tag-filter-panel label:hover { background: #f9fafb; }
.tag-filter-empty { color: #9ca3af; font-size: 12px; padding: 4px; }