/* ========================================================================
   Fathom Clone — quatrodois design system (light + dark).
   Toggle via html.dark (JS: static/theme.js grava localStorage 'theme').
   ======================================================================== */

html { color-scheme: light; }
html.dark { color-scheme: dark; }

:root {
  /* Surfaces */
  --bg: #faf8f3;
  --surface: #f3f0e7;
  --surface-2: #ebe7d9;
  --surface-3: #e0dccb;
  --surface-hover: #f0ede2;

  /* Borders */
  --border: #e0dccb;
  --border-strong: #c9c3ac;

  /* Text */
  --fg: #1c1b16;
  --fg-2: #1c1b16;
  --muted: #5c5a52;
  --muted-2: #8e8c7d;

  /* Primary (quatrodois indigo) */
  --primary: #4c6ef5;
  --primary-hover: #3b5bdb;
  --primary-fg: #ffffff;
  --primary-tint: #eef2ff;
  --primary-border: #c7d2fe;
  --primary-text: #4338ca;

  /* Source-specific accents (kept for tag chips) */
  --meet: #10b981;      /* green (was Google blue) */
  --fathom: #4c6ef5;    /* indigo */
  --ok: #10b981;
  --warn: #f59e0b;
  --err: #ef4444;

  --radius: 4px;
  --radius-sm: 3px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

  --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --header-h1: 52px;
  --header-h2: 40px;
}

html.dark {
  /* Surfaces (dark, matching quatrodois-mcp-server) */
  --bg: #0a0a0a;
  --surface: #181818;
  --surface-2: #1f1f1f;
  --surface-3: #262626;
  --surface-hover: #232323;

  --border: #1f1f1f;
  --border-strong: #2e2e2e;

  --fg: #f5f0e8;
  --fg-2: #e8e2d5;
  --muted: #8a8a85;
  --muted-2: #5c5c58;

  --primary-tint: #11142a;
  --primary-border: #1d2548;
  --primary-text: #a3b4ff;

  --ok: #22c55e;
  --meet: #22c55e;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}
/* Invert quatrodois logo em dark (letras pretas → claras, mantém verde da pill) */
html.dark img[alt="quatrodois"] { filter: invert(1) hue-rotate(180deg); }

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, kbd { font-family: var(--mono); font-size: 13px; }
kbd { background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 5px; font-size: 11px; }
h1, h2, h3, h4 { color: var(--fg); font-weight: 600; }
h1 { font-size: 22px; margin: 12px 0 12px; letter-spacing: -0.01em; }
h2 { font-size: 13px; margin: 24px 0 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
h3 { font-size: 14px; margin: 16px 0 8px; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}
header .container { padding: 0 40px; }

/* ========================================================================
   HEADER — 2 rows estilo Fathom (linha 1: brand+search+user; linha 2: tabs)
   ======================================================================== */
header {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.topbar-main {
  height: var(--header-h1);
  border-bottom: 1px solid var(--border);
}
.topbar-main .container {
  display: flex; align-items: center; gap: 16px;
  height: 100%;
}
.brand {
  color: var(--fg);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
}
.brand-mark {
  width: 20px; height: 20px;
  background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
  border-radius: 4px;
  display: inline-block;
  transform: rotate(45deg);
}
.brand:hover { text-decoration: none; color: var(--fg); }

.header-search {
  flex: 1;
  max-width: 560px;
  position: relative;
  isolation: isolate;
}
.header-search input {
  width: 100%;
  background: var(--surface-2);
  position: relative;
  z-index: 0;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px 8px 36px;
  font: 13.5px var(--font);
  line-height: 1.4;
  margin: 0;
  outline: none;
  transition: all 0.12s ease;
}
.header-search input::placeholder { color: var(--muted); }
.header-search input:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--primary-tint);
}
.header-search::before {
  content: "";
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5a52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}

.usermenu {
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
  margin-left: auto;
}
.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase;
  object-fit: cover;
  flex-shrink: 0;
}
img.avatar { background: var(--surface-2); }
.hi {
  color: var(--muted);
  font-size: 13px;
  max-width: 180px;
  overflow: hidden; text-overflow: ellipsis;
}
.link-mini { color: var(--muted); font-size: 12px; font-weight: 500; }
.link-mini:hover { color: var(--fg); text-decoration: none; }

/* User menu dropdown */
.usermenu-dd { position: relative; margin-left: auto; }
.usermenu-dd > summary {
  cursor: pointer; list-style: none;
  padding: 4px 8px; border-radius: 8px;
  transition: background 0.15s;
}
.usermenu-dd > summary::-webkit-details-marker { display: none; }
.usermenu-dd > summary::marker { display: none; }
.usermenu-dd > summary:hover { background: var(--surface-2); }
.usermenu-dd[open] > summary { background: var(--surface-2); }
.usermenu .chev { transition: transform 0.15s; opacity: 0.6; }
.usermenu-dd[open] .usermenu .chev { transform: rotate(180deg); }
.usermenu-chev { color: var(--muted); transition: transform 0.15s; flex-shrink: 0; }
.usermenu-dd[open] .usermenu-chev { transform: rotate(180deg); }

.usermenu-panel {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  padding: 8px; min-width: 260px; z-index: 100;
}
.usermenu-header {
  display: flex; gap: 12px; align-items: center;
  padding: 8px 8px 12px;
}
.usermenu-header .avatar.big { width: 40px; height: 40px; font-size: 16px; }
.usermenu-name { font-weight: 600; font-size: 14px; }
.usermenu-email { font-size: 12px; }
.usermenu-sep { height: 1px; background: var(--border); margin: 4px 0; }
.usermenu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 6px;
  color: var(--fg); font-size: 13px; text-decoration: none;
  transition: background 0.1s;
}
.usermenu-item:hover { background: var(--surface-2); text-decoration: none; }
.usermenu-item svg { flex-shrink: 0; opacity: 0.7; }
.usermenu-btn {
  background: transparent; border: 0;
  width: 100%; cursor: pointer; font: inherit;
  text-align: left;
}
/* Toggle sun/moon icons + labels — dark class no <html> muda o par visível */
.theme-icon-moon, .theme-label-dark { display: none; }
html.dark .theme-icon-sun, html.dark .theme-label-light { display: none; }
html.dark .theme-icon-moon, html.dark .theme-label-dark { display: inline-block; }

.topbar-tabs {
  height: var(--header-h2);
}
.topbar-tabs .container {
  display: flex; align-items: stretch; height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.topbar-tabs .container::-webkit-scrollbar { display: none; }
.tabs {
  display: flex; align-items: stretch; gap: 4px;
  min-width: 0;
}
.tab {
  display: flex; align-items: center;
  padding: 0 14px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s ease;
}
.tab:hover { color: var(--fg); text-decoration: none; }
.tab.active {
  color: var(--fg);
  border-bottom-color: var(--primary);
  font-weight: 600;
}
.tab .badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px; font-weight: 700;
  color: var(--primary);
  background: var(--primary-tint);
  padding: 1px 6px; border-radius: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ========================================================================
   COMMON
   ======================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.card h1 { margin-top: 0; }
.card h2 {
  margin-top: 22px; border-bottom: 1px solid var(--border); padding-bottom: 6px;
}
.card > h2:first-child { margin-top: 0; }

.btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--fg);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.12s ease;
}
.btn:hover { background: var(--surface-3); text-decoration: none; border-color: var(--muted-2); }
.btn.primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-fg); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

textarea, input[type=text], input[type=search], input[type=password], input[type=email], select {
  width: 100%;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 9px 12px;
  font: 14px/1.4 var(--font);
  margin-bottom: 8px;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
textarea:focus, input:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
}
label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 4px; font-weight: 500; }
.hint { font-size: 12px; color: var(--muted); margin-top: -4px; margin-bottom: 8px; }
.muted { color: var(--muted); }

.alert { padding: 12px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 14px; }
.alert.ok { background: rgba(63, 185, 80, 0.1); border: 1px solid rgba(63, 185, 80, 0.3); color: #7ee787; }
.alert.warn { background: rgba(210, 153, 34, 0.1); border: 1px solid rgba(210, 153, 34, 0.3); color: #e3b341; }
.error { background: rgba(248, 81, 73, 0.1); border: 1px solid rgba(248, 81, 73, 0.3); padding: 12px; border-radius: 8px; margin: 12px 0; color: #ff7b72; }

table { width: 100%; border-collapse: collapse; margin-top: 8px; }

/* Health blocks no dashboard */
.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 8px; }
.health-block { background: var(--surface-2); padding: 14px 16px; border-radius: 8px; border: 1px solid var(--border); }
.health-block h3 { margin: 0 0 10px; font-size: 14px; }
.health-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0; }
.health-label { flex: 0 0 130px; color: var(--fg-2); }
.health-track { flex: 1; background: var(--surface); border-radius: 4px; height: 8px; overflow: hidden; }
.health-fill { height: 100%; background: var(--primary); transition: width 0.3s; }
.health-count { color: var(--fg-3); font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; }

/* Pagination */
.pagination {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  justify-content: center; margin: 24px 0 8px; padding: 12px 0;
  border-top: 1px solid var(--border);
}
.pagination .pg-btn, .pagination .pg-num {
  min-width: 32px; height: 32px; padding: 0 10px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 6px;
  font-size: 13px; color: var(--fg-2); text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border);
  transition: background 0.15s;
}
.pagination .pg-btn:hover, .pagination .pg-num:hover {
  background: var(--surface); color: var(--fg);
}
.pagination .pg-btn.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.pagination .pg-num.current {
  background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600;
}
.pagination .pg-ellipsis { padding: 0 6px; color: var(--fg-3); }
.pagination .pg-per {
  display: inline-flex; gap: 6px; align-items: center;
  margin-left: 16px; padding-left: 12px; border-left: 1px solid var(--border);
  font-size: 13px; color: var(--fg-3);
}
.pagination .pg-per select { padding: 4px 8px; font-size: 13px; margin: 0; }
@media (max-width: 480px) {
  .pagination { gap: 2px; font-size: 12px; }
  .pagination .pg-btn, .pagination .pg-num { min-width: 28px; height: 28px; padding: 0 6px; font-size: 12px; }
  .pagination .pg-per { margin-left: 8px; padding-left: 6px; width: 100%; justify-content: center; margin-top: 8px; border-left: none; border-top: 1px solid var(--border); padding-top: 8px; }
}

/* Recent-calls: horizontal scroll em telas apertadas + esconde colunas
   secundárias em Z Fold cover screen (~370px). */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table.recent-calls {
  min-width: 720px;
  font-size: 13px;
}
.table-wrap table.recent-calls th,
.table-wrap table.recent-calls td {
  white-space: nowrap;
  padding: 8px 10px;
}
.table-wrap table.recent-calls td:nth-child(2) {
  white-space: normal;
  max-width: 260px;
}
@media (max-width: 780px) {
  .table-wrap table.recent-calls { min-width: 480px; }
  .table-wrap table.recent-calls .col-fathom,
  .table-wrap table.recent-calls .col-company,
  .table-wrap table.recent-calls .col-drive { display: none; }
}
@media (max-width: 480px) {
  .table-wrap table.recent-calls { min-width: 0; font-size: 12px; }
  .table-wrap table.recent-calls .col-date { display: none; }
  .table-wrap table.recent-calls td:nth-child(2) { max-width: 150px; }
}
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { color: var(--muted); font-weight: 500; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; }
td.err { color: var(--err); font-size: 12px; }

.pill { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface-3); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pill.status-uploaded, .pill.status-completed, .pill.status-idle { background: rgba(63, 185, 80, 0.15); color: #7ee787; }
.pill.status-running, .pill.status-polling, .pill.status-ingesting,
.pill.status-downloading_video, .pill.status-downloading_meta,
.pill.status-uploading, .pill.status-discovering { background: rgba(47, 129, 247, 0.15); color: #79c0ff; }
.pill.status-failed { background: rgba(248, 81, 73, 0.15); color: #ff7b72; }
.pill.status-cancelled, .pill.status-skipped { background: var(--surface-3); color: var(--muted); }
.pill.status-pending { background: var(--surface-3); color: var(--muted); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.stat { background: var(--surface-2); padding: 14px; border-radius: 8px; text-align: center; border: 1px solid var(--border); }
.stat-num { font-size: 26px; font-weight: 700; color: var(--fg); }
.stat-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; font-weight: 600; }

.check { list-style: none; padding: 0; }
.check li { padding-left: 24px; position: relative; margin: 6px 0; font-size: 14px; }
.check li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }

.steps { padding-left: 22px; }
.steps li { margin: 8px 0; font-size: 14px; }

pre.code {
  background: var(--bg);
  padding: 12px; border-radius: 8px;
  overflow-x: auto;
  font-size: 12.5px;
  border: 1px solid var(--border);
  color: var(--fg-2);
}
pre.prose {
  white-space: pre-wrap;
  background: transparent;
  padding: 4px 0;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg);
}
pre.transcript {
  white-space: pre-wrap;
  background: var(--surface-2);
  padding: 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  max-height: 600px;
  overflow-y: auto;
  color: var(--fg-2);
  border: 1px solid var(--border);
}

/* Markdown/HTML-rendered summary (Fathom sends structured Markdown) */
.prose.rendered {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg);
}
.prose.rendered h1, .prose.rendered h2 {
  font-size: 18px;
  margin: 22px 0 10px;
  color: var(--fg);
  font-weight: 600;
}
.prose.rendered h3 {
  font-size: 15px;
  margin: 16px 0 6px;
  color: var(--fg);
  font-weight: 600;
}
.prose.rendered p { margin: 8px 0; }
.prose.rendered ul, .prose.rendered ol { margin: 8px 0 12px 20px; }
.prose.rendered li { margin: 4px 0; }
.prose.rendered a { color: var(--primary); text-decoration: none; }
.prose.rendered a:hover { text-decoration: underline; }
/* Fathom envelopa cada bullet num <a href=timestamp>. O texto dentro da bullet
   deve manter cor normal — só o hover indica que é clicável. */
.prose.rendered li > a,
.prose.rendered p > a:only-child {
  color: var(--fg);
  text-decoration: none;
}
.prose.rendered li > a:hover,
.prose.rendered p > a:only-child:hover {
  color: var(--primary);
}
.prose.rendered strong { color: var(--fg); font-weight: 600; }
.prose.rendered code {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13px;
}
.prose.rendered blockquote {
  border-left: 3px solid var(--primary);
  padding: 4px 12px;
  margin: 10px 0;
  color: var(--fg-2);
}

/* Transcript rendered (Fathom HTML or Meet timestamped lines) */
.transcript-rendered {
  background: var(--surface-2);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
}
.transcript-rendered a { color: var(--primary); text-decoration: none; }
.transcript-rendered a:hover { text-decoration: underline; }
.transcript-rendered p { margin: 6px 0; }
.transcript-rendered p.ts-line {
  margin-top: 16px;
  margin-bottom: 2px;
}
.transcript-rendered .ts,
.transcript-rendered p.ts-line > a:first-child {
  color: var(--primary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
  cursor: default;
}
.transcript-rendered b { color: var(--fg); font-weight: 600; }
.transcript-rendered h1 {
  font-size: 16px;
  color: var(--fg);
  margin: 0 0 8px;
  font-weight: 600;
}
.link { color: var(--primary); font-size: 12px; margin-left: 6px; }

/* ========================================================================
   FEED
   ======================================================================== */
.feed-header {
  display: flex; justify-content: space-between; align-items: center;
  margin: 20px 0 4px; flex-wrap: wrap; gap: 12px;
}
.feed-header .search {
  display: flex; gap: 8px; flex: 1; max-width: 720px; align-items: center;
}
.feed-header .search input[type=text] { flex: 1; margin-bottom: 0; }
.feed-header .search select { width: auto; min-width: 140px; margin-bottom: 0; }

.chip { padding: 4px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--fg-2); }
.chip.active { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }
.chip a { color: inherit; margin-left: 4px; font-weight: 700; }

.ts-link {
  display: inline-block; margin: 0 4px; padding: 1px 6px;
  font-size: 11px; font-family: ui-monospace, monospace;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; color: var(--primary); text-decoration: none;
  vertical-align: baseline;
}
.ts-link:hover { background: var(--primary-tint); }
.ts-link.muted { color: var(--muted); }

.action-items-list { list-style: none; padding: 0; margin: 0; }
.action-items-list li { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.action-items-list li:last-child { border-bottom: none; }

/* Call detail header */
.call-header-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap;
}
.call-header-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

/* Tab strip + inline toolbar (Copy Summary/Follow-up) */
.call-tabs-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.call-tabs-row .call-tabs { border-bottom: none; margin-bottom: 0; }
.tab-toolbar { display: flex; gap: 6px; padding-bottom: 6px; }

.icon-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--fg-2); padding: 4px 10px; font-size: 12px;
  border-radius: 6px; cursor: pointer; line-height: 1.4;
}
.icon-btn:hover { background: var(--surface-2); color: var(--fg-1); }

/* Share modal (native <dialog>) */
.share-modal {
  background: var(--surface-2); color: var(--fg-1);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 0; max-width: 520px; width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.share-modal::backdrop {
  background: rgba(0,0,0,.6); backdrop-filter: blur(2px);
}
.share-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.share-modal-section {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.share-modal-section:last-child { border-bottom: none; }

/* Settings tabs (compartilhado entre /settings /teams /users) */
.settings-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin: 12px 0 24px;
}
.settings-tab {
  padding: 10px 16px; font-size: 14px; color: var(--fg-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  text-decoration: none; font-weight: 500;
}
.settings-tab:hover { color: var(--fg-1); }
.settings-tab.active {
  color: var(--primary); border-bottom-color: var(--primary);
}

.feed-period {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 28px 0 14px; font-weight: 700;
}

.feed-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

.call-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  color: var(--fg); text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.call-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
  text-decoration: none;
}
.call-card .thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 30% 20%, rgba(167, 139, 250, 0.25), transparent 45%),
    linear-gradient(135deg, #1c2129 0%, #2d1b4e 100%);
  background-size: cover;
  background-position: center;
  display: flex; align-items: center; justify-content: center;
}
/* Overlay play button (círculo com ▶ dentro) — sempre visível, tanto com quanto sem thumbnail */
.call-card .thumb::after {
  content: "▶";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  font-size: 16px;
  padding-left: 3px; /* compensa peso ótico do triângulo */
  backdrop-filter: blur(4px);
  transition: transform 0.15s ease, background 0.15s ease;
  pointer-events: none;
}
.call-card:hover .thumb::after {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(167, 139, 250, 0.85);
  color: #fff;
}
.call-card .meta { padding: 14px 16px 16px; }
.call-card .title {
  font-weight: 600; font-size: 14.5px; margin-bottom: 5px; line-height: 1.35;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.call-card .sub { font-size: 12.5px; color: var(--muted); }
.duration {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 3px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600;
}

.source-badge {
  position: absolute; top: 8px; left: 8px;
  padding: 3px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  color: white;
}
.source-badge.meet { background: var(--meet); }
.source-badge.fathom { background: var(--fathom); color: #0d1117; }
.source-badge.inline { position: static; }

.empty-state { text-align: center; padding: 60px 20px; }
.empty-state h2 { border: none; text-transform: none; letter-spacing: normal; color: var(--fg); font-size: 20px; }

/* ========================================================================
   CALL DETAIL
   ======================================================================== */
.call-header { margin: 16px 0 8px; }
.breadcrumb { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--fg); }
.call-title {
  font-size: 24px; margin: 4px 0 8px; line-height: 1.25;
  font-weight: 700; letter-spacing: -0.01em;
}
.call-sub {
  font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

.call-layout {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  margin-top: 16px;
}
.call-main .player {
  background: #000; border-radius: var(--radius); overflow: hidden;
  margin-bottom: 16px; box-shadow: var(--shadow);
}
.call-main .player iframe { display: block; border: 0; width: 100%; }

.call-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border); margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.call-tabs::-webkit-scrollbar { display: none; }
.call-tabs .tab {
  padding: 10px 16px; color: var(--muted); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
}
.call-tabs .tab:hover { color: var(--fg); text-decoration: none; }
.call-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.call-tab-content { min-height: 200px; padding: 8px 0; }
.call-tab-content h2, .call-tab-content h3 {
  color: var(--fg);
  text-transform: none;
  letter-spacing: normal;
  border: none;
  padding: 0;
  margin-top: 20px;
  font-size: 16px;
}

.meta-table { width: 100%; }
.meta-table th {
  text-align: left; color: var(--muted); font-size: 12px;
  padding: 10px 16px 10px 0; width: 200px; font-weight: 500;
  text-transform: none; letter-spacing: normal;
  vertical-align: top;
}
.meta-table td { padding: 10px 0; font-size: 13.5px; word-break: break-word; }
.meta-table code { font-size: 12px; background: var(--surface-2); padding: 2px 6px; border-radius: 4px; }

.call-sidebar { display: flex; flex-direction: column; gap: 12px; }
.call-sidebar .card { padding: 16px; margin: 0; }
.call-sidebar .card h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-top: 0; font-weight: 700;
}
.related-list { list-style: none; padding: 0; margin: 0; }
.related-list li { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.related-list li:last-child { border-bottom: none; }
.related-list a { font-weight: 500; color: var(--fg); }
.related-list a:hover { color: var(--primary); text-decoration: none; }

/* ========================================================================
   COMPANIES
   ======================================================================== */
.company-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
.company-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
  color: var(--fg); text-decoration: none;
  transition: all 0.15s ease;
}
.company-card:hover { border-color: var(--primary); box-shadow: var(--shadow); text-decoration: none; transform: translateY(-1px); }
.company-domain { font-family: var(--mono); font-size: 14px; margin-bottom: 6px; color: var(--fg); font-weight: 500; }
.company-meta { font-size: 12px; color: var(--muted); }

/* ========================================================================
   RESPONSIVE — Z Fold 7 outer/inner + tablet + desktop
   ======================================================================== */

/* Z Fold 7 outer (folded, portrait ~412dp) */
@media (max-width: 480px) {
  :root { --header-h1: 48px; --header-h2: 38px; }
  .container { padding: 0 16px; }
  header .container { padding: 0 20px; }

  .topbar-main .container { gap: 8px; }
  .brand { font-size: 14px; }
  .brand-mark { width: 18px; height: 18px; }
  .header-search input { padding: 7px 10px 7px 32px; font-size: 13px; }
  .header-search::before { left: 10px; width: 14px; height: 14px; }
  .hi { display: none; }              /* esconde e-mail no topo — só avatar */
  .usermenu { gap: 6px; }

  .tab { padding: 0 10px; font-size: 13px; }

  h1 { font-size: 20px; }
  .feed-header { flex-direction: column; align-items: stretch; margin-top: 12px; }
  .feed-header .search { flex-direction: column; max-width: none; gap: 6px; }
  .feed-header .search select, .feed-header .search .btn { width: 100%; }

  .call-title { font-size: 20px; }
  .call-header { margin-top: 8px; }
  .call-main .player iframe { height: 220px; }

  .card { padding: 14px; margin-bottom: 12px; }
  .meta-table th { width: 130px; padding-right: 8px; font-size: 11px; }
  .meta-table td { font-size: 12.5px; }
}

/* Z Fold 7 outer landscape / unfolded portrait split (~380-780dp) */
@media (min-width: 481px) and (max-width: 780px) {
  .feed-grid { grid-template-columns: repeat(2, 1fr); }
  .company-grid { grid-template-columns: repeat(2, 1fr); }
  .call-main .player iframe { height: 320px; }
  .hi { max-width: 120px; }
}

/* Z Fold 7 unfolded (~842dp) / small tablets */
@media (min-width: 781px) and (max-width: 1100px) {
  .feed-grid { grid-template-columns: repeat(3, 1fr); }
  .company-grid { grid-template-columns: repeat(3, 1fr); }
  .call-layout { grid-template-columns: 1fr 280px; }
  .call-main .player iframe { height: 420px; }
}

/* Desktop */
@media (min-width: 1101px) {
  .feed-grid { grid-template-columns: repeat(4, 1fr); }
  .company-grid { grid-template-columns: repeat(4, 1fr); }
  .call-layout { grid-template-columns: 1fr 320px; }
  .call-main .player iframe { height: 500px; }
}

/* Extra wide */
@media (min-width: 1440px) {
  .feed-grid { grid-template-columns: repeat(5, 1fr); }
}