/* ============================================================
   Agency Experience — Environment Tabs (Agency ⇄ Engine Room)
   Recreated from design_handoff_environment_tabs (Pattern #8).
   Tokens scoped to .agency-app so they never leak into the rest
   of the Viva dashboard. Brand font is Inter (Viva's app font),
   swapped in for the handoff's Plus Jakarta Sans per the handoff
   guidance ("swap for the app's brand font if different").
   ============================================================ */

.agency-app {
  /* Agency accent (violet) — from the handoff token table */
  --primary: #5538e0;
  --primary-2: #7c5cff;
  --primary-tint: #eceaff;       /* active nav row bg (light) */
  --primary-tint-2: #ddd7ff;
  --agency-wash: #f5f3ff;

  /* Engine Room accent (steel blue) — used by its tab */
  --steel: #2f6bed;
  --steel-tint: #e8f0ff;
  --steel-deep: #1f4fb5;
  --eng-side: #14161d;           /* Engine Room dark sidebar */
  --eng-side-2: #1b1e27;
  --eng-hair: rgba(255, 255, 255, .09);

  /* Ink + neutrals */
  --ink: #16151f;                /* primary text */
  --ink-2: #3c3a47;              /* nav label text */
  --muted: #6c6a78;              /* secondary text */
  --muted-2: #93919f;            /* tertiary text */
  --track: #edebf3;              /* tab strip bg, chips, progress track */
  --hair: #ededf2;               /* hairline borders (light) */
  --skel: #eef0f4;               /* skeleton placeholders */

  font-family: var(--ai-font, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: #fff;
}

.agency-app *,
.agency-app *::before,
.agency-app *::after { box-sizing: border-box; }

/* ==================== EMBEDDED MODE (two-shell rebuild) ====================
   Agency now renders inside the standard .ai-* shell (it's the Marketing
   Manager intelligence altitude), not as its own full-screen .vv-* app. Keep
   the .agency-app token scope but neutralise the full-screen layout so the
   panes flow inside .ai-main-content-scroll. The old tabstrip/vv-sidebar/
   vv-topbar markup is retired (no longer in agency.html). */
.agency-app.agency-embedded {
  display: block;
  height: auto;
  overflow: visible;
  background: transparent;
}
.agency-home { max-width: 1120px; margin: 0 auto; padding: 22px 28px 40px; }

/* Horizontal pane sub-nav (replaces the old vertical vv-sidebar nav) */
.agency-subnav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 22px;
}
.agency-subnav-btn {
  appearance: none;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.agency-subnav-btn:hover { color: var(--ink); }
.agency-subnav-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.agency-subnav-btn .vv-badge {
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.5;
}
.agency-app.agency-embedded .vv-content-inner { padding: 0; }

/* ==================== TAB STRIP (pinned top) ==================== */
.vv-tabstrip {
  height: 64px;
  flex: 0 0 64px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 0 18px;
  background: #eceaf3;
}

/* Brand lockup (left) — reserved for future multi-location switcher */
.vv-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 14px 6px;
  flex: 0 0 auto;
}
.vv-brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(150deg, #7c5cff 0%, #5b3fe0 60%, #4226c4 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px -6px rgba(82, 52, 224, .7);
  flex: 0 0 auto;
}
.vv-brand-name { font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }

/* Each folder tab */
.vv-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 250px;
  height: 100%;
  padding: 0 26px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  background: transparent;
  border-top: 3px solid transparent;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  position: relative;
  transition: background .14s ease, border-color .14s ease;
}
.vv-tab:hover:not(.active) { background: rgba(255, 255, 255, .45); }

.vv-tab-chip {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(20, 18, 40, .07);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transition: background .14s ease;
}
.vv-tab-chip svg { width: 19px; height: 19px; color: var(--muted); }

.vv-tab-text { text-align: left; line-height: 1.15; }
.vv-tab-label { display: block; font-size: 15.5px; font-weight: 800; color: var(--muted); }
.vv-tab-sub   { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted-2); }

/* Active tab — white body connection + accent top border */
.vv-tab.active { background: #fff; }
.vv-tab.active .vv-tab-label { color: var(--ink); }

/* Agency tab accent */
.vv-tab[data-world="agency"].active { border-top-color: var(--primary); }
.vv-tab[data-world="agency"].active .vv-tab-chip { background: var(--primary); }
.vv-tab[data-world="agency"].active .vv-tab-chip svg { color: #fff; }
.vv-tab[data-world="agency"].active .vv-tab-sub { color: var(--primary); }

/* Engine Room tab accent (steel) */
.vv-tab[data-world="operator"].active { border-top-color: var(--steel); }
.vv-tab[data-world="operator"].active .vv-tab-chip { background: var(--steel); }
.vv-tab[data-world="operator"].active .vv-tab-chip svg { color: #fff; }
.vv-tab[data-world="operator"].active .vv-tab-sub { color: var(--steel); }

/* ==================== BODY ==================== */
.vv-body {
  display: flex;
  flex: 1;
  min-height: 0;
  /* the 120–150ms re-skin transition the handoff recommends */
  transition: background .15s ease;
}

/* ---------- Sidebar ---------- */
.vv-sidebar {
  width: 266px;
  flex: 0 0 266px;
  padding: 18px 16px 16px;
  background: #fff;
  border-right: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  transition: background .15s ease, border-color .15s ease;
}
.vv-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: var(--primary);
  padding: 0 11px;
  margin-bottom: 10px;
}
.vv-nav { display: flex; flex-direction: column; gap: 2px; }

/* Nav row */
.vv-navrow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  transition: background .12s ease, color .12s ease;
}
.vv-navrow svg { width: 18px; height: 18px; color: var(--muted-2); flex: 0 0 auto; }
.vv-navrow:hover:not(.active) { background: #f6f5fb; }
.vv-navrow .vv-navrow-label { flex: 1; }
.vv-navrow.active { background: var(--primary-tint); color: var(--primary); font-weight: 700; }
.vv-navrow.active svg { color: var(--primary); }

/* Badge (e.g. Plays "2") */
.vv-badge {
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--primary);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* Sidebar footer */
.vv-sidefoot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}
.vv-sidefoot svg { width: 16px; height: 16px; color: var(--muted); }
.vv-sidefoot a { color: var(--muted); text-decoration: underline; }

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

/* Top bar */
.vv-topbar {
  height: 66px;
  flex: 0 0 66px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  border-bottom: 1px solid var(--hair);
  background: #fff;
  transition: background .15s ease, border-color .15s ease;
}
.vv-search {
  flex: 1;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  background: #f4f4f8;
  border: none;
  border-radius: 12px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--muted);
  cursor: text;
}
.vv-search svg { width: 17px; height: 17px; color: var(--muted); flex: 0 0 auto; }
.vv-search .vv-search-text { color: var(--muted); }
.vv-kbd {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 2px 7px;
  font-family: inherit;
}
.vv-ai-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: none;
  cursor: pointer;
  border-radius: 11px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(120deg, #7c5cff, #5538e0);
  box-shadow: 0 6px 16px -7px rgba(85, 56, 224, .8);
}
.vv-ai-btn svg { width: 16px; height: 16px; }
.vv-icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  color: var(--ink-2);
}
.vv-icon-btn:hover { background: #f4f4f8; }
.vv-icon-btn svg { width: 19px; height: 19px; }
.vv-avatar {
  width: 40px;
  height: 40px;
  border-radius: 99px;
  background: linear-gradient(150deg, #7c5cff, #5538e0);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* Content */
.vv-content {
  flex: 1;
  overflow-y: auto;
  padding: 30px 34px;
  background: #fbfbfd;
  transition: background .15s ease;
}
.vv-content-inner { max-width: 1040px; margin: 0 auto; }

/* ==================== PANES ==================== */
.vv-pane-header { margin-bottom: 22px; }
.vv-pane-kind {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--primary);
  margin-bottom: 8px;
}
.vv-pane-title { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.vv-pane-sub { margin: 8px 0 0; font-size: 15.5px; color: var(--muted); max-width: 620px; }

.vv-card {
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 20px;
}
.vv-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.vv-card-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.vv-card-action { font-size: 13.5px; font-weight: 600; color: var(--primary); }

.vv-grid { display: grid; gap: 18px; }
.vv-grid-2 { grid-template-columns: 1.3fr 1fr; }
.vv-grid-3 { grid-template-columns: repeat(3, 1fr); }

.vv-stat-big {
  font-size: 44px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.05;
}
.vv-stat-big .vv-stat-goal { font-size: 22px; color: var(--muted); font-weight: 600; }
.vv-stat-label { font-size: 13px; color: var(--muted); font-weight: 600; }

.vv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--hair);
}
.vv-row:last-child { border-bottom: none; }
.vv-row-key { font-size: 14px; color: var(--ink-2); }
.vv-row-val { font-size: 15px; font-weight: 700; color: var(--ink); }

/* Pills */
.vv-pill {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--track);
  color: var(--ink-2);
}
.vv-pill.good { background: rgba(34, 160, 90, .12); color: #178048; }
.vv-pill.mute { background: var(--track); color: var(--ink-2); }

/* Progress bar */
.vv-bar { height: 7px; width: 100%; background: var(--track); border-radius: 99px; overflow: hidden; }
.vv-bar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #6f54ff, #9a7bff); }

/* Plan/Calendar — phased 90-day roadmap (the SDR-walkable artifact) */
.vv-phases { margin-top: 6px; }
.vv-phase { position: relative; padding: 0 0 20px 40px; }
.vv-phase:last-child { padding-bottom: 0; }
.vv-phase::before {
  content: ''; position: absolute; left: 14px; top: 26px; bottom: -2px;
  width: 2px; background: var(--track);
}
.vv-phase:last-child::before { display: none; }
.vv-phase-no {
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 99px;
  background: var(--primary-tint); color: var(--primary);
  font-weight: 800; font-size: 13px; display: grid; place-items: center;
}
.vv-phase-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 4px; }
.vv-phase-summary { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.55; }

/* Plan editor (Phase 2b) — form inputs inside the modal */
.vv-inp {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  border: 1px solid var(--hair); border-radius: 9px;
  font: inherit; font-size: 14px; color: var(--ink); background: #fff; margin-bottom: 8px;
}
.vv-inp:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.vv-form-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin: 12px 0 5px; }
.vv-form-2 { display: flex; gap: 12px; }
.vv-form-2 > div { flex: 1; }
.vv-obj-edit { border: 1px solid var(--hair); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.vv-obj-edit .vv-inp:last-child { margin-bottom: 0; }

/* Activity / approval rows */
.vv-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair);
}
.vv-list-row:last-child { border-bottom: none; }
.vv-check {
  width: 22px; height: 22px; border-radius: 99px;
  background: var(--primary-tint); color: var(--primary);
  display: grid; place-items: center; flex: 0 0 auto;
}
.vv-check svg { width: 13px; height: 13px; }

.vv-livedot {
  width: 8px; height: 8px; border-radius: 99px; background: #25b06a;
  box-shadow: 0 0 0 0 rgba(37, 176, 106, .5);
  animation: vvpulse 2s infinite; flex: 0 0 auto;
}
@keyframes vvpulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 176, 106, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(37, 176, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 176, 106, 0); }
}

.vv-btn-primary {
  border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700;
  color: #fff; background: var(--primary); border-radius: 9px; padding: 8px 14px;
}
.vv-btn-ghost {
  border: 1px solid var(--hair); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--ink-2); background: #fff; border-radius: 9px; padding: 8px 14px;
}

/* Demand score ring/columns */
.vv-demand-grid { display: grid; grid-template-columns: 200px 1fr; gap: 36px; align-items: center; }
.vv-demand-score { text-align: center; border-right: 1px solid var(--hair); }
.vv-demand-score .num { font-size: 76px; font-weight: 800; color: var(--ink); line-height: 1; }
.vv-demand-score .lbl { font-size: 12px; letter-spacing: 0.12em; color: var(--muted); font-weight: 700; margin-top: 6px; }
.vv-demand-rows { display: flex; flex-direction: column; gap: 15px; }
.vv-demand-row .vv-demand-row-head { display: flex; justify-content: space-between; margin-bottom: 6px; }
.vv-demand-row .k { font-size: 14px; color: var(--ink-2); font-weight: 500; }
.vv-demand-row .v { font-size: 14px; font-weight: 700; color: var(--ink); }

/* Skeleton */
.vv-skel { background: var(--skel); border-radius: 6px; height: 12px; width: 100%; }

/* Subtle loading shimmer for data-bound numbers */
.vv-loading { color: var(--muted-2); }

/* ==================== Responsive ==================== */
@media (max-width: 860px) {
  .vv-tab { min-width: 0; padding: 0 16px; }
  .vv-tab-text { display: none; }
  .vv-sidebar { width: 220px; flex-basis: 220px; }
  .vv-grid-2, .vv-grid-3 { grid-template-columns: 1fr; }
  .vv-demand-grid { grid-template-columns: 1fr; }
  .vv-demand-score { border-right: none; border-bottom: 1px solid var(--hair); padding-bottom: 18px; }
}
@media (max-width: 640px) {
  .vv-brand-name { display: none; }
  .vv-content { padding: 20px 16px; }
  .vv-search { max-width: none; }
  .vv-ai-btn span { display: none; }
}

/* ---- Plays: Review modal definition rows (v20260619a) ---- */
.vv-review-meta {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line, #ececf4);
}
.vv-review-meta:last-child { border-bottom: 0; }
.vv-review-meta .k {
  flex: 0 0 92px;
  color: var(--muted, #8a8aa0);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .5px;
  padding-top: 2px;
}
.vv-review-meta .v { color: var(--ink-2, #3a3a52); }