:root {
        --bg: #0b0f1a;
        --primary: #00529b;
        --primary-rgb: 0, 82, 155;
        --secondary: #8b5cf6;
        --accent: #ff6b9d;
        --danger: #ff4d6d;
        --text: #ffffff;
        --muted: #cbd5e1;
        --success: #10b981;
        --tenant-text: #ffffff;
        
        /* Button Colors */
        --btn-bg: rgba(255, 255, 255, 0.03);
        --btn-border: rgba(255, 255, 255, 0.15);
        --btn-text: var(--muted);
        --btn-hover-bg: rgba(255, 255, 255, 0.1);
        --btn-hover-border: rgba(255, 255, 255, 0.3);
      }

      /* Theme Support */
      [data-theme="light"] {
        --bg: #f8fafc;
        --primary: #00529b;
        --primary-rgb: 0, 82, 155;
        --secondary: #8b5cf6;
        --accent: #ec4899;
        --text: #1e293b;
        --muted: #64748b;
        --tenant-text: #00529b;
        
        /* Light Theme Button Colors */
        --btn-bg: rgba(255, 255, 255, 0.6);
        --btn-border: rgba(0, 0, 0, 0.1);
        --btn-text: #64748b;
        --btn-hover-bg: #fff;
        --btn-hover-border: rgba(0, 0, 0, 0.2);
      }

      body {
        font-family: "Inter", Arial, sans-serif;
        padding: 0;
        margin: 0;
        min-height: 100vh;
        
        /* New Background */
        background: radial-gradient(ellipse at center top, #1a1f35, #0a0d15);
        color: var(--text);
        
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-start;
        overflow-x: hidden; /* Only hide horizontal overflow to prevent scroll */
        overflow-y: auto;
        position: relative;
      }

      /* Light Theme Body Overrides */
      body[data-theme="light"] {
        background: radial-gradient(ellipse at center top, #e2e8f0, #f8fafc);
        color: var(--text);
      }

      /* Background Pattern Overlay */
      body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect fill="%230b0f1a" width="100" height="100"/><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.03"/></svg>');
        pointer-events: none;
        z-index: 0;
      }

      body[data-theme="light"]::before {
        opacity: 0.4;
        filter: invert(1);
      }

      /* Background Glow */
      body::after {
        content: "";
        position: fixed;
        top: 50%;
        left: 50%;
        width: 800px;
        height: 800px;
        margin-left: -400px;
        margin-top: -400px;
        background: radial-gradient(
          circle,
          rgba(var(--primary-rgb), 0.08) 0%,
          transparent 70%
        );
        pointer-events: none;
        z-index: 1;
        filter: blur(60px);
      }

      body[data-theme="light"]::after {
        background: radial-gradient(
          circle,
          rgba(var(--primary-rgb), 0.08) 0%,
          transparent 70%
        );
      }

      .wavy-lines {
        position: fixed;
        bottom: 120px;
        left: 0;
        width: 100%;
        height: 100px;
        pointer-events: none;
        z-index: 3;
      }

      svg.wavy-line {
        display: block;
        width: 100%;
        height: 100%;
      }

      .wavy-path {
        fill: none;
        stroke: rgba(var(--primary-rgb), 0.4);
        stroke-width: 2;
        stroke-linecap: round;
      }

      .wavy-path:nth-child(1) {
        stroke: rgba(var(--primary-rgb), 0.3);
        animation: wave-flow 8s linear infinite;
      }

      .wavy-path:nth-child(2) {
        stroke: rgba(139, 92, 246, 0.2);
        animation: wave-flow 10s linear infinite 1s;
      }

      .wavy-path:nth-child(3) {
        stroke: rgba(var(--primary-rgb), 0.15);
        animation: wave-flow 12s linear infinite 2s;
      }

      @keyframes wave-flow {
        0% {
          d: path(
            "M0,30 Q50,10 100,30 T200,30 T300,30 T400,30 T500,30 T600,30 T700,30 T800,30 T900,30 T1000,30 T1100,30 T1200,30 T1300,30 T1400,30"
          );
        }
        50% {
          d: path(
            "M0,30 Q50,50 100,30 T200,30 T300,30 T400,30 T500,30 T600,30 T700,30 T800,30 T900,30 T1000,30 T1100,30 T1200,30 T1300,30 T1400,30"
          );
        }
        100% {
          d: path(
            "M0,30 Q50,10 100,30 T200,30 T300,30 T400,30 T500,30 T600,30 T700,30 T800,30 T900,30 T1000,30 T1100,30 T1200,30 T1300,30 T1400,30"
          );
        }
      }
      
      [data-theme="light"] .wavy-path {
        stroke: rgba(var(--primary-rgb), 0.3);
      }

      /* New Orb and Agent Card Styles */
      .agent-cards-wrapper {
         /* Override legacy grid to center the orb card - Robust !important overrides */
         display: flex !important;
         justify-content: center !important;
         align-items: center !important;
         width: 100% !important;
         flex-direction: column !important;
         gap: 0 !important;
         margin-top: 20px !important;
         padding: 0 20px !important;
         box-sizing: border-box !important;
      }

      .agent-card {
        position: relative;
        z-index: 10;
        width: 100% !important;
        max-width: 400px !important;
        flex: 0 1 auto !important; /* Reset legacy flex sizing */
        padding: 40px 30px !important;
        margin: 0 !important;
        border-radius: 32px;
        background: rgba(13, 17, 28, 0.75);
        backdrop-filter: blur(30px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow:
          0 20px 50px rgba(0, 0, 0, 0.5),
          inset 0 1px 1px rgba(255, 255, 255, 0.1);
        text-align: center;
        display: none; /* Hidden by default */
        flex-direction: column !important;
        align-items: center !important;
        color: var(--text);
        transition: transform 0.3s ease;
        box-sizing: border-box !important;
      }
      
      .agent-card.active {
          display: flex !important;
      }

      [data-theme="light"] .agent-card {
        background: rgba(255, 255, 255, 0.75);
        border-color: rgba(255, 255, 255, 0.4);
        box-shadow: 
          0 20px 50px rgba(0,0,0,0.05),
          inset 0 1px 1px rgba(255,255,255,0.8);
      }

      .orb-container {
        position: relative;
        width: 180px;
        height: 180px;
        margin: 0 0 32px 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .orb {
        position: relative;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        overflow: hidden;
        background: #000;
        box-shadow:
          0 0 30px rgba(var(--primary-rgb), 0.1),
          inset 0 0 20px rgba(0, 0, 0, 0.5);
        z-index: 5;
        transition: all 0.5s ease;
      }
      
      [data-theme="light"] .orb {
        background: rgba(226, 232, 240, 0.3);
        box-shadow:
          0 0 30px rgba(var(--primary-rgb), 0.1),
          inset 0 0 20px rgba(255, 255, 255, 0.5);
      }

      .orb-visual {
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background:
          radial-gradient(
            circle at 50% 50%,
            rgba(var(--primary-rgb), 0.8),
            transparent 40%
          ),
          radial-gradient(
            circle at 80% 30%,
            rgba(139, 92, 246, 0.8),
            transparent 40%
          ),
          radial-gradient(
            circle at 20% 70%,
            rgba(255, 107, 157, 0.6),
            transparent 40%
          );
        filter: blur(20px);
        animation: rotate-fluid 6s linear infinite;
        opacity: 0.8;
      }

      .orb::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          circle at 30% 30%,
          rgba(255, 255, 255, 0.2),
          transparent 60%
        );
        border-radius: 50%;
        z-index: 2;
      }
      
      [data-theme="light"] .orb::after {
        background: radial-gradient(
          circle at 30% 30%,
          rgba(255, 255, 255, 0.9),
          transparent 60%
        );
      }

      .orb.listening .orb-visual {
        animation: rotate-fluid 2s linear infinite;
        filter: blur(15px) contrast(1.2);
      }

      .orb.thinking .orb-visual {
        animation: rotate-fluid 1s linear infinite;
        filter: hue-rotate(90deg) blur(20px);
      }

      .orb.speaking .orb-visual {
        animation: rotate-fluid 3s linear infinite;
        background:
          radial-gradient(
            circle at 50% 50%,
            rgba(var(--primary-rgb), 0.9),
            transparent 50%
          ),
          radial-gradient(
            circle at 80% 30%,
            rgba(255, 255, 255, 0.8),
            transparent 40%
          ),
          radial-gradient(
            circle at 20% 70%,
            rgba(var(--primary-rgb), 0.6),
            transparent 40%
          );
      }

      @keyframes rotate-fluid {
        0% { transform: rotate(0deg) scale(1); }
        50% { transform: rotate(180deg) scale(1.1); }
        100% { transform: rotate(360deg) scale(1); }
      }

      /* Mic button centered in orb */
      .mic-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: none;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(5px);
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        z-index: 10;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      }
      
      [data-theme="light"] .mic-btn {
        background: rgba(255, 255, 255, 0.6);
        color: var(--primary);
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      }

      .mic-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: translate(-50%, -50%) scale(1.1);
      }
      
      [data-theme="light"] .mic-btn:hover {
        background: rgba(255, 255, 255, 0.9);
      }

      .mic-btn.recording,
      .agent-call-btn.recording,
      .agent-call-btn.stop-state {
        background: rgba(255, 77, 109, 0.8) !important;
        box-shadow: 0 0 20px rgba(255, 77, 109, 0.4);
        animation: pulse-red 2s infinite;
        color: #ffffff !important;
      }
      
      .mic-btn.recording:hover,
      .agent-call-btn.recording:hover,
      .agent-call-btn.stop-state:hover {
        background: rgba(255, 77, 109, 1) !important;
      }
      
      @keyframes pulse-red {
        0% { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0.4); }
        70% { box-shadow: 0 0 0 10px rgba(255, 77, 109, 0); }
        100% { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0); }
      }

      /* Disabled button state */
      .mic-btn:disabled,
      .agent-call-btn:disabled {
        cursor: not-allowed !important;
        opacity: 0.6;
        pointer-events: auto; /* Keep pointer events to show cursor */
      }

      .mic-btn:disabled:hover,
      .agent-call-btn:disabled:hover {
        transform: translate(-50%, -50%) scale(1) !important; /* Prevent scale on hover */
      }

      .header-minimal {
          display: none !important;
          align-items: center;
          justify-content: center;
          width: 100%;
          margin-bottom: 20px;
          gap: 10px;
          flex-direction: column;
      }
      
      .agent-card.in-call .header-minimal {
          display: flex !important;
      }
      
      .status-pill {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
        color: var(--muted);
      }
      
      [data-theme="light"] .status-pill {
         background: rgba(0,0,0,0.03);
         border-color: rgba(0,0,0,0.05);
      }

      .status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--muted);
      }

      .status-dot.active {
        background: var(--success);
        box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
      }

      /* Hide Legacy Elements */
      #micBtn, #mic-state, .call-status, .agent-meter, .agent-call-btn:not(.mic-btn), .agent-icon-circle {
         display: none !important;
      }

      #sidebar {
        position: fixed;
        top: 0;
        right: 0;
        width: 320px;
        max-width: 100vw;
        height: 100vh;
        background: #0b0f1a;
        z-index: 9999;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateX(100%);
        display: flex;
        flex-direction: column;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: -10px 0 30px rgba(0,0,0,0.3);
        padding: 0;
        display: none;
        box-sizing: border-box;
      }

      #sidebar.visible {
        display: flex;
      }

      [data-theme="light"] #sidebar {
        background: #f8fafc;
        border-left: 1px solid rgba(0, 0, 0, 0.1);
      }

      #sidebar.open {
        transform: translateX(0);
      }
      
      /* Reset legacy collapsed */
      #sidebar.collapsed { width: 320px; transform: translateX(0); } /* Don't rely on 'collapsed' use 'open' instead for logic */
      
      /* Responsive sidebar - ensure it fits on smaller screens */
      @media (max-width: 400px) {
        #sidebar {
          width: 100vw;
        }
      }
      
      /* Sidebar Internal Elements */
      .sidebar-header {
        padding: 12px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }

      [data-theme="light"] .sidebar-header {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      }

      .sidebar-header h3 {
        margin: 0;
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--text);
      }

      .close-btn {
        background: none;
        border: none;
        color: var(--muted);
        font-size: 20px;
        cursor: pointer;
        padding: 4px;
        transition: color 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .close-btn:hover {
        color: var(--text);
      }
      
      /* Sidebar Tab Styles */
      .sidebar-tabs {
        display: flex;
        padding: 0 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        gap: 16px;
      }
      
      [data-theme="light"] .sidebar-tabs {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      }
      
      .tab-btn {
        background: none;
        border: none;
        padding: 12px 4px;
        color: var(--muted);
        font-size: 0.9rem;
        cursor: pointer;
        position: relative;
        font-weight: 500;
        transition: color 0.2s;
      }
      
      .tab-btn:hover {
        color: var(--text);
      }
      
      .tab-btn.active {
        color: var(--primary);
      }
      
      .tab-btn.active::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--primary);
        border-radius: 2px 2px 0 0;
      }
      
      .tab-content {
        display: none;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
      }
      
      .tab-content.active {
        display: flex;
      }

      /* Chat / Transcript Elements */
      .chat-container, #transcript {
        padding: 24px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex: 1;
        /* Ensure scroll works and override legacy */
        min-height: 0; 
        max-height: none;
        background: transparent;
        border: none;
        box-shadow: none;
      }
      
      .chat-message {
        display: flex;
        flex-direction: column;
        gap: 4px;
        max-width: 85%;
        width: fit-content; /* Ensure bubble embraces text */
        animation: slideIn 0.3s ease;
        position: relative;
      }

      @keyframes slideIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
      }

      .chat-message.user-speech {
        align-self: flex-end;
        align-items: flex-end;
      }
      
      .chat-message.bot-speech {
        align-self: flex-start;
        align-items: flex-start;
      }
      
      .chat-message.info {
        align-self: center;
        align-items: start;
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        font-size: 10px !important;
      }

      .message-content {
        padding: 10px 14px;
        border-radius: 12px;
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word;
      }

      .chat-message.user-speech .message-content {
        background: var(--primary);
        color: #fff;
        border-radius: 12px 12px 2px 12px;
        font-size: 12px;
      }

      .chat-message.bot-speech .message-content {
        background: rgba(255, 255, 255, 0.05);
        color: var(--text);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px 12px 12px 0px;
        font-size: 12px;
      }
      
      [data-theme="light"] .chat-message.bot-speech .message-content {
        background: #ffffff;
        color: var(--text);
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      }
      
      .message-meta {
        display: flex;
        gap: 8px;
        font-size: 0.7rem;
        color: var(--muted);
        opacity: 0.7;
        margin-top: 2px;
      }
      
      .meta-item {
        display: flex;
        align-items: center;
        gap: 4px;
      }
      
      .meta-item.hidden {
          display: none !important;
      }
      
      /* Status List */
      .status-list {
        padding: 0;
        display: flex;
        flex-direction: column;
        font-family: monospace;
        font-size: 0.85rem;
        overflow-y: auto;
        flex: 1;
      }

      .event-item {
        display: flex;
        gap: 8px;
        padding: 4px 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        color: var(--muted);
        align-items: flex-start;
        font-size: 10px;
      }
      
      [data-theme="light"] .event-item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.03);
      }
      
      /* Checkbox Controls */
      .sidebar-controls-checkbox {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 24px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        margin-top: 16px;
      }

      [data-theme="light"] .sidebar-controls-checkbox {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      }

      .checkbox-container {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        font-size: 0.8rem;
        color: var(--muted);
        user-select: none;
        position: relative;
        padding-left: 24px;
      }
      
      .checkbox-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
      }
      
      .checkmark {
        position: absolute;
        left: 0;
        top: 0;
        height: 16px;
        width: 16px;
        background-color: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 4px;
        transition: all 0.2s;
      }
      
      [data-theme="light"] .checkmark {
        background-color: rgba(0,0,0,0.05);
        border-color: rgba(0,0,0,0.15);
      }
      
      .checkbox-container input:checked ~ .checkmark {
        background-color: var(--primary);
        border-color: var(--primary);
      }
      
      .checkmark:after {
        content: "";
        position: absolute;
        display: none;
      }

      .hidden {
        display: none !important;
      }
      
      .checkbox-container input:checked ~ .checkmark:after {
        display: block;
      }
      
      .checkbox-container .checkmark:after {
        left: 6px;
        top: 2px;
        width: 4px;
        height: 8px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }
      #sidebar-toggle-btn {
        position: absolute;
        left: -32px;
        top: 24px;
        width: 32px;
        height: 32px;
        background: #00529b;
        color: #fff;
        border: none;
        border-radius: 16px 0 0 16px;
        box-shadow: 0 2px 8px 0 rgba(0, 82, 155, 0.1);
        cursor: pointer;
        z-index: 210;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3em;
        transition: background 0.2s;
      }
      #sidebar-toggle-btn:hover {
        background: #00bfff;
      }
      #sidebar.collapsed #main-container {
        display: none;
      }
      #center-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        width: 100%;
      }

      /* Page Heading Styles */
      .page-heading {
        color: #ffffff !important;
        font-size: 2.5rem !important;
        font-weight: 700 !important;
        text-shadow: 0 2px 20px rgba(255, 255, 255, 0.1) !important;
        margin: 40px 0 20px 0 !important;
        z-index: 10 !important;
        position: relative !important;
      }

      body[data-theme="light"] .page-heading {
        color: #00529b !important;
        text-shadow: none !important;
      }

      /* Optimize layout for wide screens with limited height */
      @media (min-width: 1200px) and (max-height: 650px) {
        #center-content {
          justify-content: flex-start;
          padding-top: 50px;
          min-height: auto;
        }
      }
      #main-container {
        background: none;
        box-shadow: none;
        border: none;
        color: inherit;
        padding: 0;
        margin: 0;
        width: auto;
        max-width: none;
        border-radius: 0;
        overflow-y: scroll;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      .collapsible-header {
        color: #ffffff !important; /* Default to white for dark mode */
      }
      h1 {
        color: #ffffff !important;
        font-size: 2.5rem;
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
        margin-top: 40px;
        margin-bottom: 20px;
      }
      
      body[data-theme="light"] h1,
      body[data-theme="light"] h2,
      body[data-theme="light"] h3,
      body[data-theme="light"] h4,
      body[data-theme="light"] h5,
      body[data-theme="light"] h6 {
        color: var(--primary) !important; /* Use primary color in light mode */
        text-shadow: none;
      }
      /* micBtn is kept hidden for backward compatibility with existing JS logic.
         All previous visual styles removed to reduce CSS weight. */
      #transcriptContainer {
        width: 100%;
        margin-top: 20px;
      }
      #transcriptContainer h3 {
        font-family: "Inter", Arial, sans-serif;
        color: #fff;
        margin-bottom: 10px;
        letter-spacing: 1px;
      }
      #transcript {
        padding: 18px;
        min-height: 300px;
        max-height: 450px;
        overflow-y: auto;
        white-space: pre-wrap;
        border-radius: 14px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
        color: #1a1a1a;
        font-size: 0.98em;
      }
      #transcript p {
        margin: 10px 0;
        padding: 10px 14px;
        border-radius: 8px;
        line-height: 1.5;
        font-size: 0.95em;
        word-break: break-word;
        font-family: "Inter", Arial, sans-serif;
        color: #1a1a1a;
      }
      #transcript .user-speech {
        color: #00529b;
        font-weight: 500;
      }
      #transcript .bot-speech {
        color: #1a1a1a;
        /* background: linear-gradient(90deg, #f5f7fa 0%, #e6f2fb 100%); */
        font-weight: 500;
        text-align: left;
      }
      #transcript .error-msg {
        color: #d7263d;
        background: #ffe6ee;
        font-style: italic;
        border-left: 4px solid #d7263d;
      }
      #transcript .info-msg {
        color: #00529b;
        font-style: italic;
        text-align: center;
        background: transparent;
        letter-spacing: 1px;
      }
      #statusLog {
        color: #1a1a1a;
        padding: 8px;
        border-radius: 4px;
        height: 250px;
        overflow-y: scroll;
      }
      #statusLog b {
        color: #00529b;
      }
      #statusLog div.status-fade-in {
        animation: status-fade-in 0.7s cubic-bezier(0.4, 0, 0.2, 1);
      }
      @keyframes status-fade-in {
        0% {
          opacity: 0;
          transform: translateY(12px);
        }
        60% {
          opacity: 1;
          transform: translateY(-2px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .collapsible-header {
        color: #00529b;
        font-family: "Inter", Arial, sans-serif;
      }
      .collapsible-header:hover {
        color: #00bfff;
      }
      .collapsible-content {
        overflow: hidden;
        transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
          padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
          opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
          transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        max-height: 500px;
        padding-bottom: 8px;
        display: block;
        opacity: 1;
        transform: translateY(0);
      }
      .collapsed .collapsible-content {
        max-height: 0;
        padding-bottom: 0;
        display: block;
        opacity: 0;
        transform: translateY(16px);
        pointer-events: none;
      }
      #company-logo-wrapper {
        position: fixed;
        top: 24px;
        left: 32px;
        z-index: 20;
        display: flex;
        flex-direction: column;
        /* align-items: center; */
        gap: 2px;
      }
      
      .powered-by-text {
        font-size: 0.65rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        font-weight: 500;
        opacity: 0.6;
      }
      
      #company-logo-fixed {
        width: 112px;
        /* height: 100px; */
        object-fit: contain;
        border: none;
        display: inline-block;
        box-shadow: none;
      }
      
      #ascensia-logo-fixed {
        position: fixed;
        top: 24px;
        right: 32px;
        width: 88px;
        height: 88px;
        object-fit: contain;
        border: none;
        z-index: 20;
        display: none;
        box-shadow: none;
      }
      
      /* Show ascensia logo only for ascensia agent */
      #ascensia-logo-fixed.show-for-ascensia {
        display: inline-block;
      }
      /* Dotted SVG background - Vapi style */
      .dotted-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 1;
        pointer-events: none;
        opacity: 0.1;
        background: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="2" fill="%2300bfff" fill-opacity="0.10"/></svg>');
        background-size: 16px 16px;
        background-repeat: repeat;
        transition: opacity 0.4s;
      }
      @media (max-width: 900px) {
        #sidebar {
          width: 100vw;
          min-width: 0;
          border-radius: 0;
          padding: 12px 4px 12px 4px;
          position: fixed;
          right: 0;
          top: 0;
          transform: translateX(100%);
          /* height: 50vh; */
        }
        #sidebar.open {
          transform: translateX(0);
        }
        #center-content {
          min-height: 50vh;
        }
      }

      /* Adjust sidebar height for screens with very limited height */
      @media (max-height: 600px) {
        #sidebar {
          max-height: 40vh;
        }
        
        @media (max-width: 900px) {
          #sidebar {
            height: 40vh;
          }
        }
      }
      /* Removed mic ripple effect styles (legacy) */
      /* Mic state text */
      #mic-state {
        margin-top: 18px;
        font-size: 1.18em;
        font-weight: 500;
        color: #00529b;
        text-align: center;
        letter-spacing: 0.5px;
        min-height: 1.5em;
        transition: color 0.3s;
      }
      .mic-state-idle {
        color: #00529b;
      }
      .mic-state-listening {
        color: #00bfff;
      }
      .mic-state-stop {
        color: #d7263d;
      }

      /* Fixed Language Bar at Bottom */
      #languageContainer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80px;
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
        border-top: 2px solid rgba(0, 82, 155, 0.1);
        box-shadow: 0 -4px 20px rgba(0, 82, 155, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        z-index: 1000;
        backdrop-filter: blur(10px);
      }

      #languageContainer .language-label {
        font-weight: 600;
        color: #00529b;
        font-size: 1rem;
        margin: 0;
        white-space: nowrap;
        flex-shrink: 0;
      }

      .language-options {
        display: flex;
        gap: 12px;
        justify-content: flex-start;
        flex-wrap: wrap;
      }

      .language-option {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 80px;
        width: auto;
        padding: 0 12px;
        height: 45px;
        border: 2px solid #e3e8ee;
        border-radius: 8px;
        background: #ffffff;
        color: #1a1a1a;
        font-family: "Inter", Arial, sans-serif;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-align: center;
        line-height: 1.2;
        user-select: none;
        white-space: nowrap;
      }

      .language-option:hover {
        border-color: #00bfff;
        background: #f0f9ff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 191, 255, 0.2);
      }

      .language-option.active {
        border-color: #00529b;
        background: linear-gradient(135deg, #00529b 0%, #00bfff 100%);
        color: #ffffff;
        box-shadow: 0 4px 16px rgba(0, 82, 155, 0.3);
      }

      .language-option.active:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 82, 155, 0.4);
      }

      /* Hide the original select element */
      #languageSelect {
        display: none;
      }

      /* Responsive design for language bar */
      @media (max-width: 768px) {
        #languageContainer {
          padding: 0 15px;
          gap: 12px;
          height: 70px;
        }

        #languageContainer .language-label {
          font-size: 0.9rem;
        }

        .language-option {
          min-width: 70px;
          padding: 0 10px;
          height: 40px;
          font-size: 0.8rem;
        }
      }

      @media (max-width: 480px) {
        #languageContainer {
          padding: 0 12px;
          gap: 8px;
          height: 65px;
          flex-wrap: wrap;
          align-content: center;
        }

        #languageContainer .language-label {
          font-size: 0.85rem;
          flex-basis: 100%;
          margin-bottom: 5px;
        }

        .language-options {
          justify-content: center;
          width: 100%;
        }

        .language-option {
          min-width: 65px;
          padding: 0 8px;
          height: 32px;
          font-size: 0.75rem;
        }
      }

      /* Adjust body padding to account for fixed language bar */
      body {
        /* padding-bottom: 80px; */
      }

      @media (max-width: 768px) {
        body {
          /* padding-bottom: 70px; */
        }
      }

      @media (max-width: 480px) {
        body {
          /* padding-bottom: 85px;  */
        }
        
        #languageContainer {
          height: 85px; /* Increased height for two-row layout */
        }
      }

      /* For very small screens, make language options stack more efficiently */
      @media (max-width: 360px) {
        .language-option {
          min-width: 60px;
          padding: 0 6px;
          font-size: 0.7rem;
        }
      }

      #languageSelect:focus {
        outline: none;
        border-color: #00bfff;
        box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.1);
      }

      #languageSelect:hover {
        border-color: #00529b;
      }

      #languageSelect option {
        padding: 6px;
        background: #fff;
        color: #1a1a1a;
      }
      /* Language Selector Styles */
      .language-selector {
        position: relative;
      }

      .lang-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid var(--btn-border);
        background: var(--btn-bg);
        color: var(--btn-text);
        cursor: pointer;
        font-size: 20px;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 10;
      }

      .lang-btn:hover {
        background: var(--btn-hover-bg);
        border-color: var(--btn-hover-border);
        color: var(--text);
      }

      .lang-tag {
        position: absolute;
        bottom: -2px;
        right: -2px;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        padding: 1px 4px;
        border-radius: 6px;
        min-width: 18px;
        text-align: center;
        line-height: 1.2;
      }

      .lang-dropdown {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        background: rgba(15, 20, 35, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        margin-bottom: 12px;
        min-width: 160px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 100;
        backdrop-filter: blur(20px);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        padding: 6px;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      [data-theme="light"] .lang-dropdown {
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
      }

      .language-selector.open .lang-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
      }

      .lang-option {
        padding: 10px 16px;
        color: rgba(255, 255, 255, 0.7);
        cursor: pointer;
        font-size: 13px;
        transition: all 0.2s ease;
        border: none;
        background: none;
        width: 100%;
        text-align: left;
        display: block;
        border-radius: 8px;
      }

      [data-theme="light"] .lang-option {
        color: var(--text);
      }

      .lang-option:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
      }

      [data-theme="light"] .lang-option:hover {
        background: rgba(0, 0, 0, 0.05);
        color: var(--primary);
      }

      .lang-option.active {
        background: rgba(var(--primary-rgb), 0.1);
        color: var(--primary);
        font-weight: 500;
      }

      /* Secondary Buttons (Settings, End Call) */
      .secondary-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid var(--btn-border);
        background: var(--btn-bg);
        color: var(--btn-text);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 18px;
        transition: all 0.2s ease;
        z-index: 10;
      }

      .secondary-btn:hover {
        background: var(--btn-hover-bg);
        border-color: var(--btn-hover-border);
        color: var(--text);
      }
      
      /* Hide sidebar toggle by default */
      #newSidebarToggle {
        display: none;
      }
      
      #newSidebarToggle.visible {
        display: flex;
      }

      .controls-row {
        position: fixed;
        bottom: 60px;
        right: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        z-index: 100;
      }

      /* Disabled state styling for language select during active call */
      #languageSelect:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        filter: grayscale(0.3);
      }

      /* (Removed old dropdown styles for agent selection) */

      /* Legacy CSS Disabled */
      /* .agent-cards-wrapper { ... } */
      /* .agent-card { ... } */
      /* Legacy CSS Disabled - Part 2 */
      /* width: 48px; ... */
      @media (max-width: 680px) {
        .agent-cards-wrapper {
          gap: 16px;
        }
        .agent-card {
          flex: 0 0 230px;
        }
        .agent-card h3 {
          font-size: 0.9rem;
        }
        .agent-card p {
          font-size: 0.67rem;
        }
      }
      @media (max-width: 560px) {
        .agent-cards-wrapper {
          flex-wrap: wrap;
          overflow-x: visible;
          scroll-snap-type: none;
          padding: 4px 10px 2px;
        }
        .agent-card {
          flex: 1 1 calc(50% - 14px);
          max-width: calc(50% - 14px);
          min-width: 150px;
          scroll-snap-align: unset;
        }
      }
      @media (max-width: 430px) {
        .agent-card {
          flex: 1 1 100%;
          max-width: 100%;
        }
        .agent-card {
          margin: 0 0 14px;
        }
        .agent-cards-wrapper {
          gap: 14px;
        }
      }
      @media (max-width: 360px) {
        .agent-card {
          padding: 16px 14px 18px;
        }
        .agent-call-btn {
          padding: 8px 10px;
          font-size: 0.6rem;
        }
      }

      /* Responsive fixes for 1280x550 resolution and similar wide but short screens */
      @media (min-width: 1200px) and (max-height: 600px) {
        body {
          height: 100vh;
          /* padding-bottom: 60px;  */
        }

        h1 {
          font-size: 2rem; /* Reduced from 2.5rem */
          margin-top: 20px; /* Reduced from 40px */
          margin-bottom: 15px; /* Reduced from 20px */
        }

        #company-logo-fixed {
          width: 80px; /* Reduced from 100px */
          /* height: 80px; Reduced from 100px */
          top: 15px; /* Reduced from 24px */
          left: 25px; /* Reduced from 32px */
        }

        #sidebar {
          width: 400px; /* Reduced from 450px */
          padding: 20px 20px 16px 20px; /* Reduced padding */
        }

        #center-content {
          padding-top: 20px; /* Reduced from default */
          padding-bottom: 20px; /* Reduced from default */
        }

        .agent-cards-wrapper {
          margin-bottom: 15px; /* Reduced from 220px */
          gap: 18px; /* Reduced from 22px */
        }

        .agent-card {
          width: 380px; /* Reduced from 420px */
          padding: 15px 15px 18px; /* Reduced padding */
        }

        .agent-card h3 {
          font-size: 0.9rem; /* Reduced from 0.95rem */
          margin: 3px 0 3px; /* Reduced margins */
        }

        .agent-card p {
          font-size: 0.75rem; /* Reduced from 0.80rem */
          line-height: 2.1; /* Reduced from 2.35 */
        }

        .agent-call-btn {
          width: 100px; /* Reduced from 120px */
          height: 100px; /* Reduced from 120px */
          border-radius: 50px; /* Reduced from 60px */
        }

        #languageContainer {
          height: 60px; /* Reduced from 80px */
          gap: 15px; /* Reduced from 20px */
        }

        .language-option {
          height: 35px; /* Reduced from 45px */
          font-size: 0.8rem; /* Reduced from 0.85rem */
          padding: 0 10px; /* Reduced from 0 12px */
        }

        #transcript {
          min-height: 200px; /* Reduced from 300px */
          max-height: 300px; /* Reduced from 450px */
        }

        #statusLog {
          height: 150px; /* Reduced from 250px */
        }

        /* Hide showcase image for shorter screens to prevent title overlap */
        #showcase-image-container {
          display: none !important;
        }

        /* Reduce vertical spacing in sidebar sections */
        #main-container {
          gap: 16px; /* Reduced gap between sections */
        }

        .collapsible-header {
          padding: 8px 4px; /* Reduced from 10px 4px */
          font-size: 0.9rem; /* Slightly smaller */
        }
      }

      /* Additional fixes for very wide but short screens (like ultrawide monitors with short height) */
      @media (min-width: 1400px) and (max-height: 550px) {
        h1 {
          font-size: 1.8rem;
          margin-top: 15px;
          margin-bottom: 12px;
        }

        #company-logo-fixed {
          width: 70px;
          /* height: 70px; */
          top: 12px;
          left: 20px;
        }

        .agent-card {
          width: 350px;
          padding: 12px 12px 15px;
        }

        .agent-call-btn {
          width: 90px;
          height: 90px;
          border-radius: 45px;
        }

        #languageContainer {
          height: 50px;
          gap: 12px;
        }

        .language-option {
          height: 30px;
          font-size: 0.75rem;
          padding: 0 8px;
        }

        body {
          /* padding-bottom: 50px; */
        }

        #sidebar {
          width: 350px;
          padding: 16px 16px 12px 16px;
        }

        #transcript {
          min-height: 150px;
          max-height: 200px;
        }

        #statusLog {
          height: 120px;
        }

        /* Hide showcase image to prevent overlap with title */
        #showcase-image-container {
          display: none !important;
        }
      }

      /* Optimized specifically for 1280x550 resolution */
      @media (min-width: 1280px) and (max-width: 1280px) and (min-height: 550px) and (max-height: 550px) {
        body {
          height: 100vh;
          overflow-y: auto;
          overflow-x: hidden;
        }
    

        #center-content {
          min-height: auto;
          justify-content: flex-start;
          padding-top: 10px;
          padding-bottom: 10px;
        }

        h1 {
          font-size: 1.75rem;
          margin-top: 10px;
          margin-bottom: 10px;
        }

        .agent-cards-wrapper {
          margin-bottom: 10px;
          gap: 15px;
        }

        .agent-card {
          width: 340px;
          padding: 10px 12px 12px;
        }

        .agent-call-btn {
          width: 85px;
          height: 85px;
          border-radius: 42px;
        }

        #sidebar {
          width: 320px;
          padding: 12px 16px 10px 16px;
        }

        #languageContainer {
          height: 45px;
          gap: 10px;
        }

        .language-option {
          height: 28px;
          font-size: 0.72rem;
          padding: 0 6px;
        }

        #company-logo-fixed {
          width: 65px;
          /* height: 65px; */
          top: 8px;
          left: 15px;
        }

        #transcript {
          min-height: 120px;
          max-height: 180px;
        }

        #statusLog {
          height: 100px;
        }

        /* Hide showcase image to prevent overlap with title */
        #showcase-image-container {
          display: none !important;
        }

        /* Ensure proper scrolling on this resolution */
        html, body {
          max-height: 550px;
          overflow-y: auto;
        }
      }

      /* Optimized specifically for 1422.22 x 612.58 resolution */
      @media (min-width: 1422px) and (max-width: 1423px) and (min-height: 612px) and (max-height: 613px) {
        body {
          height: 100vh;
          overflow-y: auto;
          overflow-x: hidden;
        }

        #center-content {
          min-height: auto;
          justify-content: flex-start;
          padding-top: 15px;
          padding-bottom: 15px;
        }

        h1 {
          font-size: 1.9rem;
          margin-top: 12px;
          margin-bottom: 12px;
        }

        .agent-cards-wrapper {
          margin-bottom: 12px;
          gap: 16px;
        }

        .agent-card {
          width: 360px;
          padding: 12px 14px 14px;
        }

        .agent-call-btn {
          width: 95px;
          height: 95px;
          border-radius: 47px;
        }

        #sidebar {
          width: 340px;
          padding: 14px 18px 12px 18px;
        }

        #languageContainer {
          height: 50px;
          gap: 12px;
        }

        .language-option {
          height: 32px;
          font-size: 0.75rem;
          padding: 0 8px;
        }

        #company-logo-fixed {
          width: 70px;
          /* height: 70px; */
          top: 10px;
          left: 18px;
        }

        #transcript {
          min-height: 140px;
          max-height: 220px;
        }

        #statusLog {
          height: 120px;
        }

        /* Hide showcase image to prevent overlap with title */
        #showcase-image-container {
          display: none !important;
        }

        /* Ensure proper scrolling on this resolution */
        html, body {
          max-height: 612px;
          overflow-y: auto;
        }
      }

      /* =============================
         1280px WIDTH FIXES
         ============================= */
      @media (max-width: 1280px) {
        /* Add your CSS fixes for 1280px width here */
        #sidebar {
          max-height: 100vh;
          width: 320px;
        }
        .page-heading {
          font-size: 2.2rem !important;
          margin-top: 20px !important;
        }
        .agent-card.active {
          padding: 16px !important;
        }
            .orb-container {
          margin-bottom: 8px !important;
          width: 160px !important;
          height: 160px !important;
        }
        .orb {
          height: 140px !important;
          width: 140px !important;
        }
        .controls-row{
          margin-top: 0px !important;
        }
      }

      /* =============================
         ADDITIONAL RESPONSIVE LAYOUT
         - Sidebar becomes bottom sheet on small screens
         - Headline & spacing scale down
         - Prevent horizontal overflow
         ============================= */
      @media (max-width: 780px) {
        /* Allow vertical scrolling on tablet/mobile while still preventing horizontal overflow */
        html,
        body {
          overflow-x: hidden;
        }
        body {
          overflow-y: auto;
        }
        /* Provide extra bottom padding so main content isn't hidden behind the fixed bottom sheet (#sidebar) and language bar */
        #center-content {
          padding-bottom: calc(64px + 55vh + 85px);
        }
        /* Extra top padding so title never sits under fixed logo */
        #center-content {
          padding-top: 120px;
          padding-left: 16px;
          padding-right: 16px;
          width: 100%;
          box-sizing: border-box;
          justify-content: flex-start;
        }
        h1 {
          font-size: 2.05rem;
          margin-top: 0;
          margin-bottom: 40px;
        }
        #company-logo-fixed {
          width: 88px;
          /* height: 88px; */
          top: 16px;
          left: 20px;
        }
        #sidebar {
          width: 100vw;
          max-width: 100vw;
          left: 0;
          right: 0;
          height: 55vh;
          top: auto;
          bottom: 0;
          position: fixed;
          border-radius: 24px 24px 0 0;
          border-left: none;
          border-top: 1px solid #e3e8ee;
          border-right: none;
          border-bottom: none;
          padding: 20px 20px 28px;
          box-shadow: 0 -6px 24px -4px rgba(0, 82, 155, 0.15),
            0 -2px 8px -2px rgba(0, 0, 0, 0.08);
          transform: translateY(calc(100% - 56px));
          transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.3s;
          display: flex;
          flex-direction: column;
          gap: 18px;
        }
        #sidebar:not(.collapsed) {
          transform: translateY(0);
        }
        #sidebar.collapsed #main-container {
          display: none;
        }
        #sidebar-toggle-btn {
          position: absolute;
          left: 50%;
          top: -70px;
          transform: translateX(-50%);
          width: 140px;
          height: 40px;
          border-radius: 16px 16px 0 0;
          background: linear-gradient(90deg, #00529b, #00bfff);
          font-size: 0.8rem;
          font-weight: 600;
          letter-spacing: 0.5px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          box-shadow: 0 -2px 10px -2px rgba(0, 82, 155, 0.35);
        }
        #sidebar-toggle-btn:hover {
          background: linear-gradient(90deg, #006bbb, #18cfff);
        }
        /* Accordion headers bigger touch targets */
        .collapsible-header {
          padding: 10px 4px;
          font-size: 0.95rem;
        }
        #transcript {
          max-height: 38vh;
        }
        .agent-cards-wrapper {
          margin-bottom: 12px;
        }
      }
      @media (max-width: 560px) {
        h1 {
          font-size: 1.8rem;
          margin-top: 0;
          margin-bottom: 34px;
        }
        /* Adjust bottom padding for smaller devices to account for slightly taller bottom sheet when expanded */
        #center-content {
          padding: 112px 14px calc(72px + 55vh + 85px);
        }
        #company-logo-fixed {
          width: 80px;
          /* height: 80px; */
          top: 14px;
          left: 18px;
        }
      }
      @media (max-width: 430px) {
        h1 {
          font-size: 1.58rem;
          margin-top: 0;
          margin-bottom: 28px;
        }
        #center-content {
          padding: 104px 12px calc(76px + 60vh + 85px);
        }
        #company-logo-fixed {
          width: 72px;
          /* height: 72px; */
          top: 12px;
          left: 16px;
        }
        #sidebar {
          height: 60vh;
        }
        #transcript {
          max-height: 42vh;
        }
      }
      @media (max-width: 360px) {
        h1 {
          font-size: 1.45rem;
        }
        #sidebar-toggle-btn {
          width: 120px;
          height: 38px;
          font-size: 0.72rem;
        }
        #center-content {
          padding-top: 140px;
        }
        #company-logo-fixed {
          width: 64px;
          /* height: 64px; */
          top: 10px;
          left: 14px;
        }
      }

      /* Agent Error Container Styles */
      .agent-error-container {
        text-align: center;
        padding: 40px 30px;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border: 2px solid #dee2e6;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        max-width: 500px;
        margin: 20px auto;
        position: relative;
        overflow: hidden;
      }

      .agent-error-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #ff6b6b, #ffa500, #ff6b6b);
        background-size: 200% 100%;
        animation: gradientShift 3s ease-in-out infinite;
      }

      @keyframes gradientShift {
        0%,
        100% {
          background-position: 0% 0%;
        }
        50% {
          background-position: 100% 0%;
        }
      }

      .error-icon {
        font-size: 3.5rem;
        margin-bottom: 20px;
        display: block;
        filter: drop-shadow(0 4px 8px rgba(255, 107, 107, 0.3));
      }

      .error-title {
        color: #495057;
        font-size: 2rem;
        font-weight: 700;
        margin: 0 0 15px 0;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .error-description {
        color: #6c757d;
        font-size: 1.1rem;
        line-height: 1.6;
        margin: 0 0 30px 0;
        font-weight: 400;
      }

      .agent-input-form {
        margin-top: 25px;
      }

      .input-group {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
      }

      .agent-input {
        width: 100%;
        max-width: 350px;
        padding: 16px 20px;
        font-size: 16px;
        border: 2px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        background: rgba(0, 0, 0, 0.3) !important;
        color: #ffffff !important;
        font-family: "Inter", sans-serif;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      }

      [data-theme="light"] .agent-input {
        background: #ffffff !important;
        border: 2px solid #ced4da;
        color: #495057 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      }

      .agent-input:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15),
          0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
      }

      .agent-input::placeholder {
        color: #adb5bd;
        font-style: italic;
      }

      .load-agent-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 14px 28px;
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 600;
        font-family: "Inter", sans-serif;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
        position: relative;
        overflow: hidden;
      }

      .load-agent-btn:hover {
        background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
      }

      .load-agent-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 10px rgba(0, 123, 255, 0.3);
      }

      .load-agent-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.2),
          transparent
        );
        transition: left 0.5s ease;
      }

      .load-agent-btn:hover::before {
        left: 100%;
      }

      .btn-text {
        font-weight: 600;
      }

      .btn-icon {
        font-size: 18px;
        transition: transform 0.3s ease;
      }

      .load-agent-btn:hover .btn-icon {
        transform: translateX(4px);
      }

      .available-agents {
        margin-top: 20px;
        padding: 15px;
        background: rgba(0, 123, 255, 0.05);
        border: 1px solid rgba(0, 123, 255, 0.1);
        border-radius: 10px;
        font-size: 0.9rem;
        color: #6c757d;
      }

      .available-agents strong {
        color: #007bff;
        font-weight: 600;
        background: rgba(0, 123, 255, 0.1);
        padding: 2px 6px;
        border-radius: 4px;
        margin: 0 2px;
      }

      /* Mobile responsiveness for agent error */
      @media (max-width: 768px) {
        .agent-error-container {
          margin: 20px;
          padding: 30px 20px;
        }

        .error-title {
          font-size: 1.6rem;
        }

        .error-description {
          font-size: 1rem;
        }

        .agent-input {
          max-width: 100%;
        }

        .input-group {
          width: 100%;
        }
      }

      /* Agent Error Card - Simple horizontal layout */
      .agent-error-card {
        max-width: 500px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px;
        margin: 0 auto;
        border-radius: 16px;
        background: rgba(13, 17, 28, 0.75);
        backdrop-filter: blur(30px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
          inset 0 1px 1px rgba(255, 255, 255, 0.1);
      }

      [data-theme="light"] .agent-error-card {
        background: rgba(255, 255, 255, 0.75);
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05),
          inset 0 1px 1px rgba(255, 255, 255, 0.8);
      }

      .agent-error-card .agent-icon-circle.error-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 20px;
        margin-bottom: 12px;
      }

      .agent-error-card h3 {
        font-size: 1.2rem;
        margin: 0 0 8px;
        font-weight: 600;
        color: var(--text);
      }

      .agent-error-card p {
        font-size: 0.9rem;
        color: var(--muted);
        margin: 0 0 20px;
        line-height: 1.5;
      }

      .agent-input-wrapper {
        width: 100%;
        max-width: 400px;
        display: flex;
        flex-direction: row;
        gap: 12px;
        margin-bottom: 16px;
      }

      .agent-input {
        flex: 1;
        padding: 10px 14px;
        border: 2px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        font-size: 0.9rem;
        font-family: inherit;
        background: rgba(0, 0, 0, 0.3) !important;
        color: #ffffff !important;
        transition: border-color 0.3s, box-shadow 0.3s;
        outline: none;
        box-sizing: border-box;
      }

      [data-theme="light"] .agent-input {
        background: #ffffff !important;
        border-color: rgba(0, 0, 0, 0.1);
        color: #495057 !important;
      }

      .agent-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
      }

      .agent-input::placeholder {
        color: var(--muted);
        font-size: 0.8rem;
      }

      .agent-load-btn {
        flex-shrink: 0;
        background: var(--primary);
        border: none;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 600;
        padding: 10px 20px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s;
        white-space: nowrap;
        box-shadow: 0 3px 8px -2px rgba(var(--primary-rgb), 0.3);
      }

      .agent-load-btn:hover {
        box-shadow: 0 5px 12px -3px rgba(var(--primary-rgb), 0.4);
        transform: translateY(-1px);
      }

      .available-agents-hint {
        text-align: center;
      }

      .available-agents-hint small {
        font-size: 0.8rem;
        color: var(--muted);
        line-height: 1.4;
      }

      .available-agents-hint strong {
        color: var(--text);
        font-weight: 600;
      }

      /* Input states for better UX */
      .agent-input.error {
        border-color: #dc3545;
        background: #fff5f5;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
      }

      .agent-input.success {
        border-color: #28a745;
        background: #f8fff8;
        box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15);
      }

      @media (max-width: 768px) {
        .agent-error-card {
          max-width: 100%;
          margin: 0 20px;
          padding: 18px 18px 22px;
        }

        .agent-input {
          font-size: 16px; /* Prevent zoom on iOS */
        }

        .agent-load-btn {
          padding: 14px 16px;
        }
      }

       /* Showcase Image Styles - Left Bottom */
      #showcase-image-container {
        position: fixed;
        top: 12px;
        z-index: 15;
        display: none; /* Hidden by default */
        align-items: center;
        justify-content: center;
        margin: auto;
        width: 100%;
      }

      /* Show showcase image only for farmer agent */
      #showcase-image-container.show-for-farmer {
        display: flex;
      }

      #showcase-image {
        height: 140px;
        border-radius: 8px;
        object-fit: contain;
        background: rgba(255, 255, 255, 0.95);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

      #showcase-image:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(0, 191, 255, 0.3);
      }
      @media (max-width: 900px) {
        #company-logo-fixed {
          width: 80px;
          /* height: 80px; */
        }
        #showcase-image-container {
          top: 12px;
        }
        #showcase-image {
          height: 80px;
        }
      }

      /* Toggle Switch Styles */
      .toggle-switch {
        position: relative;
        width: 44px;
        height: 24px;
        background-color: #ccc;
        border-radius: 12px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        border: 1px solid #bbb;
      }

      .toggle-switch.active {
        background-color: #007bff;
        border-color: #0056b3;
      }

      .toggle-slider {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 18px;
        height: 18px;
        background-color: white;
        border-radius: 50%;
        transition: transform 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }

      .toggle-switch.active .toggle-slider {
        transform: translateX(20px);
      }

      .toggle-switch:hover {
        background-color: #b8b8b8;
      }

      .toggle-switch.active:hover {
        background-color: #0056b3;
      }

      /* Dark Theme Styles */
      body.dark-theme {
        background: #0e0e13;
        color: #e0e0e0;
      }

      .body.dark-theme #company-logo-fixed{
        filter: invert(1) !important
      }

      /* Legacy dark-theme rule removed - now using data-theme attribute */

      body.dark-theme .agent-card {
        background: rgba(30, 30, 30, 0.85);
        border-color: rgba(255, 255, 255, 0.1);
        color: #ffffff;
      }

      body.dark-theme .agent-card h3 {
        color: #ffffff;
      }

      body.dark-theme .agent-card p {
        color: #ffffff;
      }

      body.dark-theme .agent-card .call-status {
        color: #ffffff;
      }

      body.dark-theme .agent-card:hover {
        background: rgba(40, 40, 40, 0.9);
        border-color: rgba(0, 123, 255, 0.4);
      }

      body.dark-theme .agent-card.active {
        background: rgba(0, 123, 255, 0.15);
        border-color: #007bff;
        box-shadow: 0 8px 32px rgba(0, 123, 255, 0.2);
      }

      body.dark-theme #sidebar {
        background: rgba(20, 20, 20, 0.95);
        border-left-color: rgba(255, 255, 255, 0.1);
      }

      body.dark-theme .collapsible-header {
        background: rgba(40, 40, 40, 0.8);
        color: #e0e0e0;
        border-bottom-color: rgba(255, 255, 255, 0.1);
      }

      body.dark-theme .collapsible-content {
        background: rgba(30, 30, 30, 0.8);
        color: #d0d0d0;
      }

      body.dark-theme #toggle-buttons-container {
        border-top-color: rgba(255, 255, 255, 0.1);
      }

      body.dark-theme #toggle-buttons-container span {
        color: #d0d0d0 !important;
      }

      body.dark-theme #languageContainer {
        background: rgba(20, 20, 20, 0.9);
        border-color: rgba(255, 255, 255, 0.1);
      }

      body.dark-theme .language-label {
        color: #e0e0e0;
      }

      body.dark-theme .language-option {
        background: rgba(40, 40, 40, 0.8);
        color: #d0d0d0;
        border-color: rgba(255, 255, 255, 0.1);
      }

      body.dark-theme .language-option:hover {
        background: rgba(60, 60, 60, 0.9);
      }

      body.dark-theme .language-option.active {
        background: rgba(0, 123, 255, 0.3);
        color: #ffffff;
        border-color: #007bff;
      }

      body.dark-theme .dotted-bg::before {
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
      }

      body.dark-theme .futuristic-line {
        background: linear-gradient(90deg, transparent, rgba(0, 123, 255, 0.3), transparent);
      }

      body.dark-theme #company-logo-fixed {
        filter: invert(1);
      }