/* Review Radar v5 — Styles (extracted from v4 monolith, zero changes) */

:root {
  --green: #0ED46E;
  --green-dark: #098846;
  --green-pale: #CCF1D5;
  --dark: #1F263A;
  --gray-4: #4D5866;
  --gray-3: #A3B2BF;
  --gray-2: #D8E1EB;
  --gray-1: #F6F9FB;
  --gray-5: #374151;
  --blue: #4A89FF;
  --red: #EB382F;
  --yellow: #E2B100;
  --orange: #F58B42;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Nunito Sans',sans-serif; background:var(--gray-1); color:var(--dark); }

/* ===== HEADER ===== */
.header { background:var(--dark); padding:14px 32px; display:flex; align-items:center; justify-content:space-between; }
.header-left { display:flex; align-items:center; gap:14px; }
.logo { font-size:18px; font-weight:800; color:var(--green); letter-spacing:-0.5px; }
.hdr-sep { width:1px; height:22px; background:var(--gray-3); opacity:.25; }
.hdr-title { font-size:13px; color:rgba(255,255,255,.7); }
.hdr-right { display:flex; align-items:center; gap:14px; }
.hdr-badge { font-size:10px; font-weight:700; color:var(--green); background:rgba(14,212,110,.12); padding:4px 10px; border-radius:4px; letter-spacing:.5px; }
.hdr-meta { font-size:11px; color:var(--gray-3); }
.hdr-logo { height:24px; width:auto; }

/* ===== TABS ===== */
.tabs { background:#fff; border-bottom:1px solid var(--gray-2); padding:0 32px; display:flex; }
.tab { padding:13px 22px; font-size:13px; font-weight:700; color:var(--gray-3); cursor:pointer; border-bottom:3px solid transparent; transition:.15s; }
.tab:hover { color:var(--gray-4); }
.tab.active { color:var(--green); border-bottom-color:var(--green); }

/* ===== LAYOUT ===== */
.content { max-width:1260px; margin:28px auto; padding:0 28px; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ===== PERIOD SELECTOR ===== */
.period-bar { display:flex; gap:6px; margin-bottom:20px; }
.period-btn { padding:6px 16px; border-radius:20px; border:1px solid var(--gray-2); background:#fff; font-family:inherit; font-size:12px; font-weight:700; color:var(--gray-4); cursor:pointer; transition:.15s; }
.period-btn:hover { border-color:var(--gray-3); }
.period-btn.active { border-color:var(--green); background:var(--green); color:#fff; }

/* ===== SECTION LABEL ===== */
.section-label { font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--gray-3); margin:8px 0 10px; }

/* ===== CARDS ===== */
.card { background:#fff; border:1px solid var(--gray-2); border-radius:12px; padding:24px; margin-bottom:20px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.card-hdr { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.card-title { font-size:18px; font-weight:800; }
.card-sub { font-size:12px; color:var(--gray-3); margin-top:3px; line-height:1.4; }

/* ===== KPI ROW ===== */
.kpi-row { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:22px; }
.kpi { background:#fff; border:1px solid var(--gray-2); border-radius:12px; padding:18px 16px 14px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.kpi-val { font-size:30px; font-weight:800; line-height:1.1; }
.kpi-val.neg { color:var(--red); }
.kpi-val.pos { color:var(--green); }
.kpi-val.warn { color:var(--orange); }
.kpi-lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--gray-3); margin-top:5px; }
.kpi-ctx { font-size:11px; color:var(--gray-4); margin-top:3px; line-height:1.3; }
.kpi-tag { display:inline-block; font-size:10px; font-weight:800; padding:2px 7px; border-radius:4px; margin-top:5px; }
.kpi-tag.bad { background:#FCEEE6; color:#B82C25; }
.kpi-tag.ok { background:#FFF3CD; color:#856404; }
.kpi-tag.good { background:var(--green-pale); color:var(--green-dark); }

/* ===== PERIOD NARRATIVE ===== */
.period-narrative { background:#F7F8FA; border-radius:10px; padding:16px 20px; margin-bottom:12px; font-size:13px; line-height:1.6; color:var(--gray-5); }

/* ===== INSIGHT CARDS ===== */
.insight { display:flex; gap:14px; align-items:flex-start; padding:18px 20px; border-radius:10px; margin-bottom:10px; border-left:4px solid; }
.insight.critical { background:#FEF2F2; border-left-color:var(--red); }
.insight.signal { background:#FEF2F2; border-left-color:var(--red); }
.insight.warning { background:#FFFBEB; border-left-color:var(--yellow); }
.insight.positive { background:#F0FFF4; border-left-color:var(--green); }
.insight.action { background:#EFF6FF; border-left-color:var(--blue); }
.insight-icon { font-size:20px; flex-shrink:0; width:28px; text-align:center; }
.insight-body { flex:1; }
.insight-hl { font-size:14px; font-weight:800; margin-bottom:3px; }
.insight-badge { display:inline-block; font-size:9px; font-weight:800; letter-spacing:0.8px; padding:2px 7px; border-radius:3px; margin-right:6px; vertical-align:middle; background:var(--red); color:#fff; animation: pulse-badge 2s ease-in-out infinite; }
@keyframes pulse-badge { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
.insight-detail { font-size:12px; color:var(--gray-4); line-height:1.5; }

/* ===== RANKING ===== */
.rank-section { margin-bottom:18px; }
.rank-title { font-size:11px; font-weight:700; color:var(--gray-3); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.rank-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--gray-1); }
.rank-row:last-child { border-bottom:none; }
.rank-pos { font-size:16px; font-weight:800; color:var(--gray-3); width:24px; text-align:center; }
.rank-name { font-size:13px; font-weight:700; width:75px; }
.rank-name.hl { color:var(--green); }
.rank-bar-wrap { flex:1; height:22px; background:var(--gray-1); border-radius:5px; overflow:hidden; }
.rank-bar { height:100%; border-radius:5px; }
.rank-val { font-size:13px; font-weight:800; width:55px; text-align:right; }

/* ===== GRIDS ===== */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }

/* ===== COMPETITOR SELECT ===== */
.comp-sel { display:flex; gap:6px; }
.comp-btn { padding:7px 14px; border-radius:8px; border:1px solid var(--gray-2); background:#fff; font-family:inherit; font-size:12px; font-weight:700; color:var(--gray-4); cursor:pointer; transition:.15s; }
.comp-btn:hover { border-color:var(--gray-3); background:var(--gray-1); }
.comp-btn.active { border-color:var(--green); background:var(--green-pale); color:var(--green-dark); }

/* ===== CHART CONTAINERS ===== */
.chart { width:100%; }
#heatmap { height:400px; }
#battlecard { height:460px; }
#radar-gap-wrap { display:flex; gap:0; align-items:stretch; }
#radar { width:65%; height:440px; flex-shrink:0; }
#lollipop { width:35%; height:440px; flex-shrink:0; }
#trend-rating { height:300px; }
#trend-sentiment { height:300px; }
#sunburst { height:700px; }
#geo-map { height:500px; border-radius:8px; position:relative; z-index:0; }

.donut-row { display:flex; justify-content:center; gap:28px; flex-wrap:wrap; }
.donut-item { text-align:center; }
.donut-chart { width:160px; height:160px; }
.donut-lbl { font-size:13px; font-weight:700; color:var(--gray-4); margin-top:6px; }
.donut-val { font-size:11px; color:var(--gray-3); }

.callout { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:8px; background:var(--gray-1); margin-top:14px; }
.callout-num { font-size:26px; font-weight:800; color:var(--green); }
.callout-txt { font-size:12px; color:var(--gray-4); line-height:1.4; }

.insight-item { padding:8px 12px; border-radius:6px; margin-bottom:5px; font-size:12px; line-height:1.5; }
.insight-win { background:var(--green-pale); color:var(--green-dark); }
.insight-lose { background:#FCEEE6; color:#B82C25; }
.insight-lbl { font-weight:800; font-size:10px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }


/* ===== SUB-TABS (Compare v2) ===== */
.sub-tabs { display:flex; gap:4px; margin-bottom:20px; background:var(--gray-1); border-radius:10px; padding:4px; border:1px solid var(--gray-2); width:fit-content; }
.sub-tab { padding:8px 20px; border-radius:8px; font-family:inherit; font-size:12px; font-weight:700; color:var(--gray-3); cursor:pointer; border:none; background:transparent; transition:.15s; }
.sub-tab:hover { color:var(--gray-4); }
.sub-tab.active { background:#fff; color:var(--green); font-weight:800; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.sub-panel { display:none; }
.sub-panel.active { display:block; }

/* ===== REVIEW FEED ===== */
.review-filters { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:20px; flex-wrap:wrap; }
.review-filter-left { display:flex; gap:10px; align-items:center; }
.review-filter-left select { padding:8px 14px; border-radius:8px; border:1px solid var(--gray-2); font-family:inherit; font-size:12px; font-weight:700; color:var(--dark); background:#fff; cursor:pointer; }
.review-filter-right { display:flex; gap:6px; }
.review-sort-bar { display:flex; align-items:center; gap:12px; margin-bottom:16px; font-size:12px; font-weight:700; color:var(--gray-3); }
.review-sort-btns { display:flex; gap:6px; }
.review-count { font-size:12px; color:var(--gray-3); margin-bottom:16px; }
.review-card { background:#fff; border:1px solid var(--gray-2); border-radius:10px; padding:16px; margin-bottom:12px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.review-header { display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.review-stars { font-size:14px; letter-spacing:2px; color:#F5C242; }
.review-author-date { flex:1; }
.review-author { font-size:13px; font-weight:700; color:var(--dark); }
.review-date { font-size:11px; color:var(--gray-3); }
.review-location-badge { display:inline-block; font-size:10px; color:var(--gray-3); background:var(--gray-1); padding:4px 10px; border-radius:4px; }
.review-insights { display:flex; align-items:center; gap:2px; margin-bottom:10px; font-size:12px; font-weight:700; color:var(--gray-4); }
.review-insight { white-space:nowrap; }
.review-insight-sep { color:var(--gray-3); margin:0 4px; }
.review-text { font-size:13px; line-height:1.5; color:var(--dark); margin-bottom:10px; }
.review-text.truncated { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.review-text-expand { font-size:12px; font-weight:700; color:var(--blue); cursor:pointer; margin-bottom:10px; }
.review-topics { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.topic-chip { font-size:11px; font-weight:700; padding:4px 10px; border-radius:6px; }
.topic-chip.pos { background:rgba(14,212,110,.12); color:var(--green-dark); }
.topic-chip.neg { background:rgba(235,56,47,.10); color:var(--red); }
.review-response { border-left:4px solid var(--green); background:#F0FFF4; padding:12px 14px; margin-top:10px; border-radius:6px; font-size:12px; }
.review-response-label { font-weight:700; color:var(--green-dark); margin-bottom:4px; }
.review-response-text { color:var(--dark); line-height:1.4; }
.load-more-btn { display:block; margin:20px auto; padding:10px 24px; border:1px solid var(--gray-2); background:#fff; border-radius:8px; font-family:inherit; font-size:13px; font-weight:700; color:var(--gray-4); cursor:pointer; transition:.15s; }
.load-more-btn:hover { border-color:var(--green); color:var(--green); }

/* ===== RESPONSE INTELLIGENCE ===== */
.ri-gap-card { padding:16px; border:1px solid var(--gray-2); border-radius:10px; margin-bottom:12px; border-left:4px solid var(--red); background:#FEFAFA; }
.ri-gap-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.ri-gap-stars { font-size:13px; color:#F5C242; letter-spacing:1px; }
.ri-gap-meta { font-size:11px; color:var(--gray-3); }
.ri-gap-snippet { font-size:13px; color:var(--dark); font-style:italic; margin-bottom:8px; line-height:1.4; }
.ri-gap-issue { font-size:12px; color:var(--red); font-weight:700; line-height:1.4; }
.ri-best-card { padding:16px; border:1px solid var(--gray-2); border-radius:10px; margin-bottom:12px; border-left:4px solid var(--green); background:#F0FFF4; }
.ri-best-brand { display:inline-block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; padding:3px 8px; border-radius:4px; background:var(--green-pale); color:var(--green-dark); margin-bottom:8px; }
.ri-best-scenario { font-size:12px; color:var(--gray-3); margin-bottom:6px; }
.ri-best-response { font-size:13px; color:var(--dark); font-style:italic; margin-bottom:8px; line-height:1.4; }
.ri-best-why { font-size:12px; color:var(--green-dark); font-weight:700; line-height:1.4; }

/* ===== H2H ENTITY SELECTOR ===== */
.h2h-sel { display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.h2h-sel select { padding:8px 14px; border-radius:8px; border:1px solid var(--gray-2); font-family:inherit; font-size:13px; font-weight:700; color:var(--dark); background:#fff; cursor:pointer; min-width:160px; }
.h2h-sel select:focus { outline:none; border-color:var(--green); }
.h2h-vs { font-size:14px; font-weight:800; color:var(--gray-3); }

/* ===== H2H KPI COMPARE ===== */
.h2h-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.h2h-kpi { background:#fff; border:1px solid var(--gray-2); border-radius:12px; padding:16px; text-align:center; }
.h2h-kpi-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--gray-3); margin-bottom:8px; display:flex; align-items:center; justify-content:center; gap:4px; }
.h2h-kpi-vals { display:flex; justify-content:center; align-items:baseline; gap:8px; }
.h2h-kpi-val { font-size:22px; font-weight:800; }
.h2h-kpi-delta { font-size:12px; font-weight:800; padding:2px 6px; border-radius:4px; }
.h2h-kpi-delta.pos { background:var(--green-pale); color:var(--green-dark); }
.h2h-kpi-delta.neg { background:#FCEEE6; color:#B82C25; }

/* ===== SHARE OF VOICE ===== */
#sov-chart { height:180px; }

/* ===== H2H CHARTS ===== */
#h2h-radar { height:520px; }
#h2h-gap { height:520px; }
#h2h-trend { height:300px; }

/* ===== FEEDBACK PULSE (Briefing) ===== */
.pulse-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--gray-2); border-radius:10px; overflow:hidden; }
.pulse-col { padding:20px 24px; }
.pulse-col.pos-col { background:#F0FFF4; border-right:1px solid var(--gray-2); }
.pulse-col.neg-col { background:#FEF2F2; }
.pulse-col-title { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.pulse-col-title.pos { color:var(--green-dark); }
.pulse-col-title.neg { color:#B82C25; }
.pulse-item { font-size:13px; color:var(--gray-4); line-height:1.6; padding:4px 0; }
.pulse-item strong { color:var(--dark); }

/* ===== KEY STRENGTHS / WEAKNESSES (Explore) ===== */
.sw-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.sw-col { }
.sw-col-title { font-size:13px; font-weight:800; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.sw-col-title.str { color:var(--green-dark); }
.sw-col-title.wk { color:#B82C25; }
.sw-col-title.opp { color:#3B82F6; }
.sw-col-title.thr { color:#F59E0B; }
.sw-entry { padding:14px 16px; border-radius:8px; margin-bottom:10px; }
.sw-entry.str-entry { background:#F0FFF4; border-left:4px solid var(--green); }
.sw-entry.wk-entry { background:#FEF2F2; border-left:4px solid var(--red); }
.sw-entry.opp-entry { background:#EFF6FF; border-left:4px solid #3B82F6; }
.sw-entry.thr-entry { background:#FFFBEB; border-left:4px solid #F59E0B; }
.sw-entry-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.sw-entry-cat { font-size:14px; font-weight:800; color:var(--dark); }
.sw-entry-score { font-size:13px; font-weight:800; }
.sw-entry-score.pos { color:var(--green-dark); }
.sw-entry-score.neg { color:#B82C25; }
.sw-entry-meta { font-size:11px; color:var(--gray-3); margin-bottom:4px; }
.sw-entry-desc { font-size:12px; color:var(--gray-4); line-height:1.5; }

/* ===== FOOTER ===== */
.footer { text-align:center; padding:20px; font-size:11px; color:var(--gray-3); }

/* ===== CHAT ICON (per widget) ===== */
.chat-ask-btn { display:flex; align-items:center; gap:5px; padding:5px 10px; border-radius:8px; border:1px solid var(--gray-2); background:#fff; font-family:inherit; font-size:11px; font-weight:700; color:var(--gray-3); cursor:pointer; transition:.2s; flex-shrink:0; }
.chat-ask-btn:hover { border-color:var(--green); color:var(--green); background:rgba(14,212,110,.06); }
.chat-ask-btn svg { width:14px; height:14px; }

/* ===== CHAT OVERLAY ===== */
.chat-overlay { display:none; position:fixed; top:0; right:0; bottom:0; width:50vw; min-width:800px; background:#fff; box-shadow:-4px 0 24px rgba(0,0,0,.15); z-index:10000; flex-direction:column; border-left:1px solid var(--gray-2); }
.chat-overlay.open { display:flex; }
.chat-overlay-hdr { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:var(--dark); }
.chat-overlay-hdr-left { display:flex; align-items:center; gap:10px; }
.chat-overlay-title { font-size:14px; font-weight:700; color:#fff; }
.chat-overlay-sub { font-size:11px; color:var(--gray-3); }
.chat-overlay-close { background:none; border:none; color:var(--gray-3); font-size:20px; cursor:pointer; padding:4px 8px; border-radius:6px; }
.chat-overlay-close:hover { color:#fff; background:rgba(255,255,255,.1); }
.chat-overlay-body { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.chat-messages { flex:1; overflow-y:auto; padding:20px 24px; display:flex; flex-direction:column; gap:14px; }
.chat-msg { max-width:92%; padding:12px 16px; border-radius:12px; font-size:13px; line-height:1.6; word-wrap:break-word; }
.chat-msg.user { align-self:flex-end; background:var(--green); color:#fff; border-bottom-right-radius:4px; }
.chat-msg.bot { align-self:flex-start; background:var(--gray-1); color:var(--dark); border-bottom-left-radius:4px; border:1px solid var(--gray-2); max-width:96%; }
.chat-msg.bot pre { background:#f0f0f0; padding:8px; border-radius:6px; overflow-x:auto; margin:8px 0; font-size:12px; }
.chat-msg.bot strong { font-weight:700; }
.chat-msg.bot h1,.chat-msg.bot h2,.chat-msg.bot h3 { font-size:15px; font-weight:800; margin:12px 0 6px; color:var(--dark); }
.chat-msg.bot h1 { font-size:17px; }
.chat-msg.bot hr { border:none; border-top:1px solid var(--gray-2); margin:10px 0; }
.chat-msg.bot ul,.chat-msg.bot ol { margin:6px 0; padding-left:20px; }
.chat-msg.bot li { margin-bottom:3px; }
.chat-msg.bot table { border-collapse:collapse; width:100%; margin:10px 0; font-size:12px; }
.chat-msg.bot table th { background:var(--dark); color:#fff; padding:8px 12px; text-align:left; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.3px; }
.chat-msg.bot table td { padding:7px 12px; border-bottom:1px solid var(--gray-2); }
.chat-msg.bot table tr:nth-child(even) td { background:rgba(0,0,0,.02); }
.chat-msg.bot table tr:hover td { background:rgba(14,212,110,.06); }
.chat-msg.typing { font-style:italic; color:var(--gray-3); display:flex; align-items:center; gap:10px; }
.typing-spinner { width:20px; height:20px; border:2.5px solid var(--gray-2); border-top-color:var(--green); border-radius:50%; animation:spin 0.8s linear infinite; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }
.mini-chat { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:transparent; color:var(--gray-3); cursor:pointer; border:1.5px solid var(--gray-2); padding:0; transition:.15s; vertical-align:middle; margin-left:4px; flex-shrink:0; }
.mini-chat:hover { background:var(--green); color:#fff; border-color:var(--green); transform:scale(1.15); }
.mini-chat svg { width:11px; height:11px; }
.chat-dim { display:none; position:fixed; top:0; left:0; bottom:0; right:0; background:rgba(0,0,0,.4); z-index:9999; }
.chat-dim.open { display:block; }
.chat-input-row { display:flex; gap:10px; padding:14px 18px; border-top:1px solid var(--gray-2); background:#fff; }
.chat-input { flex:1; padding:10px 14px; border:1px solid var(--gray-2); border-radius:8px; font-family:inherit; font-size:13px; resize:none; max-height:120px; }
.chat-input:focus { outline:none; border-color:var(--green); }
.chat-send { padding:10px 20px; border:none; background:var(--green); color:#fff; border-radius:8px; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:.15s; flex-shrink:0; }
.chat-send:hover { background:var(--green-dark); }
.chat-send:disabled { background:var(--gray-3); cursor:not-allowed; }
.chat-reset { padding:6px 14px; border:1px solid var(--gray-2); background:#fff; color:var(--gray-3); border-radius:6px; font-family:inherit; font-size:11px; font-weight:700; cursor:pointer; transition:.15s; }
.chat-reset:hover { border-color:var(--green); color:var(--green); }

/* ===== TAB LOADING SPINNER ===== */
.tab-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  gap: 14px;
}
.tab-spinner-circle {
  width: 36px;
  height: 36px;
  border: 3px solid var(--gray-2);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.tab-spinner-text {
  color: var(--gray-3);
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
}

/* ===== PERIOD BUTTON DIMMING (phases not yet loaded) ===== */
.period-btn.phase-pending {
  opacity: 0.5;
  cursor: default;
  transition: opacity 0.3s ease;
}
.period-btn.phase-pending:hover {
  border-color: var(--gray-2);
}