/* InterviewAce - Google Meet Replica + 3-Tier Analytics Theme */
:root {
    --meet-bg: #202124;
    --meet-gray: #3c4043;
    --meet-gray-hover: #4a4d51;
    --meet-btn-red: #ea4335;
    --meet-blue: #8ab4f8;
    --meet-blue-solid: #1a73e8;
    --meet-text: #e8eaed;
    --meet-text-muted: #9aa0a6;
    --radius: 8px;
    --sidebar-w: 300px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    background: var(--meet-bg); color: var(--meet-text);
    font-family: 'Google Sans', 'Roboto', sans-serif;
    height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}
.material-icons { font-size: 24px; vertical-align: middle; }

/* ─── SETUP OVERLAY ─── */
.setup-overlay {
    position: fixed; inset: 0; background: var(--meet-bg);
    display: flex; align-items: center; justify-content: center; z-index: 500;
}
.setup-card {
    background: #2d2f33; border-radius: 16px; padding: 40px;
    width: 100%; max-width: 560px; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.setup-logo { text-align: center; margin-bottom: 32px; }
.setup-logo h1 { font-size: 28px; font-weight: 500; margin: 12px 0 4px; }
.setup-logo p { color: var(--meet-text-muted); font-size: 14px; }
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.setup-field label { display: block; font-size: 12px; color: var(--meet-text-muted); margin-bottom: 6px; font-weight: 500; }
.setup-field select {
    width: 100%; background: var(--meet-gray); color: var(--meet-text);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 6px;
    padding: 10px 12px; font-size: 14px; cursor: pointer;
}
.setup-field select:focus { outline: none; border-color: var(--meet-blue); }
.setup-join-btn {
    width: 100%; background: var(--meet-blue-solid); color: white; border: none;
    padding: 14px; border-radius: 8px; font-size: 16px; font-weight: 500;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: 0.2s;
}
.setup-join-btn:hover { background: #2b7de9; box-shadow: 0 2px 8px rgba(26,115,232,0.4); }

/* ─── MAIN LAYOUT ─── */
.meet-main {
    flex: 1; display: flex; min-height: 0; position: relative; overflow: hidden;
}

/* ─── ANALYTICS SIDEBAR ─── */
.analytics-sidebar {
    width: var(--sidebar-w); min-width: var(--sidebar-w);
    background: #292b2e; border-right: 1px solid rgba(255,255,255,0.08);
    display: flex; flex-direction: column; overflow-y: auto; transition: 0.3s;
}
.analytics-sidebar.hidden { width: 0; min-width: 0; overflow: hidden; }
.sidebar-header {
    display: flex; align-items: center; gap: 8px;
    padding: 16px 12px; font-weight: 500; font-size: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-close { margin-left: auto; background: none; border: none; color: var(--meet-text-muted); cursor: pointer; }

/* Metrics */
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
.metric-card { background: var(--meet-gray); border-radius: 8px; padding: 12px; text-align: center; }
.metric-val { font-size: 24px; font-weight: 600; margin-bottom: 2px; }
.metric-lbl { font-size: 10px; color: var(--meet-text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.metric-bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; }
.metric-fill { height: 4px; border-radius: 2px; width: 0; transition: width 0.8s ease; }
.metric-fill.blue { background: #8ab4f8; }
.metric-fill.green { background: #34a853; }
.metric-fill.orange { background: #fbbc04; }
.metric-fill.purple { background: #9334e6; }

/* Filler Box */
.filler-box { margin: 0 12px 12px; background: var(--meet-gray); border-radius: 8px; padding: 12px; }
.filler-header { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.filler-header .material-icons { font-size: 14px; color: #fbbc04; }
.filler-count { font-size: 36px; font-weight: 700; color: #fbbc04; text-align: center; }
.filler-words { font-size: 12px; color: var(--meet-text-muted); text-align: center; margin: 4px 0; }
.filler-tip { font-size: 11px; color: var(--meet-text-muted); line-height: 1.4; }

/* Body Language Box */
.body-box { margin: 0 12px 12px; background: var(--meet-gray); border-radius: 8px; padding: 12px; }
.body-header { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.body-header .material-icons { font-size: 14px; color: #34a853; }
.body-indicators { display: flex; flex-direction: column; gap: 6px; }
.bi { font-size: 12px; display: flex; align-items: center; gap: 6px; }
.bi-dot { font-size: 10px; color: var(--meet-text-muted); }
.bi-dot.good { color: #34a853; }
.bi-dot.bad { color: #ea4335; }

/* STAR Box */
.star-box { margin: 0 12px 12px; background: var(--meet-gray); border-radius: 8px; padding: 12px; }
.star-header { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.star-header .material-icons { font-size: 14px; color: #fbbc04; }
.star-indicators { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.si { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.si-badge { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.si-badge.off { background: rgba(255,255,255,0.1); color: var(--meet-text-muted); }
.si-badge.on { background: #34a853; color: white; }

.status-strip { display: flex; gap: 8px; padding: 12px; }
.status-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 30px; padding: 6px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
    background: rgba(138,180,248,0.18); color: #d2e3fc;
}
.status-pill.secondary { background: rgba(255,255,255,0.08); color: var(--meet-text-muted); }
.status-pill.connecting { background: rgba(251,188,4,0.18); color: #fdd663; }
.status-pill.live { background: rgba(52,168,83,0.22); color: #81c995; }
.status-pill.warning { background: rgba(234,67,53,0.16); color: #f28b82; }
.status-pill.idle { background: rgba(255,255,255,0.08); color: var(--meet-text-muted); }

.chart-card { margin: 0 12px 12px; background: var(--meet-gray); border-radius: 8px; padding: 12px; }
.card-header {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; margin-bottom: 10px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.card-header .material-icons { font-size: 14px; color: var(--meet-blue); }
.mini-chart, .radar-chart { width: 100%; background: rgba(0,0,0,0.15); border-radius: 8px; }
.chart-axis { stroke: rgba(255,255,255,0.2); stroke-width: 1; }
.trend-line { fill: none; stroke: #8ab4f8; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.trend-point { fill: #81c995; stroke: #202124; stroke-width: 2; }
.radar-grid { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 1; }
.radar-spoke { stroke: rgba(255,255,255,0.12); stroke-width: 1; }
.radar-area { fill: rgba(138,180,248,0.35); stroke: #8ab4f8; stroke-width: 2; }
.radar-label {
    fill: var(--meet-text-muted); font-size: 10px; text-anchor: middle;
    text-transform: capitalize;
}
.chart-placeholder { fill: var(--meet-text-muted); font-size: 12px; }

.comparison-card { display: flex; flex-direction: column; gap: 8px; }
.comparison-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.comparison-item {
    background: rgba(255,255,255,0.06); border-radius: 8px;
    padding: 10px; display: flex; flex-direction: column; gap: 4px;
}
.comparison-label { font-size: 10px; color: var(--meet-text-muted); text-transform: uppercase; }
.session-note { font-size: 12px; color: var(--meet-text-muted); line-height: 1.5; }

.heatmap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.heat-cell {
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px; border-radius: 8px; background: rgba(255,255,255,0.06);
    font-size: 11px; text-transform: capitalize;
}
.heat-cell strong { font-size: 14px; color: white; }
.heat-cell em { font-style: normal; color: var(--meet-text-muted); }
.heat-cell.high { border: 1px solid rgba(52,168,83,0.5); }
.heat-cell.medium { border: 1px solid rgba(251,188,4,0.5); }
.heat-cell.low { border: 1px solid rgba(234,67,53,0.5); }

.badge-list { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-pill {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 12px; border-radius: 999px;
    background: rgba(138,180,248,0.18); color: #d2e3fc;
    font-size: 12px; font-weight: 600;
}

.learning-list { display: flex; flex-direction: column; gap: 10px; }
.learning-item {
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px; border-radius: 8px; background: rgba(255,255,255,0.06);
    font-size: 12px; line-height: 1.45;
}
.learning-item strong { color: white; }
.learning-item span { color: #e8eaed; }
.learning-item em { font-style: normal; color: var(--meet-text-muted); }
.learning-item.compact { gap: 0; }

/* ─── VIDEO GRID ─── */
.video-grid {
    flex: 1; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px; padding: 12px; min-height: 0; padding-bottom: 70px;
}
.video-tile {
    position: relative; background: var(--meet-gray); border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    min-height: 180px; transition: box-shadow 0.1s;
}
.tile-speaking { box-shadow: inset 0 0 0 4px var(--meet-blue); }

/* Avatar */
.avatar-container {
    width: 120px; height: 120px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: visible;
}
.bg-blue { background: #1a73e8; }
.bg-purple { background: #9334e6; }
.bg-green { background: #1e8e3e; }
.avatar-initial { font-size: 56px; font-weight: 500; color: white; z-index: 2; position: relative; }

/* Rings */
.meet-rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; pointer-events: none; }
.ring { position: absolute; border-radius: 50%; background: var(--meet-blue); opacity: 0; width: 120px; height: 120px; transition: transform 0.12s ease-out, opacity 0.1s; }

/* Equalizer */
.equalizer { display: flex; align-items: flex-end; gap: 2px; width: 16px; height: 16px; }
.equalizer .bar { width: 4px; background: var(--meet-blue); border-radius: 2px; height: 4px; transition: height 0.05s; }

/* Tile Meta */
.tile-meta { position: absolute; bottom: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; z-index: 10; }
.meta-label { background: rgba(0,0,0,0.6); padding: 4px 10px; border-radius: 4px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.mic-icon { font-size: 15px; color: white; }
.red-icon { color: var(--meet-btn-red); }
.thinking-pill { background: rgba(0,0,0,0.6); padding: 5px 12px; border-radius: 20px; }
.loader-dots { display: inline-block; width: 24px; height: 14px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 14" fill="%23fff"><circle cx="4" cy="7" r="2" opacity="0.3"><animate attributeName="opacity" values="0.3;1;0.3" dur="1s" begin="0s" repeatCount="indefinite"/></circle><circle cx="12" cy="7" r="2" opacity="0.3"><animate attributeName="opacity" values="0.3;1;0.3" dur="1s" begin="0.33s" repeatCount="indefinite"/></circle><circle cx="20" cy="7" r="2" opacity="0.3"><animate attributeName="opacity" values="0.3;1;0.3" dur="1s" begin="0.66s" repeatCount="indefinite"/></circle></svg>') no-repeat center;
}
.company-badge { position: absolute; top: 10px; left: 10px; background: rgba(26,115,232,0.8); border-radius: 4px; padding: 3px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.transcribing-badge { position: absolute; top: 10px; right: 10px; background: rgba(147,52,230,0.85); border-radius: 12px; padding: 4px 10px; font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 4px; z-index: 10; }
.transcribing-badge .material-icons { font-size: 13px; }

/* Camera */
.video-wrapper { position: absolute; inset: 0; }
#videoPreview { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.camera-off-fallback { position: absolute; inset: 0; background: var(--meet-gray); display: flex; align-items: center; justify-content: center; z-index: 5; }

/* CC */
.cc-container { position: absolute; bottom: 65px; left: 0; width: 100%; display: flex; justify-content: center; pointer-events: none; z-index: 50; }
.cc-box { background: rgba(0,0,0,0.88); border-radius: var(--radius); padding: 12px 20px; max-width: 780px; width: 90%; display: flex; gap: 14px; align-items: flex-start; }
.cc-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--meet-blue-solid); color: white; display: flex; align-items: center; justify-content: center; font-weight: 500; flex-shrink: 0; margin-top: 4px; font-size: 13px; }
.cc-text-area { flex: 1; }
.cc-name { font-size: 11px; font-weight: 500; color: var(--meet-text-muted); margin-bottom: 3px; }
.cc-text { font-size: 20px; font-weight: 400; line-height: 1.4; color: white; }

/* ─── BOTTOM BAR ─── */
.bottom-bar {
    width: 100%; background: var(--meet-bg);
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 24px 14px; z-index: 100;
}
.bar-section { display: flex; align-items: center; gap: 10px; flex: 1; }
.left { justify-content: flex-start; }
.right { justify-content: flex-end; }
.center { justify-content: center; gap: 10px; flex: 2; }
.time-text { font-size: 15px; font-weight: 500; }
.meeting-code { font-size: 15px; font-weight: 500; }
.divider { color: var(--meet-text-muted); opacity: 0.5; }
.meet-btn {
    width: 48px; height: 48px; border-radius: 50%; border: 1px solid transparent;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    background: var(--meet-gray); color: white; transition: 0.2s;
}
.meet-btn:hover:not(.disabled-state) { background: var(--meet-gray-hover); }
.meet-btn.disabled-state { background: var(--meet-btn-red); }
.cc-btn.active { background: var(--meet-blue); color: #202124; }
.end-btn { width: 64px; border-radius: 24px; background: var(--meet-btn-red); }
.end-btn:hover { background: #f28b82; }
.nav-btn { background: transparent; border: none; color: white; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; transition: 0.2s; }
.nav-btn:hover { background: rgba(255,255,255,0.08); }

/* ─── FEEDBACK MODAL ─── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px; }
.meet-dialog { background: white; color: #3c4043; border-radius: 16px; padding: 32px; width: 100%; max-width: 640px; box-shadow: 0 8px 40px rgba(0,0,0,0.3); max-height: 90vh; overflow-y: auto; }
.dialog-icon { text-align: center; margin-bottom: 8px; }
.dialog-icon .material-icons { font-size: 48px; color: #fbbc04; }
.dialog-title { font-size: 22px; font-weight: 500; text-align: center; margin-bottom: 4px; color: #202124; }
.dialog-subtitle { font-size: 13px; color: #5f6368; text-align: center; margin-bottom: 20px; }
.score-summary { display: flex; justify-content: space-around; flex-wrap: wrap; background: #f8f9fa; padding: 16px; border-radius: 8px; margin-bottom: 16px; gap: 8px; }
.score-item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 60px; }
.main-score .s-val { font-size: 40px !important; }
.s-val { font-size: 22px; font-weight: 600; font-family: 'Google Sans'; }
.text-blue { color: var(--meet-blue-solid); }
.s-lbl { font-size: 11px; font-weight: 500; color: #5f6368; text-transform: uppercase; letter-spacing: 0.5px; }
.tier-badges { text-align: center; margin-bottom: 16px; }
.tier-pill { display: inline-block; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; background: #e8f0fe; color: #1a73e8; }
.notes-area { min-height: 100px; font-size: 14px; line-height: 1.6; color: #3c4043; border-top: 1px solid #e8eaed; border-bottom: 1px solid #e8eaed; padding: 16px 0; margin-bottom: 20px; }
.loading-notes { display: flex; align-items: center; gap: 8px; color: var(--meet-blue-solid); font-weight: 500; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.dialog-actions { display: flex; justify-content: flex-end; gap: 12px; }
.dialog-btn { padding: 10px 24px; border-radius: 6px; font-size: 14px; font-weight: 500; font-family: 'Google Sans'; cursor: pointer; border: none; transition: 0.2s; display: flex; align-items: center; gap: 6px; }
.dialog-btn.secondary { background: transparent; color: var(--meet-blue-solid); }
.dialog-btn.secondary:hover { background: #e8f0fe; }
.dialog-btn.primary { background: var(--meet-blue-solid); color: white; }
.dialog-btn.primary:hover:not(:disabled) { background: #1b66c9; }
.dialog-btn.primary:disabled { background: #e8eaed; color: #9aa0a6; cursor: not-allowed; }

/* ─── TOASTS ─── */
.toast-container { position: fixed; bottom: 80px; left: 24px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #3c4043; color: white; padding: 12px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.3); animation: fadeup 0.3s ease-out; }
@keyframes fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Responsive */
@media (max-width: 900px) {
    .left, .right { display: none; }
    .center { justify-content: center; }
    .analytics-sidebar { width: 240px; min-width: 240px; }
    :root { --sidebar-w: 240px; }
    .comparison-row { grid-template-columns: 1fr; }
    .right-sidebar { width: calc(100% - 24px); margin-right: 12px; }
}

@media (max-width: 720px) {
    .meet-main { flex-direction: column; }
    .analytics-sidebar {
        width: 100%; min-width: 100%; max-height: 42vh;
        border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .video-grid { grid-template-columns: 1fr; padding-bottom: 110px; }
    .setup-card { padding: 28px 18px; margin: 12px; }
    .setup-grid { grid-template-columns: 1fr; }
    .bottom-bar { padding: 8px 12px 12px; }
    .center { gap: 8px; }
    .meet-btn { width: 44px; height: 44px; }
    .cc-text { font-size: 16px; }
}

/* ─── NEW INTERACTIVE SIDEBARS (CHAT, PEOPLE) ─── */
.right-sidebar {
    width: 360px;
    background: #ffffff;
    color: #202124;
    border-radius: 16px;
    margin: 16px 16px 90px 0;
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25);
    z-index: 90;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
    transform: translateX(120%);
    opacity: 0;
    pointer-events: none;
}
.right-sidebar.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
.sidebar-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 24px 12px; font-size: 18px; font-weight: 500;
}
.close-sidebar-btn { background: transparent; border: none; cursor: pointer; color: #5f6368; padding: 4px; border-radius: 50%; transition: background 0.2s; }
.close-sidebar-btn:hover { background: #f1f3f4; }
.sidebar-content { flex: 1; overflow-y: auto; padding: 0 24px 24px; }

/* Chat */
#chatList { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.chat-msg { background: #f1f3f4; padding: 12px 16px; border-radius: 2px 16px 16px 16px; font-size: 14px; color: #3c4043; line-height: 1.5; }
.chat-msg.me { background: #e8f0fe; border-radius: 16px 2px 16px 16px; margin-left: auto; color: #1a73e8; max-width: 85%; }
.chat-name { font-size: 12px; font-weight: 600; color: #5f6368; margin-bottom: 4px; }
.chat-time { margin-left: 6px; font-weight: 400; font-size: 11px; color: #9aa0a6; }
.chat-input-area { padding: 16px 24px; border-top: 1px solid #e8eaed; display: flex; gap: 12px; align-items: center; background: white; border-radius: 0 0 16px 16px; }
.chat-input { flex: 1; background: #f1f3f4; border: none; border-radius: 24px; padding: 12px 20px; outline: none; font-size: 14px; font-family: inherit; }
.chat-send { background: transparent; border: none; color: #1a73e8; cursor: pointer; padding: 6px; }
.chat-send:disabled { color: #9aa0a6; cursor: auto; }

/* People */
.participant { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid #f1f3f4; }
.participant-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 18px; }
.participant-info { flex: 1; }
.participant-name { font-size: 14px; font-weight: 500; color: #202124; }


.participant-role { font-size: 12px; color: #5f6368; }
.participant-icons { color: #5f6368; display: flex; gap: 8px; }
.participant-icons .material-icons { font-size: 20px; }

/* Details */
.detail-box { background: #f8f9fa; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.detail-label { font-size: 12px; font-weight: 600; color: #5f6368; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.detail-val { font-size: 14px; color: #202124; }

/* ─── ANALYTICS TOGGLE BUTTON ACTIVE ─── */
.nav-btn.active { background: rgba(138,180,248,0.22); color: var(--meet-blue); }

/* ─── RICH FEEDBACK PANEL VISUALS ─── */
.fb-section { margin-bottom: 18px; }
.fb-section-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: #1a73e8;
    margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.3px;
}
.fb-section-title .material-icons { font-size: 16px; }

/* Bar Chart */
.fb-bar-chart { display: flex; flex-direction: column; gap: 10px; }
.fb-bar-row { display: flex; align-items: center; gap: 10px; }
.fb-bar-label { width: 80px; font-size: 12px; font-weight: 500; color: #5f6368; text-align: right; flex-shrink: 0; }
.fb-bar-track { flex: 1; height: 14px; background: #f1f3f4; border-radius: 7px; overflow: hidden; }
.fb-bar-fill { height: 100%; border-radius: 7px; transition: width 1s ease; }
.fb-bar-value { width: 30px; font-size: 13px; font-weight: 700; color: #202124; }

/* Radar SVG */
.fb-radar-svg { width: 100%; max-width: 260px; margin: 0 auto; display: block; background: #f8f9fa; border-radius: 12px; padding: 10px; }

/* Heatmap */
.fb-heatmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.fb-heat-cell {
    background: #f8f9fa; border-radius: 6px; padding: 10px;
    display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #5f6368; text-transform: capitalize;
}
.fb-heat-cell strong { font-size: 14px; color: #202124; }
.fb-heat-cell em { font-style: normal; color: #9aa0a6; }

/* Badges */
.fb-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-badge {
    display: inline-flex; align-items: center; padding: 6px 14px;
    background: linear-gradient(135deg, #e8f0fe, #d2e3fc); color: #1a73e8;
    border-radius: 20px; font-size: 12px; font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Strengths & Growth columns */
.fb-cols { display: flex; gap: 12px; }
.fb-col {
    flex: 1; background: #f8f9fa; border-radius: 10px; padding: 14px;
}
.fb-col.good { border-left: 3px solid #34a853; }
.fb-col.grow { border-left: 3px solid #fbbc05; }
.fb-col-title {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; color: #202124; margin-bottom: 6px;
}
.fb-col-title .material-icons { font-size: 15px; }
.fb-col.good .fb-col-title .material-icons { color: #34a853; }
.fb-col.grow .fb-col-title .material-icons { color: #fbbc05; }
.fb-col p { font-size: 13px; line-height: 1.5; color: #5f6368; margin: 0; }

/* Study Plan / Recommendations */
.fb-study-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.fb-study-list li {
    position: relative; padding: 10px 12px 10px 24px;
    background: #f8f9fa; border-radius: 8px; font-size: 13px;
    line-height: 1.5; color: #3c4043;
}
.fb-study-list li::before {
    content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%; background: #1a73e8;
}
.fb-study-list li strong { color: #202124; }

/* Wider dialog for rich content */
.meet-dialog { max-width: 720px; }