/* ============================================================================
   styles.css — Slack-faithful frame.

   ┌────────────────────────────────────────────────────────────────────────┐
   │  BRAND TOKENS (reskin here)                                             │
   │  Change these to re-skin the whole demo for a different prospect/brand. │
   │  Colors, accent, agent badge color, etc. all flow from these.          │
   └────────────────────────────────────────────────────────────────────────┘
   ========================================================================== */
:root {
  /* ---- BRAND TOKENS (reskin here) ---- */
  --brand-accent:        #4a154b;   /* Slack aubergine (sidebar) */
  --brand-accent-2:      #611f69;
  --brand-agent:         #2eb67d;   /* Oakline Ops agent avatar/badge color */
  --brand-human:         #1264a3;   /* human (Dustin) avatar color */
  --brand-link:          #1264a3;
  --brand-btn:           #007a5a;   /* Block Kit primary button green */
  --brand-btn-hover:     #148567;
  --brand-workspace:     #3a3f6b;   /* firm workspace-icon square (deep slate/indigo — distinct from agent green) */
  --logo-text:           "Oakline Capital";  /* (cosmetic; sidebar uses #ws-name) */

  /* ---- Slack surface colors (usually leave as-is) ---- */
  --bg-sidebar:          var(--brand-accent);
  --bg-sidebar-active:   #1164a3;
  --bg-main:             #ffffff;
  --bg-hover:            #f8f8f8;
  --text-primary:        #1d1c1d;
  --text-secondary:      #616061;
  --text-sidebar:        #cfc3cf;
  --text-sidebar-active: #ffffff;
  --border:              #e2e2e2;
  --border-strong:       #d1d1d1;

  --font: "Lato","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}

/* ---- reset ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  color: var(--text-primary);
  background: #f4f4f4;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ============================== layout ==================================== */
.slack-app {
  display: grid;
  grid-template-columns: 260px 1fr;
  height: 100vh;            /* fallback for browsers without dvh */
  height: 100dvh;          /* dynamic viewport — tracks iOS Safari chrome */
  max-width: 1280px;
  margin: 0 auto;
  box-shadow: 0 0 40px rgba(0,0,0,.12);
}

/* ============================== sidebar =================================== */
.sidebar {
  background: var(--bg-sidebar);
  color: var(--text-sidebar);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.workspace-head {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; gap: 10px;
}
/* Slack-style firm workspace icon — rounded square (NOT a circle), firm-branded
   color (var --brand-workspace, distinct from the agent green), initials in
   white. Reskin = change --brand-workspace + the .workspace-ico text in HTML. */
.workspace-ico {
  width: 36px; height: 36px; border-radius: 8px; flex: 0 0 auto;
  background: var(--brand-workspace); color: #fff;
  display: grid; place-items: center; font-size: 15px; font-weight: 900;
  letter-spacing: .5px;
}
.workspace-name { color: #fff; font-weight: 900; font-size: 18px; }
.workspace-sub { font-size: 12px; color: var(--text-sidebar); margin-top: 2px; }

.channel-list { flex: 1; overflow-y: auto; padding: 12px 8px; }
.channel-section {
  text-transform: none;
  font-size: 13px;
  color: var(--text-sidebar);
  padding: 12px 10px 4px;
  font-weight: 700;
}
.channel {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 6px;
  font-size: 15px; color: var(--text-sidebar); cursor: default;
}
.channel:hover { background: rgba(255,255,255,.06); }
.channel.active {
  background: var(--bg-sidebar-active);
  color: var(--text-sidebar-active);
  font-weight: 700;
}
.hash { opacity: .7; font-weight: 400; }
.channel.dm .presence {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand-agent); display: inline-block;
  box-shadow: 0 0 0 1px var(--bg-sidebar);
}
.channel.dm .presence.away { background: transparent; border: 1.5px solid var(--text-sidebar); }

.sidebar-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.12);
}
.me-avatar {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--brand-human); color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
}
.me-name { color: #fff; font-size: 14px; font-weight: 600; }

/* ============================== main ===================================== */
.main {
  background: var(--bg-main);
  display: flex; flex-direction: column; min-height: 0;
}
.channel-header {
  border-bottom: 1px solid var(--border);
  padding: 10px 20px; display: flex; flex-direction: column; gap: 2px;
  flex: 0 0 auto;
}
.ch-title { font-weight: 900; font-size: 18px; }
.ch-topic { font-size: 13px; color: var(--text-secondary); }
.ch-meta { display: none; }

/* ---- message stream ---- */
.messages {
  flex: 1; overflow-y: auto; padding: 18px 20px 8px;
  scroll-behavior: smooth;
}
.msg {
  display: grid; grid-template-columns: 40px 1fr; gap: 10px;
  padding: 6px 0; animation: fadein .18s ease;
}
@keyframes fadein { from { opacity: 0; transform: translateY(4px);} to {opacity:1;transform:none;} }

.msg .avatar {
  width: 38px; height: 38px; border-radius: 9px;
  display: grid; place-items: center; color: #fff;
  font-weight: 800; font-size: 14px; user-select: none;
}
.msg.agent .avatar { background: var(--brand-agent); font-size: 22px; }
.msg.human .avatar { background: var(--brand-human); }

.msg .body { min-width: 0; }
.msg .meta { display: flex; align-items: baseline; gap: 8px; }
.msg .name { font-weight: 900; font-size: 15px; }
.msg .badge {
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
  background: var(--brand-agent); color: #fff;
  padding: 1px 5px; border-radius: 3px; text-transform: uppercase;
}
.msg .time { font-size: 12px; color: var(--text-secondary); }
.msg .text {
  font-size: 15px; line-height: 1.46; margin-top: 2px;
  white-space: pre-wrap; word-wrap: break-word;
}
.msg .text strong, .msg .text b { font-weight: 800; }
.msg .text em { font-style: italic; color: var(--text-primary); }
.msg .text a { color: var(--brand-link); text-decoration: none; }
.msg .text a:hover { text-decoration: underline; }
.msg .text code {
  font-family: var(--mono); font-size: 13px;
  background: #f3f0f0; border: 1px solid #e6e2e2; border-radius: 4px;
  padding: 1px 4px; color: #c25;
}

/* ---- typing indicator ---- */
.typing { display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 6px 0; }
.typing .avatar {
  width: 38px; height: 38px; border-radius: 9px; background: var(--brand-agent);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 22px;
}
.typing .bubble {
  align-self: center; display: inline-flex; gap: 4px;
  background: #f1f1f1; border-radius: 14px; padding: 9px 12px; width: fit-content;
}
.typing .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #b6b6b6;
  animation: blink 1.2s infinite both;
}
.typing .dot:nth-child(2){ animation-delay:.2s; } .typing .dot:nth-child(3){ animation-delay:.4s; }
@keyframes blink { 0%,80%,100%{opacity:.3;} 40%{opacity:1;} }

/* ============================================================================
   SLACK-FAITHFUL RICH CONTENT (revision 2026-06-21)
   - Block Kit "fields" layout for the waterfall (no gridlines)
   - file-preview panes for the spreadsheet + the three output docs
   - blockquote for the drafted email
   Real Slack renders these — bordered tables / custom cards / compose windows
   do NOT exist inline in a Slack message, so they're gone.
   ============================================================================ */

/* ---- Slack code block (``` fenced) — used for the waterfall ---- */
/* Slack renders fenced code blocks in monospace with a subtle bordered, tinted
   background and preserves whitespace, so a monospace table aligns. */
.code-block {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.5;
  background: #f7f6f8; border: 1px solid #e0dee2; border-radius: 6px;
  padding: 10px 12px; margin: 8px 0 4px; max-width: 560px;
  white-space: pre; overflow-x: auto; color: #1d1c1d;
  tab-size: 4;
}
.waterfall-code { font-size: 12.5px; }

/* ---- Slack blockquote (drafted email body) ---- */
.blockquote {
  border-left: 4px solid #d1d1d1; padding: 2px 0 2px 12px; margin: 4px 0;
  color: var(--text-secondary); font-size: 14px; line-height: 1.5;
  white-space: pre-wrap; max-width: 600px;
}

/* ============================== Slack file previews ====================== */
/* The "opened file" look: filename bar on top, document/sheet body below. */
.file-preview {
  border: 1px solid var(--border-strong); border-radius: 10px;
  margin: 8px 0 4px; overflow: hidden; background: #fff; max-width: 640px;
}
.file-bar {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  background: #fbfbfb;
}
.file-bar-ico {
  width: 30px; height: 30px; border-radius: 6px; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff;
  font-weight: 900; font-size: 11px;
}
.file-bar-ico.xlsx { background: #1d7d45; }
.file-bar-ico.pdf  { background: #c4302b; }
.file-bar-name { font-weight: 800; font-size: 14px; color: var(--text-primary); }
.file-bar-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .4px;
  background: #eee; color: var(--text-secondary);
  padding: 2px 6px; border-radius: 4px; text-transform: uppercase;
}
.file-bar-sub { font-size: 12px; color: var(--text-secondary); margin-left: 2px; }
.file-body { background: #fff; }

/* document page body (legacy PDF previews — kept for any doc-page rich card) */
.doc-page { padding: 20px 22px; }
.doc-title { font-weight: 800; font-size: 14px; margin-bottom: 12px; }
.doc-page p { font-size: 14px; line-height: 1.55; margin-bottom: 10px; }
.doc-page p:last-child { margin-bottom: 0; }
.doc-sign { font-weight: 700; }

/* ============================== draft-email previews ===================== */
/* The LP-facing outputs (distribution notice + investor update) render as
   agent-created Gmail DRAFTS shown inside Slack: header bar (✉ + Draft pill +
   "review and send in Gmail" tag), From/To/Subject, then the body. No compose
   window, no Send button — the agent drafted it; sending stays a human action. */
.draft-email {
  border: 1px solid var(--border-strong); border-radius: 10px;
  margin: 8px 0 4px; overflow: hidden; background: #fff; max-width: 640px;
}
.draft-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  background: #fbfbfb; flex-wrap: wrap;
}
.draft-ico {
  width: 26px; height: 26px; border-radius: 6px; flex: 0 0 auto;
  display: grid; place-items: center; background: #1264a3; color: #fff; font-size: 14px;
}
.draft-pill {
  font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  background: #fbe8a6; color: #7a5b00; padding: 2px 7px; border-radius: 4px;
}
.draft-tag { font-size: 12px; color: var(--text-secondary); }
.draft-sub { font-size: 12px; color: var(--text-secondary); margin-left: auto; }
.draft-head {
  padding: 10px 14px; border-bottom: 1px solid var(--border); background: #fff;
  font-size: 13px;
}
.draft-row { display: flex; gap: 10px; padding: 2px 0; }
.draft-k {
  flex: 0 0 56px; color: var(--text-secondary); font-weight: 700; font-size: 12px;
  padding-top: 1px;
}
.draft-v { color: var(--text-primary); min-width: 0; word-break: break-word; }
.draft-subj { font-weight: 800; }
.draft-body-wrap { padding: 16px 18px; }
.email-body p { font-size: 14px; line-height: 1.55; margin-bottom: 10px; }
.email-body p:last-child { margin-bottom: 0; }
.email-sign { font-weight: 700; }

/* spreadsheet preview body */
.sheet-tabs { display: flex; background: #f1f3f4; border-bottom: 1px solid var(--border-strong); }
.sheet-tab {
  padding: 6px 14px; font-size: 12px; color: var(--text-secondary);
  border-right: 1px solid var(--border-strong); cursor: pointer; user-select: none;
}
.sheet-tab.active { background: #fff; color: #217346; font-weight: 800;
  box-shadow: inset 0 -2px 0 #217346; }
.sheet-scroll { overflow-x: auto; }
.sheet-title { padding: 8px 12px 0; font-weight: 800; font-size: 13px; }
.sheet-sub { padding: 0 12px 6px; font-size: 11px; color: var(--text-secondary); font-style: italic; }
table.sheet { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.sheet th, table.sheet td {
  border: 1px solid #d8d8d8; padding: 4px 9px; text-align: right; white-space: nowrap;
}
table.sheet th { background: #eef1f0; font-weight: 800; text-align: right; }
table.sheet td.lbl, table.sheet th.lbl { text-align: left; }
table.sheet tr.group td { background: #f7f7f7; font-weight: 900; text-align: left; letter-spacing:.3px; font-size:11px; color:#555;}
table.sheet tr.junk td { background: #fcfcfc; text-align: left; color: #aaa; font-size: 11px; font-style: italic; }
table.sheet tr.total td { font-weight: 800; background: #fafbfa; }
table.sheet tr.strong td { background: #eafaf1; }
table.sheet td.flag { background: #fff2f0; color: #b3261e; font-weight: 800; position: relative; }
.cell-note {
  display:block; font-size: 10.5px; font-style: italic; color:#b3261e;
  text-align:left; max-width: 220px; white-space: normal;
}
.sheet-warn { padding: 8px 12px; font-size: 12px; color: #b3261e; font-style: italic; }

/* ===================== Avery's annotated overlay (the AI's OUTPUT) ========= */
/* The ANNOTATED spreadsheet view re-renders the SAME raw sheet WITH Avery's
   review callouts overlaid. Everything here is visually distinct from the
   operator's own content (amber/indigo review styling + 🤖 + numbered markers)
   so a viewer reads it as the AI's analysis, never as the operator's file. */

/* header badge strip — unmistakably Avery's markup */
.avery-flag-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; background: #f3f1fb; border-bottom: 1px solid #e0dcf3;
}
.avery-flag-bot { font-size: 16px; line-height: 1; }
.avery-flag-by {
  font-weight: 900; font-size: 13px; color: #4a3f8f;
}
.avery-flag-note {
  font-size: 11px; color: #7a72a8; font-style: italic; margin-left: 2px;
}

/* numbered marker chip on an anchored row's label cell */
.avery-marker {
  display: inline-grid; place-items: center;
  width: 17px; height: 17px; margin-left: 7px; vertical-align: middle;
  background: #b9560f; color: #fff; border-radius: 50%;
  font-size: 11px; font-weight: 900; font-style: normal;
}
/* flagged rows get a faint amber wash + left rule (review highlight) */
table.sheet.annotated tr.avery-row td { background: #fff7ec; }
table.sheet.annotated tr.avery-row td.lbl { box-shadow: inset 3px 0 0 #b9560f; }

/* the callout list under the sheet — Avery's "here's what I caught" */
.avery-callouts {
  padding: 10px 12px 12px; background: #fbfaff;
  border-top: 1px solid #e0dcf3; display: flex; flex-direction: column; gap: 7px;
}
.avery-callout { display: flex; gap: 9px; align-items: flex-start; }
.avery-callout-n {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 18px; height: 18px; margin-top: 1px;
  background: #b9560f; color: #fff; border-radius: 50%;
  font-size: 11px; font-weight: 900;
}
.avery-callout-txt {
  font-size: 12.5px; line-height: 1.45; color: #3a3550;
}

/* roster schedule rendered as a sheet grid (inside an xlsx file preview) */
table.roster-sheet tr.more td { color: var(--text-secondary); font-style: italic; }
table.roster-sheet tr.total td { font-weight: 900; background: #fafbfa; border-top: 2px solid var(--border-strong); }

/* ===================== inline Block Kit actions (buttons) ================ */
/* Buttons render INLINE under the message that posed the decision, inside the
   scrolling stream — exactly like Slack renders a Block Kit `actions` block.
   They scroll with the conversation; there is NO fixed button bar above the
   composer. */
.bk-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px;
}
.blockkit-btn {
  border: 1px solid #c4c4c4; background: #fff; color: var(--text-primary);
  border-radius: 4px; padding: 8px 14px; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: var(--font); min-height: 38px;
}
.blockkit-btn:hover { background: var(--bg-hover); border-color: #9a9a9a; }
.blockkit-btn.primary {
  background: var(--brand-btn); border-color: var(--brand-btn); color: #fff;
}
.blockkit-btn.primary:hover { background: var(--brand-btn-hover); border-color: var(--brand-btn-hover); }
.blockkit-btn:disabled { cursor: default; }

/* "spent" state: after a choice is made the row stays in the transcript, but
   the chosen button reads selected and the rest dim out (Slack-after-click). */
.bk-actions.spent .blockkit-btn { cursor: default; }
.blockkit-btn.chosen {
  background: var(--brand-btn); border-color: var(--brand-btn); color: #fff;
  opacity: 1; box-shadow: 0 0 0 2px rgba(0,122,90,.25);
}
.blockkit-btn.chosen.primary { box-shadow: 0 0 0 2px rgba(0,122,90,.25); }
.blockkit-btn.dim { opacity: .45; }

/* CTA card */
.cta-card {
  max-width: 560px; margin: 10px 0 4px;
  border: 1px solid var(--brand-agent); border-radius: 12px; overflow: hidden;
  background: #fff;
}
.cta-card .cta-body { padding: 18px 20px; }
.cta-card .cta-text { font-size: 15px; line-height: 1.5; margin-bottom: 14px; font-weight: 600; }
.cta-card a.cta-btn {
  display: inline-block; background: var(--brand-btn); color: #fff;
  text-decoration: none; padding: 10px 18px; border-radius: 6px;
  font-weight: 800; font-size: 14px;
}
.cta-card a.cta-btn:hover { background: var(--brand-btn-hover); }

/* ============================== composer ================================= */
/* The composer is the LAST flex child of .main and is always pinned at the
   bottom of the visible viewport. On iOS the safe-area inset keeps it clear of
   the home indicator. The message stream above it scrolls; the composer never
   hides behind Safari's toolbar (the shell is sized in dvh). */
.composer {
  flex: 0 0 auto; display: flex; gap: 8px; align-items: center;
  margin: 4px 16px 0; border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 8px 10px; background: #fff;
  margin-bottom: calc(8px + env(safe-area-inset-bottom));
}
.composer-input {
  flex: 1; border: none; outline: none;
  font-size: 16px;   /* >=16px prevents iOS Safari auto-zoom on focus */
  font-family: var(--font);
  background: transparent; color: var(--text-primary);
  min-height: 28px;
}
.composer-send {
  border: none; background: var(--brand-btn); color: #fff;
  width: 44px; height: 44px; border-radius: 8px; cursor: pointer; font-size: 16px;
  flex: 0 0 auto;
}
.composer-send:hover { background: var(--brand-btn-hover); }

/* ============================== restart pill ============================= */
.restart-pill {
  position: fixed; top: 12px; right: 16px; z-index: 50;
  background: rgba(0,0,0,.62); color: #fff; border: none;
  border-radius: 20px; padding: 7px 14px; font-size: 12px; font-weight: 700;
  cursor: pointer; backdrop-filter: blur(4px);
}
.restart-pill:hover { background: rgba(0,0,0,.78); }
.restart-pill .restart-ico { margin-right: 5px; }

/* ===================== mobile Slack workspace bar ======================== */
/* Hidden on desktop — the aubergine sidebar carries the Slack identity there.
   Shown only on mobile (see the responsive block), where the sidebar is hidden. */
.mobile-topbar { display: none; }

/* ============================== responsive ============================== */
/* Mobile (<=768px): Slack-mobile behavior — the channel goes full width and
   the sidebar is hidden (a hidden sidebar is fine for the demo; no hamburger).
   Desktop layout above the breakpoint is unchanged. The shell stays a dvh-
   sized flex/grid so the composer is pinned in the visible viewport and the
   stream scrolls under it, reachable above iOS Safari's toolbar. */
@media (max-width: 768px) {
  .slack-app {
    grid-template-columns: 1fr;
    box-shadow: none;
  }
  .sidebar { display: none; }

  /* Slack-aubergine workspace bar — restores the unmistakable Slack identity the
     hidden sidebar would otherwise take with it (workspace icon + name + #channel,
     in Slack's signature aubergine). This is what makes mobile read as Slack and
     not a generic chat thread. */
  .mobile-topbar {
    display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
    background: var(--brand-accent); color: #fff;
    padding: 9px 14px;
    padding-top: calc(9px + env(safe-area-inset-top));  /* clear the iOS status bar */
    padding-right: 52px;                                 /* clear the floating restart pill */
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .mobile-topbar .mt-ico {
    width: 30px; height: 30px; border-radius: 7px; flex: 0 0 auto;
    background: var(--brand-workspace); color: #fff;
    display: grid; place-items: center; font-weight: 900; font-size: 13px;
  }
  .mobile-topbar .mt-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .mobile-topbar .mt-ws {
    font-weight: 900; font-size: 15px; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mobile-topbar .mt-ch { font-size: 12.5px; color: var(--text-sidebar); }
  .mobile-topbar .mt-ch .hash { opacity: .8; }

  /* the white channel-header is now redundant with the aubergine bar — drop it */
  .channel-header { display: none; }

  /* Bottom-anchor the conversation (iMessage/Slack-mobile style): when there are
     only a few messages, they hug the composer instead of leaving a big whitespace
     gap below a top-aligned stream. This also kills the keyboard-open jank — content
     sits against the composer, so raising the keyboard slides them up together
     rather than shoving the bottom whitespace upward. margin-top:auto collapses to
     0 once messages overflow, so normal scrolling is unaffected. */
  .messages {
    padding: 12px 12px 6px;
    display: flex; flex-direction: column;
  }
  .messages > :first-child { margin-top: auto; }

  /* restart pill collapses to an icon-only circle on phones */
  .restart-pill {
    top: calc(8px + env(safe-area-inset-top)); right: 10px;
    padding: 0; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
  }
  .restart-pill .restart-label { display: none; }
  .restart-pill .restart-ico { margin: 0; font-size: 17px; line-height: 1; }

  /* scale message avatars + body down a touch */
  .msg { grid-template-columns: 32px 1fr; gap: 8px; }
  .msg .avatar, .typing .avatar { width: 32px; height: 32px; font-size: 18px; }
  .typing { grid-template-columns: 32px 1fr; gap: 8px; }
  .msg .text, .msg .name { font-size: 14.5px; }

  /* rich content shouldn't overflow a narrow screen */
  .blockquote, .file-preview, .draft-email, .code-block, .cta-card { max-width: 100%; }

  /* full-width composer, comfortably clear of the home indicator */
  .composer { margin-left: 8px; margin-right: 8px; }
}