:root {
        /* --- EXISTING APP TOKENS (Preserve these to keep app.html working) --- */
        --sf-orange: #FF6600;
        --sf-yellow: #FFCC00;
        --sf-ink: #101114;
        --sf-muted: #6B7280;
        --sf-bg: #F8F9FB;
        --radius-xl: 16px;
        --shadow-md: 0 10px 20px rgba(16,17,20,0.06);
        --line: #eef0f3;

        /* --- NEW BRAND VARIABLES (For Cookie Banner & Marketing Consistency) --- */
        /* These map the new brand codes to variables the new CSS expects */
        --brand-orange: #FF6600; /* Aligned with sf-orange */
        --brand-yellow: #FFC300; /* Optimistic Yellow */
        --brand-red: #E4002B;    /* Energetic Red */
        
        --brand-slate-900: #2C3E50; /* Dark Grey (Text) */
        --brand-slate-800: #1E293B; /* UI Depth */
        --brand-slate-600: #8A8A8A; /* Mid Grey */
        --brand-slate-500: #64748B;
        --brand-slate-400: #94A3B8;
        --brand-slate-200: #E2E8F0; /* Borders */
        --brand-slate-50: #F5F5F5;  /* Light Grey Backgrounds */
        --brand-white: #FFFFFF;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:"Gantari", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--sf-ink);
      background:linear-gradient(180deg,#ffffff,#fafbff)
    }
    a{color:inherit;text-decoration:none}

    /* Header */
    .app-header{position:sticky;top:0;z-index:40;backdrop-filter:saturate(1.2) blur(8px);background:rgba(255,255,255,0.92);border-bottom:1px solid #eef0f3}
    .container{max-width:1160px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between}
    .brand{display:inline-flex;align-items:center;gap:10px}
    .brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--sf-orange),var(--sf-yellow));box-shadow:inset 0 0 0 2px rgba(255,255,255,0.7)}
    .brand-name{font-weight:700;letter-spacing:0.2px}

    /* Chips & buttons */
    .chip{display:inline-flex;align-items:center;gap:6px;font-size:14px;padding:6px 10px;border-radius:999px;background:#fff;border:1px solid #eceef3}
    .chip b{font-weight:700}
    .btn-brand{appearance:none;border:0;border-radius:999px;padding:10px 16px;font-weight:700;cursor:pointer;box-shadow:var(--shadow-md);background:linear-gradient(90deg,var(--sf-orange),var(--sf-yellow));color:#111}
    .btn-outline{appearance:none;border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:8px 12px;font-weight:600;cursor:pointer}
    .btn-toggle{appearance:none;border:1px solid #e5e7eb;background:#fff;padding:6px 10px;border-radius:999px;font-weight:600;cursor:pointer}
    .btn-toggle.active{background:linear-gradient(90deg,var(--sf-orange),var(--sf-yellow));border-color:transparent}

    /* Layout */
    .shell{max-width:1160px;margin:28px auto;padding:0 20px}
    .toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
    .card{background:#fff;border:1px solid #eef0f3;border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}
    .panel{padding:18px}

    /* Grid areas (desktop 2 cols) */
    .workspace{
      display:grid;gap:18px;
      grid-template-columns:1.2fr 1fr;
      grid-template-areas:
        "sim brief"
        "notes instant";
    }
    .sim{grid-area:sim}
    .brief{grid-area:brief}
    .notes{grid-area:notes}
    .instant{grid-area:instant}

    .section-title{font-size:13px;text-transform:uppercase;letter-spacing:0.5px;color:var(--sf-muted);margin-bottom:8px}

    /* Live sim */
    .sim-hd{display:flex;align-items:center;justify-content:space-between}
    .sim-metrics{
      display:flex;
      align-items:center;
      gap:8px;          /* space between busy + timer */
    }
    .pill{font-size:12px;padding:4px 8px;border-radius:999px;background:#f6f7fb;border:1px solid #eceef3}
    .timer{font-variant-numeric:tabular-nums}
    .chat{border:1px solid #eef0f3;border-radius:14px;padding:12px;height:340px;overflow:auto;background:#fff}
    /* Container for all messages */
    .msg-wrap{display:flex;margin:10px 0;}

    /* Styles for the user's message wrapper */
    .msg-wrap.me{
        justify-content: flex-end; /* Push the entire message to the right */
    }

    .avatar{flex:0 0 28px;width:28px;height:28px;border-radius:8px;background:#eef0f3}
    .bubble{padding:10px 12px;border-radius:12px;border:1px solid #eef0f3;max-width:75%}
    .me .bubble{background:#fff7e6;border-color:#ffe0ad}
    .ai .bubble{background:#f6f7fb}
    .composer{display:flex;gap:10px;margin-top:10px}
    .input{flex:1;padding:12px 14px;border-radius:12px;border:1px solid #e5e7eb;outline:none;font:inherit}
    .textarea{width:100%;min-height:160px;padding:12px 14px;border-radius:12px;border:1px solid #e5e7eb;outline:none;font:inherit;resize:vertical}

    /* --- FIX: Manage Plan Button Styling --- */
    .chat i .cta-manage-plan {
      font-style: normal;
      color: #111; 
      display: inline-block;
      padding: 4px 10px;
      border: 1px solid #FFD7A6;
      border-radius: 999px;
      background: #FFF7E6;
      font-weight: 700;
      text-decoration: none;
      margin-left: 6px;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }
    .chat i .cta-manage-plan:hover {
      background: #FFE6CC;
      border-color: #FFC66D;
    }
    
    /* Instant feedback */
    .pulse-container {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;
        background: #fcfcfd;
        border: 1px solid #f0f2f5;
        border-radius: 12px;
        padding: 12px 16px;
    }
    .pulse-icon {
        font-size: 28px;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        border: 1px solid #eef0f3;
    }
    .pulse-meta h5 { margin: 0 0 2px 0; font-size: 12px; text-transform: uppercase; color: #888; letter-spacing: 0.5px; }
    .pulse-value { font-size: 16px; font-weight: 700; color: #111; text-transform: capitalize; }

    /* Phase Tracker (Vertical Metro Line) */
    .phase-tracker {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 20px;
        position: relative;
        padding-left: 8px; /* Alignment fix */
    }
    .phase-step {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 0;
        position: relative;
        opacity: 0.5;
        transition: opacity 0.3s ease;
    }
    .phase-step::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #e5e7eb;
        z-index: 2;
        border: 2px solid #fff;
        box-shadow: 0 0 0 1px #e5e7eb;
    }
    .phase-step::after {
        content: "";
        position: absolute;
        left: 5px; /* Center of dot */
        top: 20px;
        bottom: -12px;
        width: 2px;
        background: #f0f2f5;
        z-index: 1;
    }
    .phase-step:last-child::after { display: none; }
    
    .phase-step.active { opacity: 1; }
    .phase-step.active::before {
        background: var(--sf-orange);
        box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.15);
        border-color: #fff;
    }
    .phase-step span { font-size: 13px; font-weight: 600; }
    .tips{margin-top:14px;padding:12px;border:1px solid #eef0f3;border-radius:12px;background:#fff}
    .tips h4{margin:0 0 8px}
    .muted{color:var(--sf-muted)}

    /* --- NEW LAYOUT: Split View for Feedback --- */
    .feedback-split {
        display: flex;
        align-items: stretch; /* Make both cols equal height */
        gap: 12px;
        margin-bottom: 16px;
    }
    .fs-left {
        flex: 1; /* Tracker takes available width */
    }
    .fs-right {
        width: 130px; /* Fixed width for Pulse column */
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
    }

    /* Redesign Pulse Container for Sidebar Mode */
    .pulse-container {
        display: flex;
        flex-direction: column; /* Stack Icon top, Text bottom */
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 10px;
        background: #fcfcfd;
        border: 1px solid #f0f2f5;
        border-radius: 12px;
        padding: 16px 8px;
        height: 100%; /* Fill the height of the column */
        margin-bottom: 0; /* Remove old margin */
    }
    
    /* Adjust Pulse Typography for Vertical Stack */
    .pulse-meta h5 { 
        margin: 0 0 4px 0; 
        font-size: 11px; 
        color: #888; 
    }
    .pulse-value { 
        font-size: 15px; 
    }
    
    /* Mobile Responsive: Stack them back up on small screens */
    @media (max-width: 600px) {
        .feedback-split { flex-direction: column-reverse; }
        .fs-right { width: 100%; }
        .pulse-container { flex-direction: row; justify-content: flex-start; text-align: left; padding: 12px 16px; }
        .pulse-meta { text-align: left; }
    }

    /* Report modal */
    .modal-backdrop{
      position:fixed; inset:0; display:none;
      align-items:center; justify-content:center;
      background:rgba(2,6,23,.4);
      z-index: 4000;                /* raise higher */
    }
    .modal{
      background:#fff; border:1px solid var(--line); border-radius:16px;
      box-shadow:var(--shadow-md); width:min(960px,92vw);
      position: relative;           /* new */
      z-index: 4001;                /* new */
      isolation: isolate;           /* new: creates a local stacking context */
    }
    .modal-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #f0f2f5}
    .modal-bd{padding:18px}
    .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
    .tab{padding:8px 10px;border-radius:999px;border:1px solid #eceef3;background:#fff;cursor:pointer;font-weight:600}
    .tab.active{background:linear-gradient(90deg,var(--sf-orange),var(--sf-yellow));border-color:transparent}
    .tab.locked{opacity:.5;cursor:not-allowed}
    .report-sec{display:none}
    .report-sec.active{display:block}
    .timeline{border:1px solid #eef0f3;border-radius:12px}
    .row{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:8px 12px;border-top:1px solid #f5f6f8}
    .row:first-child{border-top:0}
    .transcript{border:1px solid #eef0f3;border-radius:12px;padding:10px;max-height:320px;overflow:auto;background:#fff}
    mark{background:#fff2b3}

    /* Pricing embed — scoped to the modal only */
    #pricingModalBody { padding: 8px 12px 16px; }
    #pricingModalBody #tiers { padding: 0; background: transparent; }
    #pricingModalBody .container { max-width: 960px; margin: 0 auto; padding: 0; }

    /* Header + copy */
    #pricingModalBody header { text-align: left; margin: 0 0 12px; }
    #pricingModalBody h2 { font-size: 22px; line-height: 1.25; margin: 0 0 6px; }
    #pricingModalBody p  { margin: 4px 0 10px; }

    /* Cards layout */
    #pricingModalBody .grid{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 16px;
    }
    #pricingModalBody .tier-card{
      display: flex; flex-direction: column; gap: 8px;
      background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px;
    }
    #pricingModalBody .tier-title{ font-size: 18px; margin: 0; }
    #pricingModalBody .tier-sub{ color: #555; margin: 4px 0 6px; }
    #pricingModalBody .tier-list{ margin: 0 0 10px; padding-left: 18px; }
    #pricingModalBody .tier-list li{ list-style: disc; margin: 4px 0; }
    #pricingModalBody .badge-recommended{
      position: absolute; top: -10px; right: 12px;
      background: var(--brand, #ff6600); color: #fff; font-size: 12px;
      padding: 4px 8px; border-radius: 999px;
    }

    /* Ensure Pricing sits above other modals (Reports) but below Toasts */
    #pricingModalBackdrop { z-index: 5000 !important; }
    
    /* Buttons in cards */
    #pricingModalBody a.btn-brand,
    #pricingModalBody a.btn-outline{ align-self: flex-start; }

    /* Toggle fallback (checkbox → pill switch) */
    #pricingModalBody label[for="billing-toggle"]{ display: inline-flex; align-items: center; gap: 8px; }
    #pricingModalBody #billing-toggle + div{
      width: 44px; height: 24px; background: #e5e7eb; border-radius: 999px; position: relative;
    }
    #pricingModalBody #billing-toggle + div::after{
      content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
      border-radius: 50%; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.15); transition: transform .2s;
    }
    #pricingModalBody #billing-toggle:checked + div{ background: var(--brand, #ff6600); }
    #pricingModalBody #billing-toggle:checked + div::after{ transform: translateX(20px); }


    /* Coach analysis cards */
    .coach-list{display:grid;gap:10px}
    .coach-card{border:1px solid #eef0f3;border-radius:12px;padding:12px;background:#fff}
    .coach-card h5{margin:0 0 6px}

    /* Small menus */
    .btn-group{position:relative;display:inline-flex;align-items:center;gap:6px}
    .menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #eef0f3;border-radius:10px;box-shadow:var(--shadow-md);padding:6px;display:none;min-width:220px;z-index:50}
    .menu a{display:block;padding:8px 10px;border-radius:8px}
    .menu a:hover{background:#f6f7fb}

    /* Briefing specifics */
    .brief h4{margin:0 0 2px}
    .brief p{margin:0 0 8px}
    .scroll-block{
      max-height:140px;overflow:auto;padding:10px;border:1px solid #eef0f3;border-radius:10px;background:#fff;white-space:pre-wrap
    }

    .app-foot{margin:40px auto 60px;color:#8a90a0;text-align:center;font-size:13px}

    /* Mobile: single column order */
    @media (max-width:980px){
      .workspace{
        grid-template-columns:1fr;
        grid-template-areas:
          "brief"
          "sim"
          "notes"
          "instant";
      }
      .score-wrap{display:flex;gap:14px;align-items:center}
    }


    /* Header + copy */
    #pricingModalBody header { text-align: left; margin: 0 0 12px; }
    #pricingModalBody h2 { font-size: 22px; line-height: 1.25; margin: 0 0 6px; }
    #pricingModalBody p  { margin: 4px 0 10px; }

    /* Cards layout */
    #pricingModalBody .grid{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 16px;
    }
    #pricingModalBody .tier-card{
      position: relative;                       /* needed for the “Recommended” badge */
      display: flex; flex-direction: column; gap: 8px;
      background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px;
    }
    #pricingModalBody .tier-title{ font-size: 18px; margin: 0; }
    #pricingModalBody .tier-sub{ color: #555; margin: 4px 0 6px; }
    #pricingModalBody .tier-list{ margin: 0 0 10px; padding-left: 18px; }
    #pricingModalBody .tier-list li{ list-style: disc; margin: 4px 0; }
    #pricingModalBody .badge-recommended{
      position: absolute; top: -10px; right: 12px;
      background: var(--brand, #ff6600); color: #fff; font-size: 12px;
      padding: 4px 8px; border-radius: 999px;
    }

    /* Buttons in cards */
    #pricingModalBody a.btn-brand,
    #pricingModalBody a.btn-outline{ align-self: flex-start; }

    /* Toggle UI (works without Tailwind) */
    #pricingModalBody label[for="billing-toggle"]{ display: inline-flex; align-items: center; gap: 8px; }
    #pricingModalBody #billing-toggle + div{
      width: 44px; height: 24px; background: #e5e7eb; border-radius: 999px; position: relative;
    }
    #pricingModalBody #billing-toggle + div::after{
      content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
      border-radius: 50%; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.15); transition: transform .2s;
    }
    #pricingModalBody #billing-toggle:checked + div{ background: var(--brand, #ff6600); }
    #pricingModalBody #billing-toggle:checked + div::after{ transform: translateX(20px); }

    /* Make Tailwind’s “hidden” class actually hide things */
    #pricingModalBody .hidden { display: none !important; }
    /* ⬆️ END of pricing embed block ⬆️ */

    /* Setup form: tidy spacing inside the modal */
    #setupFullPanel form { display:block; }
    #setupFullPanel .form-section { margin: 10px 0 14px; }
    #setupFullPanel label { display:block; margin: 0 0 6px; }
    #setupFullPanel select, 
    #setupFullPanel input[type="text"], 
    #setupFullPanel textarea { width:100%; }


    /* --- Tooltips (Smart Positioning) --- */
    .tooltip-container {
      position: relative;
      display: inline-flex;
      align-items: center;
      margin-left: 6px;
      cursor: help;
    }

    .tooltip-trigger {
      display: inline-flex;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #eef0f3;
      color: #64748b;
      font-weight: 700;
      font-size: 11px;
      align-items: center;
      justify-content: center;
      user-select: none;
      transition: background 0.2s, color 0.2s;
    }

    .tooltip-container:hover .tooltip-trigger {
      background: #cbd5e1;
      color: #0f172a;
    }

    /* --- 1. DEFAULT: Anchor Left (Grows Right) --- */
    /* This fixes the Left-side clipping issues */
    .tooltip-content {
      position: absolute;
      top: 100%;
      
      /* Default: Anchor to the LEFT edge of the icon */
      left: -8px; 
      right: auto;
      
      margin-top: 8px;
      width: 260px;
      text-align: left;
      white-space: normal;
      
      background: #1e293b;
      color: #fff;
      padding: 12px;
      border-radius: 8px;
      font-size: 13px;
      line-height: 1.4;
      font-weight: 400;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
      z-index: 100;
      pointer-events: none;
      
      opacity: 0;
      visibility: hidden;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      transform: translateY(4px);
    }

    /* --- 2. TARGETED OVERRIDES (Desktop) --- */
    /* Keeps desktop working exactly as you confirmed it is now. */
    label[for="pitch_type_context"] ~ .tooltip-container .tooltip-content,
    label[for="cultural_context_hints"] ~ .tooltip-container .tooltip-content,
    label[for="prospect_role"] ~ .tooltip-container .tooltip-content,
    label[for="b2b_persona_specifics"] ~ .tooltip-container .tooltip-content,
    label[for="user_sales_goal"] ~ .tooltip-container .tooltip-content,
    label[for="b2c_persona_segment"] ~ .tooltip-container .tooltip-content,
    #start_with_rapport ~ .tooltip-container .tooltip-content {
        left: auto !important;
        right: -8px !important;
        transform-origin: top right;
    }

    /* --- 3. MOBILE LAYOUT FIXES (The "Push Right" Strategy) --- */
    @media (max-width: 600px) {
        
        /* STRATEGY: Push the '?' icon to the far right edge */
        .label-row {
            display: flex;
            justify-content: space-between; /* Label Left <---> Icon Right */
            align-items: center;
            width: 100%;
        }

        /* Since the icon is now on the Right, the tooltip MUST grow Left */
        .tooltip-content {
            left: auto !important;
            right: -8px !important;   /* Anchor to the right edge */
            transform-origin: top right;
            
            /* Safety constraints */
            width: 260px;             
            max-width: 80vw;
            white-space: normal;
            margin-top: 10px;
            z-index: 1000; /* Ensure it floats above other form elements */
        }
    }

    /* Hover State */
    .tooltip-container:hover .tooltip-content,
    .tooltip-trigger:focus + .tooltip-content {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    /* Wizard layout (Full setup) */
    #wrapper.__hidden { 
      display: none !important; 
    }
    #setupFullPanel .wizard { display:flex; flex-direction:column; gap:12px; }
    #setupFullPanel .wizard-steps{
      display:flex; gap:10px; list-style:none; padding:0; margin:0 0 6px;
    }
    #setupFullPanel .wizard-steps li{
      padding:6px 10px; border:1px solid var(--line); border-radius:999px; font-weight:600;
      color:#444; background:#fff;
    }
    #setupFullPanel .wizard-steps li.is-active{ background:#fff7e6; border-color:#ffd7a6; color:#9a5d00 }

    #setupFullPanel .wizard-step{ display:block; }
    #setupFullPanel .wizard-step.hidden{ display:none; }

    #setupFullPanel .setup-grid{
      display:grid; grid-template-columns:1fr 1fr; gap:12px;
    }
    #setupFullPanel .setup-grid .span-2{ grid-column:1 / span 2; }

    #setupFullPanel .form-section{ display:block; }
    #setupFullPanel .label-row{ display:flex; align-items:center; gap:8px; }
    #setupFullPanel .inline{ display:flex; flex-wrap:wrap; gap:12px; }
    #setupFullPanel .req{ color:#d00; }

    #setupFullPanel input[type="text"],
    #setupFullPanel select,
    #setupFullPanel textarea{
      width:100%; padding:10px 12px; border:1px solid var(--line);
      border-radius:10px; background:#fff; outline:none;
    }
    #setupFullPanel textarea{ min-height:96px; }

    #setupFullPanel .muted{ color:#666; }
    #setupFullPanel .muted.small{ font-size:12px; }

    #setupFullPanel .wizard-footer{
      position:sticky; bottom:-12px; background:linear-gradient(to top, #fff 70%, rgba(255,255,255,0));
      display:flex; align-items:center; gap:10px; padding-top:8px;
    }
    #setupFullPanel .wizard-footer .spacer{ flex:1; }

    /* --- Preset/Library list cards --- */
    .scn-list { display:grid; gap:10px; }
    .scn-card{
      display:flex; justify-content:space-between; align-items:center;
      padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff;
    }
    .scn-meta{ font-size:12px; color:#6b7280; margin-top:2px }
    .badge{ font-size:11px; padding:2px 8px; border-radius:999px; background:#eef2ff; color:#4338ca }
    .scn-actions{ display:flex; gap:6px }



    /* Tooltips (reuse your classes) */
    .tooltip-container{ position:relative; display:inline-flex; align-items:center; }
    .tooltip-trigger{ display:inline-flex; width:18px; height:18px; border-radius:50%; background:#eef0f3; color:#111;
      font-weight:700; font-size:12px; align-items:center; justify-content:center; cursor:help; user-select:none }
    .tooltip-content{ position:absolute; left:22px; top:50%; transform:translateY(-50%);
      background:#111; color:#fff; padding:8px 10px; border-radius:8px; max-width:320px;
      font-size:12px; line-height:1.35; opacity:0; visibility:hidden; transition:all .12s; box-shadow:0 6px 24px rgba(0,0,0,.18); z-index:10 }
    .tooltip-container:hover .tooltip-content,
    .tooltip-trigger:focus + .tooltip-content { opacity:1; visibility:visible; transform:translateY(calc(-50% - 2px)) }

    /* Mobile: one column */
    @media (max-width: 900px){
      #setupFullPanel .setup-grid{ grid-template-columns:1fr; }
      #setupFullPanel .setup-grid .span-2{ grid-column:auto; }
    }

    @media (max-width: 980px){
      #setupFullPanel .setup-grid{ grid-template-columns: 1fr; }
      #setupFullPanel .setup-grid .span-2{ grid-column: auto; }
    }


    /* Wizard validation styles */
    #setupFullPanel .invalid{
      border-color:#d00 !important;
      box-shadow:0 0 0 2px rgba(208,0,0,.10);
    }
    #setupFullPanel .field-error{
      color:#d00; font-size:12px; margin-top:4px;
    }

    /* Setup readability tweaks */
    #setupModalBackdrop .modal{ max-width: 1080px; }                 /* wider modal */
    #setupFullPanel .setup-grid{ column-gap: 20px; row-gap: 12px; }  /* denser grid */
    #setupFullPanel .form-section{ margin-bottom: 10px; }            /* tighter vertical rhythm */
    #setupFullPanel select[multiple]{ min-height: 120px; }           /* better list height */

    /* Step pills spacing */
    #setupFullPanel .wizard-steps{ margin: 2px 0 10px; }

    /* ---- Setup Details polish ---- */

    /* 1) Box each question + field */
    #setupFullPanel .form-section{
      background:#fff;
      border:1px solid #eef0f3;
      border-radius:12px;
      padding:12px;
      transition:box-shadow .12s, border-color .12s;
    }
    #setupFullPanel .form-section:hover{
      border-color:#e6e9f1;
      box-shadow:var(--shadow-md);
    }
    #setupFullPanel .form-section .label-row{ margin-bottom:6px; }

    /* 2) Make inputs/areas feel consistent inside the boxes */
    #setupFullPanel input[type="text"],
    #setupFullPanel select,
    #setupFullPanel textarea{
      border-radius:10px;
      min-height:38px;
    }
    #setupFullPanel textarea{ min-height:96px; }

    /* 3) Tighter, more balanced grid */
    #setupFullPanel .setup-grid{ column-gap:18px; row-gap:14px; }

    /* 4) Give the whole B2B/B2C block a gentle container + title */
    #setupFullPanel #b2bFieldsContainer,
    #setupFullPanel #b2cFieldsContainer{
      position:relative;
      background:#fcfdff;
      border:1px solid #eef0f3;
      border-radius:14px;
      padding:14px;
      margin-top:6px;
    }
    #setupFullPanel #b2bFieldsContainer::before,
    #setupFullPanel #b2cFieldsContainer::before{
      content: attr(data-title);
      position:absolute; top:-10px; left:12px;
      background:#fff; padding:2px 8px; border:1px solid #eef0f3; border-radius:999px;
      font-weight:600; font-size:12px; color:#444;
    }

    /* 5) Make multiple selects usable height */
    #setupFullPanel select[multiple]{ min-height:120px; }

    /* ---- Setup modal: tall, scroll-inside, sticky header & footer ---- */
    #setupModalBackdrop .modal{
      /* wider, taller modal */
      max-width: 1120px;                 /* fit 2 columns comfortably */
      width: min(1120px, 94vw);
      max-height: 90vh;                  /* use most of the screen */
      display: flex;                     /* column layout */
      flex-direction: column;
    }

    #setupModalBackdrop .modal-hd{
      position: sticky;                  /* stays visible while scrolling */
      top: 0;
      z-index: 3;
      background: #fff;
      border-bottom: 1px solid var(--line);
    }

    #setupModalBackdrop .modal-bd{
      flex: 1;                           /* take the remaining height */
      min-height: 0;                     /* allow flex child to shrink: crucial for overflow */
      overflow: auto;                    /* the only scroll container */
      padding-right: 8px;                /* keep scrollbar off content */
      padding-bottom: 0;       /* no extra gap below */
    }

    #setupModalBackdrop .modal{ overflow: hidden; }

    /* Keep the wizard footer visible and not covering fields */
    #setupFullPanel .wizard-footer{
      position: sticky;
      bottom: 0;                      /* sit at the bottom of the scroll area */
      z-index: 2;
      background: #fff;               /* solid bar (no visible content “behind”) */
      border-top: 1px solid var(--line);
      padding: 10px 0;                /* comfortable hit targets */
      margin-top: 8px;
      box-shadow: 0 -6px 16px rgba(0,0,0,.06);  /* soft separation */
    }

    #setupFullPanel .form-section{ scroll-margin-bottom: 96px; }

    /* General step container panel (Step 1) */
    #setupFullPanel .wizard-step[data-step="1"]{
      background:#fcfdff;
      border:1px solid #eef0f3;
      border-radius:14px;
      padding:12px;
    }

    /* Review list (Step 3) */
    #setupFullPanel .review{
      background:#fff;
      border:1px solid #eef0f3;
      border-radius:12px;
      padding:12px;
    }
    #setupFullPanel .rev-row{
      display:flex;
      gap:10px;
      padding:8px 6px;
      border-bottom:1px solid #f0f2f6;
    }
    #setupFullPanel .rev-row:last-child{ border-bottom:0; }
    #setupFullPanel .rev-row strong{
      width:180px;              /* label column */
      color:#333;
      font-weight:600;
    }
    #setupFullPanel .rev-row span{
      flex:1; color:#555;
    }


    /* ---- Report modal: tall, scroll-inside, sticky header & tabs ---- */
    #reportModalBackdrop .modal{
      max-width: 1120px;
      width: min(1120px, 94vw);
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;                 /* clean edges */
    }

    #reportModalBackdrop .modal-hd{
      position: sticky;
      top: 0;
      z-index: 3;
      background: #fff;
      border-bottom: 1px solid var(--line);
    }

    #reportModalBackdrop .modal-bd{
      flex: 1;
      min-height: 0;                    /* critical for flex + overflow */
      overflow: auto;                   /* the only scroll area */
      padding-right: 8px;               /* keep scrollbar off content */
    }

    /* Keep the tab bar visible while scrolling */
    #reportModalBackdrop .tabs{
      position: sticky;
      top: 0;                           /* relative to .modal-bd */
      z-index: 2;
      background: #fff;
      margin: 2px 0 10px;
      padding-top: 6px;
      box-shadow: 0 6px 12px rgba(0,0,0,.04);
    }

    /* ---- Coach analysis cards polish ---- */
    #reportModalBackdrop .coach-list{
      display: grid;
      gap: 12px;
    }

    #reportModalBackdrop .coach-card{
      background: #fff;
      border: 1px solid #eef0f3;
      border-radius: 12px;
      padding: 14px;
      transition: box-shadow .12s, border-color .12s;
      box-shadow: var(--shadow-sm);
      scroll-margin-top: 64px;          /* don't hide under sticky tabs */
    }

    #reportModalBackdrop .coach-card:hover{
      border-color: #e6e9f1;
      box-shadow: var(--shadow-md);
    }

    #reportModalBackdrop .coach-card h5{
      margin: 0 0 6px;
      font-weight: 600;
      color: #222;
    }

    /* Optional: compact long text inside cards */
    #reportModalBackdrop .coach-card p{
      margin: 0;
      color: #555;
      line-height: 1.45;
    }


    /* Slightly tighten headings/lead text inside the setup tab */
    #tab-full h4{ margin: 0 0 6px; }
    #tab-full .muted{ margin: 0 0 10px; }

    /* Optional: compact two-column spacing a bit more */
    #setupFullPanel .setup-grid{ column-gap: 16px; row-gap: 12px; }


    /* ---- Report summary polish ---- */
    #reportModalBackdrop .summary-grid{
      display:grid;
      grid-template-columns: 250px 1fr;
      gap:20px;
      align-items:start;
    }

    #reportModalBackdrop .score-card{
      background:#fff;
      border:1px solid #eef0f3;
      border-radius:14px;
      padding:18px;
      text-align:center;
      box-shadow:var(--shadow-sm);
    }

    #reportModalBackdrop .donut{
      --score: 0;                           /* fallback */
      --accent: #ff7a00;                     /* your brand orange */
      width: 180px;
      aspect-ratio: 1;
      margin: 0 auto 8px;
      border-radius: 50%;
      background:
        conic-gradient(var(--accent) calc(var(--score) * 1%),
                      #e8eaef 0);
      position: relative;
      isolation:isolate;
    }
    #reportModalBackdrop .donut::after{
      content:"";
      position:absolute; inset:14%;
      background:#fff; border-radius:50%;
      box-shadow: inset 0 0 0 1px #eef0f3;
    }
    #reportModalBackdrop .donut .num{
      position:absolute; inset:0;
      display:grid; place-items:center;
      font-weight:700; font-size:28px; color:#333;
    }

    /* Allow --score to animate (Chrome/Safari/Edge support; Firefox will ignore gracefully) */
    @property --score {
      syntax: '<number>';
      inherits: false;
      initial-value: 0;
    }

    /* Animate the score change */
    #reportModalBackdrop .donut{
      transition: --score .6s ease;   /* animate the custom property */
    }


    #reportModalBackdrop .kpis{
      background:#fff;
      border:1px solid #eef0f3;
      border-radius:14px;
      padding:16px;
      box-shadow:var(--shadow-sm);
    }

    #reportModalBackdrop .kpi{
      display:flex; align-items:center; gap:10px;
      margin:10px 0;
    }
    #reportModalBackdrop .kpi .label{ width:200px; color:#444; }
    #reportModalBackdrop .kpi .bar{
      flex:1; height:10px; border-radius:999px;
      background:#eef1f6; position:relative; overflow:hidden;
    }
    #reportModalBackdrop .kpi .bar .fill{
      position:absolute; inset:0 auto 0 0;
      width: 0%; border-radius:999px; background: #ff7a00;  /* accent */
      transition: width .35s ease;
    }
    #reportModalBackdrop .kpi .value{ width:80px; text-align:right; color:#555; }

    #reportModalBackdrop .pill{
      display:inline-flex; align-items:center;
      padding:4px 8px; border-radius:999px;
      border:1px solid #eef0f3; background:#fff;
      margin:4px 6px 0 0; font-size:12px; color:#444;
    }



    /* Fix: Lock the background page firmly on mobile so the overlay works */
    body.modal-open {
      overflow: hidden;
      position: fixed; /* Critical for iOS/Mobile */
      width: 100%;
      height: 100%;
    }

    /* Stronger mask only for the auth dialog */
    #authModalBackdrop{
      background: rgba(16,17,20,.65);   /* darker than the generic .modal-backdrop */
      backdrop-filter: blur(2px);        /* tasteful blur; safe to remove if you prefer */
    }

    #authCloseBtn[aria-disabled="true"]{
      opacity:.45;
      pointer-events:none;
      cursor:default;
    }

    /* Make inline “Manage plan” pop inside system bubbles */
    .bubble i .cta-manage-plan{
      font-style: normal;          /* cancel <i> italics */
      color: #111;                 /* override muted */
      display: inline-block;
      padding: 4px 10px;
      border: 1px solid #ffd7a6;   /* matches your warm palette */
      border-radius: 999px;
      background: #fff7e6;
      font-weight: 700;
      text-decoration: none;
      margin-left: 6px;
    }
    .bubble i .cta-manage-plan:hover{
      background: #fff0cc;
      border-color: #ffc66d;
    }

    /* Generic buttons */
    .btn{
      appearance:none; border:1px solid #e5e7eb; background:#fff; color:#111;
      font-weight:600; border-radius:10px; padding:8px 12px; cursor:pointer;
      transition:transform .06s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
      box-shadow: var(--shadow-md);
    }
    .btn:active{ transform: translateY(1px); }

    /* Size */
    .btn-sm{ padding:6px 10px; font-size:12px; border-radius:9px; }

    /* Variants */
    .btn-primary{
      background: linear-gradient(90deg, var(--sf-orange), var(--sf-yellow));
      border-color: transparent;
    }
    .btn-primary:hover{ filter: brightness(0.98); }

    .btn-secondary{
      background:#f6f7fb;
      border-color:#e8eaf0;
    }
    .btn-secondary:hover{ background:#eef1f7; }

    .btn-outline{
      background:#fff;
      border-color:#e5e7eb;
    }
    .btn-outline:hover{ background:#fafbff; }

    .btn-danger{
      background:#ef4444; color:#fff; border-color:#ef4444;
    }
    .btn-danger:hover{ background:#dc2626; border-color:#dc2626; }

    /* Tighten buttons inside scenario cards */
    #libraryModalBackdrop .scn-card .scn-actions .btn{ box-shadow:none; }
    #libraryModalBackdrop .scn-card .scn-actions .btn + .btn{ margin-left:6px; }

    /* Hide the plan chip until JS sets the real tier */
    #currentPlanLabel[data-sf-tier="pending"] { 
      visibility: hidden; 
      /* optional polish */
      opacity: 0; 
      transition: opacity .18s ease; 
    }
    #currentPlanLabel:not([data-sf-tier="pending"]) {
      visibility: visible;
      opacity: 1;
    }

    /* --- Settings Modal Layout --- */
    .settings-container {
      max-width: 640px; /* Keeps it readable */
      margin: 0 auto;
    }
    .settings-section {
      padding: 24px 0;
      border-top: 1px solid var(--line);
    }
    .settings-section:first-child {
      padding-top: 4px;
      border-top: 0;
    }
    .settings-section label {
      display: block;
      font-weight: 600;
    }
    .settings-section .input {
      width: 100%;
      max-width: 400px; /* Stop email field from being full width */
    }
    /* --- End Settings --- */

        /* Auth gate */
    .tab-panel{display:none}
    .tab-panel.is-active{display:block}
    .tab.is-active{ /* match your markup’s class */
      background:linear-gradient(90deg,var(--sf-orange),var(--sf-yellow));
      border-color:transparent;
    }
    #authDialog label{display:block;margin:8px 0 6px}
    #authDialog .input{width:100%;margin:6px 0}
    #authDialog .auth-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}

        #sendSpinner[hidden] { display: none; }
    #sendSpinner {
      display: inline-block;
      width: 1rem; height: 1rem; margin-left: .5rem;
      border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Mic active state (pulsing red) */
    #micIcon.listening { stroke: #ef4444; filter: drop-shadow(0 0 2px #ef4444); animation: pulseMic 1.5s infinite; }
    @keyframes pulseMic { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

    /* --- Sales Flair Tour Branding (Shepherd.js Overrides) --- */

    /* 1. The Main Box */
    .shepherd-element {
        font-family: 'Gantari', sans-serif !important;
        filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15));
        border: 1px solid var(--line) !important;
        border-radius: 12px !important;
        max-width: 400px;
        z-index: 9999 !important; /* Force on top */
        background: #fff !important; 
    }

    /* 2. The Header (Title) */
    .shepherd-header {
        background: #ffffff !important;
        border-bottom: none !important;
        padding: 20px 20px 0 20px !important;
        border-radius: 12px 12px 0 0 !important;
    }

    .shepherd-title {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: var(--sf-ink) !important;
    }

    /* 3. The Body Text */
    .shepherd-text {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        color: var(--sf-muted) !important;
        padding: 12px 20px !important;
    }

    /* 4. The Footer (Buttons) */
    .shepherd-footer {
        padding: 0 20px 20px 20px !important;
        border-radius: 0 0 12px 12px !important;
    }

    /* 5. Buttons */
    .shepherd-button {
        border-radius: 6px !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        padding: 8px 16px !important;
        transition: all 0.2s ease;
        text-transform: capitalize;
    }

    /* Primary Button (Next) -> Sales Flair Orange Gradient with BLACK Text */
    .shepherd-button.btn-primary {
        background: linear-gradient(90deg, var(--sf-orange), var(--sf-yellow)) !important; 
        color: #111111 !important;  /* Force Black Text */
        border: none !important;    /* Remove border to match btn-brand style */
        box-shadow: var(--shadow-md);
    }
    .shepherd-button.btn-primary:hover {
        filter: brightness(0.98); /* Subtle hover effect */
    }

    /* Secondary Button (Back) -> Simple Grey */
    .shepherd-button.btn-secondary {
        background-color: transparent !important;
        color: var(--sf-muted) !important;
        border: 1px solid var(--line) !important;
        margin-right: 8px !important;
    }
    .shepherd-button.btn-secondary:hover {
        background-color: #f3f4f6 !important;
        color: var(--sf-ink) !important;
    }

    /* 6. The "Arrow" */
    .shepherd-arrow, .shepherd-arrow:before {
        background-color: #ffffff !important; 
    }

    .lib-panel{display:none}
    .lib-panel.is-active{display:block}

    #sfToastHost { position: fixed; right: 16px; bottom: 16px; z-index: 6000; }
    .sf-toast { background:#111; color:#fff; padding:10px 14px; border-radius:10px; margin-top:8px; box-shadow:0 6px 20px rgba(0,0,0,.2); }

    #sfConfirmBackdrop{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);z-index:5001}
    .sf-confirm{background:#fff;max-width:420px;width:calc(100% - 32px);border-radius:12px;padding:16px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
    .sf-confirm h3{margin:0 0 8px 0;font-size:1.1rem}
    .sf-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
    .sf-btn{padding:8px 12px;border-radius:8px;border:1px solid #ddd;background:#f5f5f5;cursor:pointer}
    .sf-btn.primary{background:#111;color:#fff;border-color:#111}
  
  /* --- PRINT STYLES (Final Fix: No Blank Page + Correct Order) --- */
    @media print {
      /* 1. Collapse all non-print elements to remove blank pages */
      body > *:not(#reportModalBackdrop) { 
        display: none !important; 
      }

      /* 2. Reset the Modal Backdrop to be the document root */
      #reportModalBackdrop { 
        display: block !important; 
        position: absolute !important; 
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        background: white !important;
        z-index: 9999 !important;
        overflow: visible !important;
      }

      /* 3. Reset Modal Box */
      #reportModalBackdrop .modal {
        position: static !important; 
        box-shadow: none !important; 
        border: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      /* 4. REORDERING MAGIC: Use Flexbox to force Coaching Log first */
      #reportModalBackdrop .modal-bd {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
      }

      /* Order 1: Coaching Log (First) */
      #tab-coaching { 
        order: 1 !important; 
        display: block !important; 
        visibility: visible !important;
        height: auto !important;
        opacity: 1 !important;
      }

      /* Order 2: Transcript (Second, on new page) */
      #tab-transcript { 
        order: 2 !important; 
        display: block !important; 
        visibility: visible !important;
        height: auto !important;
        opacity: 1 !important;
        break-before: page;       
        page-break-before: always; 
        margin-top: 0 !important;
        border-top: none !important;
      }

      /* Hide other tabs (like the general Coach Analysis) to keep report focused */
      #tab-coach { display: none !important; }

      /* 5. Hide UI Controls */
      #closeReportBtn, #modalExportBtn, .tabs, .modal-hd button {
        display: none !important; 
      }

      /* 6. Transcript Header for Print */
      #tab-transcript::before {
        content: "Appendix: Full Conversation Transcript";
        display: block;
        font-size: 18px;
        font-weight: 700;
        margin: 30px 0 15px 0;
        padding-top: 20px;
        border-top: 2px solid #eee;
        color: #111;
        text-transform: uppercase;
      }

      /* 7. Styling fixes */
      .timeline .row {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        border: 1px solid #ccc !important;
        margin-bottom: 15px !important;
      }
      * { -webkit-print-color-adjust: exact; print-color-adjust: exact; color: black !important; }
    }

    /* --- Cookie Banner Styles (Brand Aligned) --- */
    #cookieBanner {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: var(--brand-white);
        border-top: 1px solid var(--brand-slate-200);
        box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        z-index: 9999;
        font-family: 'Gantari', sans-serif;
        display: none;
    }

    #cookieBanner.visible {
        display: block;
    }

    #cookieBanner .container {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
    }

    @media (min-width: 768px) {
        #cookieBanner .container {
            flex-direction: row;
        }
    }

    #cookieBanner p {
        margin: 0;
        color: var(--brand-slate-900); /* Dark Grey for text */
        font-size: 0.875rem;
        line-height: 1.5;
    }

    #cookieBanner a {
        color: var(--brand-orange);
        text-decoration: none;
        font-weight: 600;
    }

    #cookieBanner a:hover {
        text-decoration: underline;
    }

    #cookieBanner .btn-group {
        display: flex;
        gap: 0.75rem;
    }

    /* Force override for Accept Button */
    #cookieBanner button#acceptCookiesBtn {
        background-color: #FF6600 !important; /* Brand Orange */
        color: #FFFFFF !important; /* Brand White */
        border: 1px solid #FF6600 !important;
        padding: 0.5rem 1.5rem;
        border-radius: 0.25rem;
        font-size: 0.875rem;
        font-weight: 700;
        cursor: pointer;
        transition: background-color 0.2s;
        height: auto !important; /* Prevent height collapse */
        line-height: normal !important;
    }

    #cookieBanner button#acceptCookiesBtn:hover {
        background-color: #E65C00 !important; /* Darker orange */
        border-color: #E65C00 !important;
    }

    /* Force override for Decline Button */
    #cookieBanner button#declineCookiesBtn {
        background-color: transparent !important;
        color: var(--brand-slate-600) !important; /* Mid Grey */
        border: 1px solid var(--brand-slate-200) !important;
        padding: 0.5rem 1.5rem;
        border-radius: 0.25rem;
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        height: auto !important;
        line-height: normal !important;
    }

    #cookieBanner button#declineCookiesBtn:hover {
        color: var(--brand-slate-900) !important; /* Dark Grey */
        border-color: var(--brand-slate-600) !important;
    }

    /* --- APP.CSS ADDITIONS --- */

/* 1. Microphone Animation (Brand Aligned) */
#micIcon.listening { 
    stroke: #E4002B; /* Energetic Red */
    filter: drop-shadow(0 0 4px rgba(228, 0, 43, 0.4)); 
    animation: pulseMic 1.5s infinite ease-in-out; 
}

@keyframes pulseMic { 
    0% { transform: scale(1); opacity: 1; } 
    50% { transform: scale(1.1); opacity: 0.8; stroke: #FF6600; /* Pulse to Orange */ } 
    100% { transform: scale(1); opacity: 1; } 
}

/* 2. Branded Toast Container (Bottom Right) */
#sf-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10000; /* Top layer */
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none; /* Allow clicks through empty space */
}

/* 3. The Premium Pill Toast */
.sf-toast-pill {
    pointer-events: auto;
    background: #FFFFFF;
    color: #2C3E50; /* Brand Dark Grey */
    font-family: 'Gantari', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 20px;
    border-radius: 999px; /* Pill Shape */
    border: 1px solid #eef0f3;
    box-shadow: 0 8px 20px rgba(16, 17, 20, 0.12); /* Premium Shadow */
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: 400px;
    
    /* Animation Entry */
    opacity: 0;
    transform: translateY(20px);
    animation: toastSlideUp 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes toastSlideUp {
    to { opacity: 1; transform: translateY(0); }
}

/* 4. Toast Variants (Accents) */
/* Success: Green Dot */
.sf-toast-pill.success::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e; /* Success Green */
    flex-shrink: 0;
}

/* Error: Red Dot */
.sf-toast-pill.error::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E4002B; /* Brand Red */
    flex-shrink: 0;
}

/* Info: Orange Dot */
.sf-toast-pill.info::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FF6600; /* Brand Orange */
    flex-shrink: 0;
}

/* --- Unified Neutral Scrollbar (App-Wide Alignment) --- */
/* Applies consistent grey styling to Scenarios, Setup, Report, and Transcripts */

#scenarioListContainer::-webkit-scrollbar,           /* Your Scenarios */
#setupModalBackdrop .modal-bd::-webkit-scrollbar,     /* Full Setup */
#reportModalBackdrop .modal-bd::-webkit-scrollbar,    /* Full Report (Main Body) */
#reportModalBackdrop .transcript::-webkit-scrollbar,  /* Full Report (Transcript Tab) */
.scroll-block::-webkit-scrollbar {                    /* Briefing text blocks */
    width: 6px; /* Slim and modern */
    height: 6px; /* For horizontal scrolling if needed */
}

/* Track: Transparent for a cleaner look */
#scenarioListContainer::-webkit-scrollbar-track,
#setupModalBackdrop .modal-bd::-webkit-scrollbar-track,
#reportModalBackdrop .modal-bd::-webkit-scrollbar-track,
#reportModalBackdrop .transcript::-webkit-scrollbar-track,
.scroll-block::-webkit-scrollbar-track {
    background: transparent; 
}

/* Thumb: Neutral Grey (Matches standard UI) */
#scenarioListContainer::-webkit-scrollbar-thumb,
#setupModalBackdrop .modal-bd::-webkit-scrollbar-thumb,
#reportModalBackdrop .modal-bd::-webkit-scrollbar-thumb,
#reportModalBackdrop .transcript::-webkit-scrollbar-thumb,
.scroll-block::-webkit-scrollbar-thumb {
    background: #d1d5db; /* Light Grey (Slate-300) */
    border-radius: 99px;
}

/* Hover: Slightly darker grey (No Orange) */
#scenarioListContainer::-webkit-scrollbar-thumb:hover,
#setupModalBackdrop .modal-bd::-webkit-scrollbar-thumb:hover,
#reportModalBackdrop .modal-bd::-webkit-scrollbar-thumb:hover,
#reportModalBackdrop .transcript::-webkit-scrollbar-thumb:hover,
.scroll-block::-webkit-scrollbar-thumb:hover {
    background: #9ca3af; /* Mid Grey (Slate-400) */
}

/* --- Scenario Card Action Menu --- */
.scn-actions { position: relative; display: flex; align-items: center; gap: 8px; }

.btn-icon {
  background: transparent; border: 1px solid transparent; 
  color: #6b7280; border-radius: 6px; 
  padding: 4px; cursor: pointer; display: flex; 
  align-items: center; justify-content: center;
  transition: all 0.2s;
}
.btn-icon:hover { background: #f3f4f6; color: #111; }
.btn-icon.active { background: #e5e7eb; color: #111; }

/* The Dropdown */
.scn-dropdown {
  position: absolute; top: 100%; right: 0; 
  margin-top: 4px; width: 160px;
  background: white; border: 1px solid #e5e7eb; 
  border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  z-index: 50; display: none; overflow: hidden;
}
.scn-dropdown.show { display: block; }

.scn-dropdown button {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; background: none; border: none;
  font-size: 13px; color: #374151; cursor: pointer;
}
.scn-dropdown button:hover { background: #f9fafb; color: #111; }
.scn-dropdown button.danger { color: #dc2626; }
.scn-dropdown button.danger:hover { background: #fef2f2; }

/* --- MOBILE LAYOUT FIXES --- */

/* 1. Prevent horizontal scrolling globally */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* 2. Constrain the main shell width */
.shell, .container {
  width: 100%; 
  max-width: 100vw;
  padding-left: 16px; 
  padding-right: 16px;
  overflow-x: hidden;
}

/* 3. Ensure panels/cards don't force width */
.workspace, .card, .panel, .chat {
  max-width: 100%;
  box-sizing: border-box;
}

/* 4. Fix Chat Box width specifically */
.chat {
  width: auto; /* Let it shrink */
  min-width: 0; /* Allow flex shrinking */
}

/* 5. Fix Briefing Pre-formatted text blowing out width */
.scroll-block {
  word-wrap: break-word;
  white-space: pre-wrap; /* Wrap long lines */
  max-width: 100%;
}

/* --- MOBILE LAYOUT FIXES (Updated) --- */
@media (max-width: 980px) {
    /* 1. LAYOUT & ORDERING */
    /* Force Workspace to Column Flex to fix width issues */
    .app-grid, .workspace {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        max-width: 100vw;
        padding: 0 16px;
        box-sizing: border-box;
    }

    /* RE-ORDER PANELS: Restore Desktop visual order on Mobile */
    /* Visual Order: Briefing -> Simulation -> Notes -> Instant Feedback */
    .brief   { order: 1; }
    .sim     { order: 2; }
    .notes   { order: 3; }
    .instant { order: 4; }

    /* 2. CARD CONSTRAINTS */
    .card, .panel, .brief-panel, .sim-panel, .notes-panel, .instant-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    
    /* Prevent text blowouts */
    p, li, span, h1, h2, h3, .scroll-block {
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

    /* 3. FIX HEADER (Logout Cut-Off) */
    /* Allow the right-side buttons to wrap to a new line if needed */
    .app-header .container > div:last-child {
        flex-wrap: wrap !important;
        justify-content: center; /* Center them if they wrap */
        gap: 8px !important;
    }
    
    /* 4. FIX SIMULATION BUTTONS (Send/End Cut-Off) */
    /* Allow the composer to wrap or shrink the input properly */
    .composer {
        flex-wrap: wrap; 
        gap: 8px;
    }
    /* Ensure input can shrink below its default size */
    .composer .input {
        min-width: 0; 
        flex: 1 1 auto;
    }
    /* Ensure buttons don't have rigid margins pushing them out */
    .composer button {
        flex-shrink: 0;
    }
}

/* --- VOICE INPUT PREMIUM UI (Concept B - Flex Fix) --- */

/* 1. The Mic Button (Idle & Active States) */
#microphoneBtn {
    transition: all 0.2s ease;
    color: var(--sf-muted);
    border: 1px solid #e5e7eb;
}

/* Active Recording State: Red outline, Red Icon, Soft Glow */
#microphoneBtn.recording-active {
    background: #fff !important;
    border-color: var(--brand-red) !important;
    color: var(--brand-red) !important;
    box-shadow: 0 0 0 4px rgba(228, 0, 43, 0.15); /* Soft premium glow */
    z-index: 10; /* Ensure it stays clickable */
}

#microphoneBtn.recording-active svg {
    animation: micPulse 1.5s infinite ease-in-out;
}

/* Processing State (Orange Spin) */
#microphoneBtn.processing {
    background: #fff !important;
    border-color: var(--brand-orange) !important;
    color: var(--brand-orange) !important;
    cursor: wait;
}

#microphoneBtn.processing svg {
    animation: spin 1s linear infinite;
}

/* 2. The Input Takeover (Flex Swap) */
/* Instead of absolute positioning, we make it a flex child that fills space */
.voice-visualizer {
    flex: 1; /* Grow to fill the space left by the hidden input */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--brand-red);
    height: 44px; /* Matches standard input height */
    margin: 0 4px; /* Small breathing room */
    animation: fadeIn 0.2s ease-out;
}

/* --- Visualizer Text Styling --- */
.visualizer-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-red);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap; /* Keep nowrap for desktop */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* MOBILE FIX: Shorten text handling */
@media (max-width: 600px) {
    .visualizer-text {
        font-size: 11px; /* Slightly smaller font */
        letter-spacing: 0px; /* Tighter spacing */
        white-space: normal; /* Allow wrapping if absolutely needed */
        text-align: center;
        line-height: 1.2;
    }
    
    /* Ensure the icon scales down slightly too */
    .inline-icon-svg {
        width: 10px;
        height: 10px;
        margin: 0 1px 2px 1px;
    }
}

/* The Equalizer Bars */
.audio-bars {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 16px;
}

.bar {
    width: 3px;
    background-color: var(--brand-red);
    border-radius: 99px;
    animation: equalize 0.5s infinite ease-in-out alternate;
}

.bar:nth-child(1) { height: 6px; animation-delay: -0.4s; }
.bar:nth-child(2) { height: 12px; animation-delay: -0.2s; }
.bar:nth-child(3) { height: 16px; animation-delay: 0s; }
.bar:nth-child(4) { height: 12px; animation-delay: -0.3s; }
.bar:nth-child(5) { height: 8px; animation-delay: -0.5s; }

@keyframes equalize {
    0% { height: 4px; opacity: 0.5; }
    100% { height: 100%; opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* --- VOICE UI REFINEMENTS --- */

/* 1. Disabled State (Safety) */
#microphoneBtn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f9fafb;
    border-color: #e5e7eb;
    color: #9ca3af;
}

/* 2. Inline Icon in the "Listening" Text */
.inline-icon-svg {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin: 0 2px 2px 2px; /* Slight alignment tweaks */
    fill: currentColor;
    display: inline-block;
}