/* Combined inline styles extracted from UI.html */

/* Block 1 */
/* ========================================
      GLOBAL BORDER REMOVAL
      ======================================== */
   
   /* Remove borders from main structural elements */
   .nav-instance,
   .right-content-area,
   .chat-section,
   .main-layout,
   .app-container,
   .conversation-header,
   .conversation-content,
   .left-nav,
   .categories-section,
   .nav-view,
   .options-list,
   .chat-messages,
   .input-section,
   .suggestions-panel,
   .panel-header,
   .panel-content {
       border: none !important;
       border-top: none !important;
       border-bottom: none !important;
       border-left: none !important;
       border-right: none !important;
       box-shadow: none !important;
   }
   
   /* Subtle separator line for left panel (ChatGPT style) */
   .conversation-panel {
       border: none !important;
       border-top: none !important;
       border-bottom: none !important;
       border-left: none !important;
       border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
       box-shadow: none !important;
   }
   
   /* Dark mode separator line */
   [data-theme="dark"] .conversation-panel {
       border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
   }
   
   /* Specifically remove shadow/line from nav-instance header */
   .nav-instance {
       box-shadow: none !important;
       border-bottom: none !important;
   }
   
   .right-content-area .nav-instance {
       box-shadow: none !important;
       border-bottom: none !important;
   }
   
   /* Remove pseudo-element borders */
   .nav-instance::before,
   .nav-instance::after,
   .conversation-header::before,
   .conversation-header::after,
   .chat-section::before,
   .chat-section::after {
       display: none !important;
       border: none !important;
   }

   /* Allow conversation panel ::after for subtle separator gradient effect */
   .conversation-panel::before {
       display: none !important;
   }

   /* ========================================
      GLOBAL OUTLINE REMOVAL (except text input)
      ======================================== */
   
   /* Remove outline from all elements except message input */
   *:focus,
   *:focus-visible,
   .focus-ring:focus,
   button:focus,
   a:focus,
   div:focus,
   [tabindex]:focus {
       outline: none !important;
       box-shadow: none !important;
   }
   
   /* Keep focus style only on message input textarea - single border, no double ring */
   .message-input:focus,
   .message-input:focus-visible,
   #message:focus,
   #message:focus-visible {
       outline: none !important;
       box-shadow: none !important;
   }

   /* User dropdown menu styles */
        .user-welcome {
            position: relative;
        }

        .user-dropdown {
            position: fixed;
            top: 60px;
            right: 10px;
            margin-top: 0;
            background: var(--surface-color, #ffffff);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 0.75rem;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
            min-width: 200px;
            z-index: 999999;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.2s ease;
            pointer-events: none;
        }

        .user-dropdown.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto;
        }

        .user-dropdown-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            color: var(--text-primary);
            text-decoration: none;
            transition: var(--transition-normal);
            border-bottom: none;
            cursor: pointer;
        }

        .user-dropdown-item:last-child {
            border-bottom: none;
        }

        .user-dropdown-item:hover {
            background: var(--primary-color);
            color: white;
        }

        .user-dropdown-item.hidden {
            display: none !important;
        }

        .user-dropdown-item i {
            font-size: 1rem;
            width: 1.25rem;
            text-align: center;
        }

        .user-dropdown-item span {
            font-size: 0.9rem;
            font-weight: 500;
        }

        /* Dropdown arrow */
        .user-welcome::after {
            content: '';
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid var(--text-secondary);
            margin-left: 0.5rem;
            transition: var(--transition-normal);
        }

        .user-welcome:hover::after {
            border-top-color: var(--primary-color);
        }

        .user-welcome.dropdown-open::after {
            transform: rotate(180deg);
            border-top-color: var(--primary-color);
        }

        /* Mode Toggle Styles */
        .mode-toggle {
            margin-right: 1rem;
        }

        /* (top-hamburger removed — left-edge opener used instead) */

        .mode-toggle-btn {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.3rem 0.6rem;
            background: var(--surface-color);
            border: none;
            border-radius: 0.5rem;
            color: var(--text-primary);
            font-weight: 500;
            font-size: 0.78rem;
            cursor: pointer;
            transition: var(--transition-normal);
        }

        .mode-toggle-btn:hover {
            background: var(--surface-hover);
        }

        .mode-label {
            min-width: 60px;
            text-align: left;
        }

        .toggle-switch {
            position: relative;
            width: 36px;
            height: 16px;
            background: var(--border-color);
            border-radius: 8px;
            transition: background-color 0.3s ease;
        }

        .toggle-switch.active {
            background: var(--primary-color);
        }

        .toggle-slider {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 12px;
            height: 12px;
            background: 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);
        }

        /* Teams Button Styles */
        .teams-btn {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.3rem 0.6rem;
            background: var(--surface-color);
            border: none;
            border-radius: 0.5rem;
            color: var(--text-primary);
            font-weight: 500;
            font-size: 0.78rem;
            cursor: pointer;
            transition: var(--transition-normal);
            margin-right: 0.6rem;
            position: relative;
        }

        .teams-btn:hover {
            background: var(--surface-hover);
            color: var(--primary-color);
        }

        .teams-btn i {
            font-size: 0.85rem;
        }

        .teams-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 16px;
            height: 16px;
            background: var(--primary-color);
            color: white;
            border-radius: 50%;
            font-size: 0.65rem;
            font-weight: 600;
            margin-left: 0.2rem;
        }

        /* Teams Modal Styles */
        .teams-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            z-index: 2000;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.2s ease;
        }

        .teams-modal.show {
            display: flex;
        }
        /* Hide loading-teams modal on load when user already selected a team (avoids flash) */
        body.hide-teams-modal-on-load .teams-modal.show {
            display: none !important;
        }

        .teams-modal-content {
            background: var(--surface-color);
            border-radius: 1.25rem;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            max-width: 500px;
            width: 90%;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            animation: slideUp 0.3s ease;
        }

        .teams-modal-content.shake {
            animation: shake 0.5s ease;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
            20%, 40%, 60%, 80% { transform: translateX(10px); }
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translate(-50%, -20px);
            }
            to {
                opacity: 1;
                transform: translate(-50%, 0);
            }
        }

        @keyframes slideUp {
            from {
                opacity: 1;
                transform: translate(-50%, 0);
            }
            to {
                opacity: 0;
                transform: translate(-50%, -20px);
            }
        }

        .teams-modal-header {
            padding: 2rem 1.5rem;
            border-bottom: 1px solid var(--border-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .teams-modal-header h2 {
            margin: 0;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .teams-modal-close {
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 1.5rem;
            padding: 0;
            transition: color 0.2s ease;
        }

        .teams-modal-close:hover {
            color: var(--text-primary);
        }

        .teams-modal-body {
            overflow-y: auto;
            flex: 1;
            padding: 1.5rem;
        }

        .teams-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .team-item {
            padding: 1rem 1.25rem;
            border: 2px solid var(--border-color);
            border-radius: 0.875rem;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--surface-elevated);
        }

        .team-item:hover {
            border-color: var(--primary-color);
            background: var(--surface-hover);
            transform: translateX(4px);
        }

        .team-item.active {
            border-color: var(--primary-color);
            background: rgba(102, 126, 234, 0.1);
        }

        .team-item-left {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .team-item-icon {
            width: 40px;
            height: 40px;
            border-radius: 0.625rem;
            background: linear-gradient(135deg, var(--primary-color), #764ba2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .team-item-info {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .team-item-name {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 1rem;
        }

        .team-item-description {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-top: 0.25rem;
            margin-bottom: 0.35rem;
            line-height: 1.4;
            font-style: italic;
            opacity: 0.8;
        }

        .team-item-role {
            font-size: 0.75rem;
            color: var(--primary-color);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 0.25rem;
        }

        .team-item-checkmark {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .team-item.active .team-item-checkmark {
            opacity: 1;
        }

        .teams-empty {
            text-align: center;
            padding: 3rem 2rem;
            color: var(--text-secondary);
        }

        .teams-empty i {
            font-size: 3rem;
            margin-bottom: 1rem;
            opacity: 0.5;
        }

        .teams-empty p {
            margin: 0.5rem 0;
            font-size: 0.95rem;
        }

        .teams-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            padding: 3rem 2rem;
            color: var(--text-secondary);
        }

        .teams-spinner {
            width: 20px;
            height: 20px;
            border: 2px solid var(--border-color);
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

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

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* Hide suggestion and quick action cards permanently */
        .mini-quick-cards-container,
        #miniQuickCards,
        .suggestion-cards-container,
        #suggestionCards,
        .quick-action-cards-container,
        #quickActionCards {
            display: none !important;
        }

        /* Mini Quick Cards Styles */
        .mini-quick-cards-container {
            display: none;
            padding: 1rem 2rem 0.75rem;
            background: var(--surface-elevated);
            border-top: 1px solid var(--border-light);
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        }

        .mini-quick-cards-grid {
            display: flex;
            gap: 0.75rem;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            max-width: 100%;
            overflow-x: auto;
        }

        .mini-quick-card {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(102, 126, 234, 0.1);
            border-radius: 1rem;
            padding: 1.25rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 0.75rem;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.08);
            min-height: 140px;
        }

        .mini-quick-card:hover {
            background: rgba(255, 255, 255, 0.8);
            border-color: #667eea;
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 8px 30px rgba(102, 126, 234, 0.15);
        }

        .mini-quick-card .quick-action-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #6B9DE8 0%, #8BB4F0 100%);
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            flex-shrink: 0;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .mini-quick-card .quick-action-content {
            flex: 1;
        }

        .mini-quick-card .quick-action-content h4 {
            font-size: 1rem;
            font-weight: 700;
            color: #1a202c;
            margin: 0 0 0.5rem 0;
            line-height: 1.3;
        }

        .mini-quick-card .quick-action-content p {
            font-size: 0.8rem;
            color: #4a5568;
            margin: 0;
            line-height: 1.4;
            font-weight: 400;
        }

        /* Mini Quick Cards Animation */
        @keyframes fade-in {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        .mini-quick-cards-container {
            animation: fade-in 0.3s ease;
        }

        /* Enhanced Avatar Interruption Button Styling */
        .avatar-interrupt-button {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%) !important;
            color: white;
            border: none;
            padding: 0.75rem 1.25rem;
            border-radius: 2rem;
            cursor: pointer;
            transition: var(--transition-fast);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.75rem;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
            white-space: nowrap;
            margin-left: 10px;
        }

        .avatar-interrupt-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
            background: linear-gradient(135deg, #ff5252 0%, #d32f2f 100%) !important;
        }

        .avatar-interrupt-button i {
            font-size: 0.875rem;
        }

        .avatar-interrupt-button:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
        }

        /* Code block styling for message content */
        .message-content pre.code-block {
            background: #0f172a0d; /* subtle slate overlay */
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 10px 12px;
            margin: 8px 0;
            overflow: auto;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 12px;
            line-height: 1.5;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .message-content code.inline-code {
            background: #f3f4f6;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            padding: 0 4px;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 12px;
        }

        /* Copy Button Styles - Inline with timestamp */
        .copy-button {
            background: transparent !important;
            border: none !important;
            color: #667eea !important;
            width: auto !important;
            height: auto !important;
            border-radius: 0 !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 0.875rem !important;
            position: relative !important;
            margin-left: 8px !important;
            padding: 4px !important;
            vertical-align: middle !important;
            opacity: 0.7 !important;
        }

        .copy-button:hover {
            color: #667eea !important;
            opacity: 1 !important;
            transform: scale(1.1) !important;
        }

        .copy-button:active,
        .copy-button:focus {
            outline: none !important;
            color: #4c51bf !important;
        }

        .copy-button.copied {
            color: #10b981 !important;
        }

        /* Make timestamp area flex to accommodate copy button */
        .message-timestamp {
            display: flex !important;
            align-items: center !important;
            gap: 4px !important;
        }

/* Block 2 */
/* Collapsible navigation styles */
  .categories-section {
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 4px;
      display: flex;
      flex-direction: column;
      gap: 6px;
  }
  .categories-section::-webkit-scrollbar {
      width: 4px;
  }
  .categories-section::-webkit-scrollbar-track {
      background: transparent;
  }
  .categories-section::-webkit-scrollbar-thumb {
      background: rgba(107, 114, 128, 0.3);
      border-radius: 4px;
  }
  .categories-section::-webkit-scrollbar-thumb:hover {
      background: rgba(107, 114, 128, 0.5);
  }
  .nav-collapsible-container {
      display: flex;
      flex-direction: column;
      gap: 6px;
  }
  .collapsible-section {
      border-radius: 8px;
      overflow: hidden;
  }
  .collapsible-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px;
      border-radius: 6px;
      cursor: pointer;
      background: white;
      border: 1px solid #e6edf3;
      transition: all 0.15s ease;
  }
  .collapsible-header:hover {
      background: #f8fafc;
      border-color: #d1d9e0;
  }
  .collapsible-arrow {
      font-size: 10px;
      color: #6b7280;
      transition: transform 0.25s ease;
  }
  .collapsible-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.25s ease-out;
      padding-left: 10px;
  }
  .collapsible-content.expanded {
      padding-top: 4px;
  }
  .collapsible-content .option-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 8px;
      border-radius: 5px;
      cursor: pointer;
      margin-bottom: 3px;
      background: #f8fafc;
      border: 1px solid #e6edf3;
      transition: all 0.15s ease;
      font-size: 0.8rem;
  }
  .collapsible-content .option-item:hover {
      background: #eef2f7;
      border-color: #d1d9e0;
  }
  
  /* Left nav styling to match right panel look
              and ensure each left-panel button/card is a uniform size */
            .left-nav .home-btn,
            .left-nav .progress-btn,
            .left-nav .category-card,
            .left-nav .option-item {
                background: white;
                border: 1px solid #e6edf3;
                color: var(--dark, #1f2937);
                font-size: 14px;
                /* fixed height so all items match */
                min-height: 56px;
                padding: 8px;
                border-radius: 6px;
                transition: all 0.15s ease;
                display: flex;
                align-items: center;
                gap: 8px;
                box-sizing: border-box;
                /* make items stretch to full width of left-nav area */
                width: 100%;
            }

            /* icon box for left nav items - unify icon sizes and override inline sizes */
            .left-nav .icon {
                width: 36px !important;
                height: 36px !important;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                flex-shrink: 0;
                font-size: 1rem;
            }
            .left-nav .home-btn .icon { background: linear-gradient(135deg,#6B9DE8,#8BB4F0); }
            .left-nav .progress-btn .icon { background: linear-gradient(135deg,#06b6d4,#3b82f6); }
            .left-nav .category-card .icon { background: linear-gradient(135deg,#667eea,#6B9DE8); }
            .left-nav .option-item .icon { background: linear-gradient(135deg,#3b82f6,#667eea); }

            /* right-aligned chevrons / extra content should remain spaced */
            .left-nav .category-card,
            .left-nav .option-item {
                justify-content: space-between;
            }

            .left-nav .home-btn:hover,
            .left-nav .progress-btn:hover,
            .left-nav .category-card:hover,
            .left-nav .option-item:hover {
                transform: translateX(4px);
                border-color: var(--primary, #6366f1);
                color: var(--primary, #6366f1);
                background: rgba(99,102,241,0.04);
            }

            .left-nav .view-header .view-title,
            #leftSidebarProfileName {
                /* keep color and font changes but do not change vertical placement */
                font-weight: 600;
                color: var(--dark, #1f2937);
                font-size: 14px;
                display: inline-block;
                line-height: 40px;
                vertical-align: middle;
            }

            /* keep session list area visually separated */
            .conversation-stats { padding: 10px 14px; }
            .conversation-list { padding: 8px 12px 20px; }

            /* Right-side suggestions panel removed — hide it and adjust layout so chat fills space */
            .suggestions-panel { display: none !important; }
            /* Ensure chat section fills remaining space next to the left conversation panel */
            .chat-section { flex: 1 !important; width: auto !important; margin-right: 0 !important; }
            /* Remove any toggle visuals and header elements for suggestions panel */
            .suggestions-panel .suggestions-toggle,
            .suggestions-panel .panel-header,
            .suggestions-panel .fa-times { display: none !important; }

/* Block 3 */
/* Force-hide any right-side suggestion panels and remove their space.
           This prevents leftover white bars when panels are collapsed or manipulated by JS. */
        #suggestionsPanel, .suggestions-panel, .main-layout .suggestions-panel {
            display: none !important;
            width: 0 !important;
            min-width: 0 !important;
            max-width: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            border: 0 !important;
            box-shadow: none !important;
            background: transparent !important;
        }

        /* Ensure the main chat fills the available area */
        .chat-section {
            flex: 1 !important;
            width: 100% !important;
            margin-right: 0 !important;
        }

        /* Guard against inline style forcing a small collapsed width */
        #suggestionsPanel[style*="width:"] {
            width: 0 !important;
            display: none !important;
        }

/* Block 4 */
/* ========================================
           RESPONSIVE LAYOUT - LEFT PANEL & CHAT
           ======================================== */

        /* Base layout - app-container with left panel */
        .app-container {
            display: flex !important;
            flex-direction: row !important;
            width: 100% !important;
            height: 100vh !important;
            overflow: hidden !important;
            position: relative !important;
        }

        /* Left conversation panel - default expanded state */
        /* Override ui-main.css fixed widths */
        .app-container .conversation-panel,
        .app-container > .conversation-panel,
        #conversationPanel {
            width: 320px !important;
            min-width: 0 !important;
            max-width: 400px !important;
            flex-shrink: 0 !important;
            transition: width 0.3s ease, opacity 0.3s ease !important;
            position: relative !important;
            z-index: 100 !important;
            overflow: hidden !important;
        }

        /* Right content area fills remaining space */
        .app-container .right-content-area,
        .app-container > .right-content-area,
        #rightContentArea {
            flex: 1 1 0% !important;
            min-width: 0 !important;
            width: 0 !important;
            max-width: 100% !important;
            transition: flex 0.3s ease !important;
            overflow: hidden !important;
        }

        /* When collapsed, left panel shows narrow icon-only sidebar */
        .app-container.collapsed .conversation-panel,
        .app-container.collapsed > .conversation-panel,
        .app-container.collapsed #conversationPanel {
            width: 60px !important;
            min-width: 60px !important;
            max-width: 60px !important;
            overflow: hidden !important;
            padding: 0 !important;
            margin: 0 !important;
            opacity: 1 !important;
            pointer-events: auto !important;
        }

        /* Hide text content in collapsed panel, show only icons */
        .app-container.collapsed .conversation-panel .conversation-content {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            padding: 0 0.5rem 1rem 0.5rem !important;
            gap: 0 !important;
        }

        .app-container.collapsed .conversation-panel .conversation-stats,
        .app-container.collapsed .conversation-panel .strip-content,
        .app-container.collapsed .conversation-panel .strip-title,
        .app-container.collapsed .conversation-panel .strip-subtitle,
        .app-container.collapsed .conversation-panel .strip-arrow,
        .app-container.collapsed .conversation-panel .session-preview,
        .app-container.collapsed .conversation-panel .nav-view:not(.active),
        .app-container.collapsed .conversation-panel #leftProfileContainer,
        .app-container.collapsed .conversation-panel #leftPanelEdgeCloseBtn,
        .app-container.collapsed .conversation-panel .view-header,
        .app-container.collapsed .conversation-panel .back-btn,
        .app-container.collapsed .conversation-panel .sidebar-logo,
        .app-container.collapsed .conversation-panel .conversation-list .session-card {
            display: none !important;
        }

        /* Conversation list shows only new chat button when collapsed */
        .app-container.collapsed .conversation-panel .conversation-list {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            padding: 8px 6px !important;
            gap: 6px !important;
        }

        /* Left nav header row - expanded state */
        .app-container:not(.collapsed) .conversation-panel #leftPanelHeaderRow {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: space-between !important;
            width: 100% !important;
            padding: 14px 0 !important;
            margin-bottom: 10px !important;
            gap: 12px !important;
        }
        
        .app-container:not(.collapsed) .conversation-panel #leftProfileContainer {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            gap: 10px !important;
            flex: 1 !important;
        }
        
        .app-container:not(.collapsed) .conversation-panel #leftPanelLogo {
            width: 26px !important;
            height: 26px !important;
            object-fit: contain !important;
            border-radius: 4px !important;
            flex-shrink: 0 !important;
        }
        
        .app-container:not(.collapsed) .conversation-panel #leftSidebarProfileName {
            margin: 0 !important;
            font-weight: 700 !important;
            font-size: 16px !important;
            line-height: 1 !important;
            white-space: nowrap !important;
            color: var(--text-primary, #1f2937) !important;
        }
        
        .app-container:not(.collapsed) .conversation-panel #leftPanelEdgeCloseBtn {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 32px !important;
            height: 32px !important;
            border-radius: 6px !important;
            border: 1px solid #e5e7eb !important;
            background: #ffffff !important;
            color: #374151 !important;
            font-size: 14px !important;
            cursor: pointer !important;
            transition: all 0.15s ease !important;
            flex-shrink: 0 !important;
        }
        
        .app-container:not(.collapsed) .conversation-panel #leftPanelEdgeCloseBtn:hover {
            background: #f3f4f6 !important;
            border-color: #d1d5db !important;
        }

        /* Left nav container when collapsed */
        .app-container.collapsed .conversation-panel .left-nav {
            padding: 0 6px 8px 6px !important;
            margin-top: 30px !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 5px !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            width: 100% !important;
        }

        /* Categories section when collapsed */
        .app-container.collapsed .conversation-panel .categories-section {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 5px !important;
            width: 100% !important;
            margin-top: 0 !important;
        }

        /* Nav view when collapsed - show as column of icons */
        .app-container.collapsed .conversation-panel .nav-view.active {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 6px !important;
            width: 100% !important;
        }

        /* Options list when collapsed */
        .app-container.collapsed .conversation-panel .options-list {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 6px !important;
            width: 100% !important;
        }

        /* Show icons only in collapsed state */
        .app-container.collapsed .conversation-panel .conversation-action-strip {
            width: 44px !important;
            height: 44px !important;
            min-width: 44px !important;
            padding: 0 !important;
            margin: 0 !important;
            border-radius: 12px !important;
            justify-content: center !important;
            align-items: center !important;
        }

        .app-container.collapsed .conversation-panel .strip-icon {
            margin: 0 !important;
            width: 36px !important;
            height: 36px !important;
        }

        /* Home button visible as icon when collapsed */
        .app-container.collapsed .conversation-panel .home-btn {
            display: flex !important;
            width: 44px !important;
            height: 44px !important;
            min-height: 44px !important;
            padding: 0 !important;
            margin: 0 !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 12px !important;
            background: transparent !important;
            border: none !important;
            cursor: pointer !important;
            flex-shrink: 0 !important;
        }

        .app-container.collapsed .conversation-panel .home-btn .icon {
            width: 32px !important;
            height: 32px !important;
            min-width: 32px !important;
            margin: 0 !important;
            border-radius: 50% !important;
        }

        .app-container.collapsed .conversation-panel .home-btn span:not(.icon) {
            display: none !important;
        }

        .app-container.collapsed .conversation-panel .home-btn:hover {
            background: rgba(102, 126, 234, 0.15) !important;
        }

        /* New Chat Icon - hidden by default, visible only when collapsed */
        .collapsed-new-chat-icon {
            display: none !important;
        }

        .app-container.collapsed .conversation-panel .collapsed-new-chat-icon {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 44px !important;
            height: 44px !important;
            min-height: 44px !important;
            margin: 0 !important;
            cursor: pointer !important;
            flex-shrink: 0 !important;
            border-radius: 12px !important;
            background: transparent !important;
            transition: all 0.2s ease !important;
        }

        .app-container.collapsed .conversation-panel .collapsed-new-chat-icon .icon {
            margin: 0 !important;
            width: 36px !important;
            height: 36px !important;
            border-radius: 50% !important;
        }

        /* Progress button when collapsed */
        .app-container.collapsed .conversation-panel .progress-btn {
            width: 44px !important;
            height: 44px !important;
            min-height: 44px !important;
            padding: 0 !important;
            margin: 0 !important;
            margin-bottom: 0 !important;
            justify-content: center !important;
            align-items: center !important;
            border-radius: 12px !important;
            background: transparent !important;
            border: none !important;
            flex-shrink: 0 !important;
        }

        .app-container.collapsed .conversation-panel .progress-btn > span:not(.icon) {
            display: none !important;
        }

        .app-container.collapsed .conversation-panel .progress-btn .icon {
            width: 32px !important;
            height: 32px !important;
            min-width: 32px !important;
            border-radius: 50% !important;
        }

        /* Category cards when collapsed */
        .app-container.collapsed .conversation-panel .category-card {
            width: 44px !important;
            height: 44px !important;
            min-height: 44px !important;
            padding: 0 !important;
            margin: 0 !important;
            justify-content: center !important;
            align-items: center !important;
            border-radius: 12px !important;
            background: transparent !important;
            border: none !important;
        }

        /* Collapsible sections when collapsed */
        .app-container.collapsed .conversation-panel .nav-collapsible-container {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 5px !important;
            width: 100% !important;
        }

        .app-container.collapsed .conversation-panel .collapsible-section {
            width: 44px !important;
            flex-shrink: 0 !important;
        }

        .app-container.collapsed .conversation-panel .collapsible-header {
            width: 44px !important;
            height: 44px !important;
            min-height: 44px !important;
            padding: 0 !important;
            margin: 0 !important;
            justify-content: center !important;
            align-items: center !important;
            border-radius: 12px !important;
            background: transparent !important;
            border: none !important;
            flex-shrink: 0 !important;
        }

        /* Hide collapsible content and arrows when collapsed */
        .app-container.collapsed .conversation-panel .collapsible-content,
        .app-container.collapsed .conversation-panel .collapsible-arrow {
            display: none !important;
        }

        /* Hide text in collapsible headers when collapsed */
        .app-container.collapsed .conversation-panel .collapsible-header span:not(.icon) {
            display: none !important;
        }

        /* Make collapsible header icons circular when collapsed */
        .app-container.collapsed .conversation-panel .collapsible-header .icon {
            margin: 0 !important;
            width: 36px !important;
            height: 36px !important;
            min-width: 36px !important;
            min-height: 36px !important;
            border-radius: 50% !important;
        }

        /* Hover effect for collapsed collapsible headers */
        .app-container.collapsed .conversation-panel .collapsible-header:hover {
            background: rgba(102, 126, 234, 0.15) !important;
        }

        /* Option items when collapsed */
        .app-container.collapsed .conversation-panel .option-item {
            width: 44px !important;
            height: 44px !important;
            min-height: 44px !important;
            padding: 0 !important;
            margin: 0 !important;
            justify-content: center !important;
            align-items: center !important;
            border-radius: 12px !important;
            background: transparent !important;
            border: none !important;
        }

        /* Hide text in all collapsed buttons */
        .app-container.collapsed .conversation-panel .progress-btn span:not(.icon),
        .app-container.collapsed .conversation-panel .category-card span:not(.icon),
        .app-container.collapsed .conversation-panel .option-item span:not(.icon) {
            display: none !important;
        }

        /* Make icons circular and properly sized when collapsed */
        .app-container.collapsed .conversation-panel .progress-btn .icon,
        .app-container.collapsed .conversation-panel .category-card .icon,
        .app-container.collapsed .conversation-panel .option-item .icon {
            margin: 0 !important;
            width: 36px !important;
            height: 36px !important;
            min-width: 36px !important;
            min-height: 36px !important;
            border-radius: 50% !important;
        }

        /* Hover effect for collapsed buttons */
        .app-container.collapsed .conversation-panel .progress-btn:hover,
        .app-container.collapsed .conversation-panel .category-card:hover,
        .app-container.collapsed .conversation-panel .option-item:hover,
        .app-container.collapsed .conversation-panel .collapsed-new-chat-icon:hover {
            background: rgba(102, 126, 234, 0.15) !important;
        }

        /* Hamburger toggle in collapsed state */
        .app-container.collapsed .conversation-panel .conversation-header {
            display: flex !important;
            justify-content: center !important;
            padding: 0.75rem 0.5rem !important;
        }

        .app-container.collapsed .conversation-panel .conversation-toggle-hamburger {
            display: flex !important;
        }

        /* Collapsed logo container - hidden by default, visible only when collapsed */
        .collapsed-logo-container {
            display: none !important;
        }
        
        .app-container.collapsed .conversation-panel .collapsed-logo-container {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 44px !important;
            height: 44px !important;
            margin: -6px auto 8px auto !important;
            margin-left: calc(50% - 22px - 8px) !important;
            padding: 0 !important;
            cursor: pointer !important;
            flex-shrink: 0 !important;
            border-radius: 8px !important;
            transition: background 0.2s ease !important;
            position: relative !important;
            overflow: hidden !important;
        }
        
        .app-container.collapsed .conversation-panel .collapsed-logo-container:hover {
            background: rgba(102, 126, 234, 0.12) !important;
        }
        
        /* Arrow icon - hidden by default, slides in on hover */
        .app-container.collapsed .conversation-panel .collapsed-logo-container .collapsed-expand-arrow {
            position: absolute !important;
            left: -10px !important;
            opacity: 0 !important;
            font-size: 10px !important;
            color: var(--primary-color, #667eea) !important;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
        .app-container.collapsed .conversation-panel .collapsed-logo-container .collapsed-logo-img {
            width: 32px !important;
            height: 32px !important;
            object-fit: contain !important;
            border-radius: 6px !important;
            transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
        /* Hover: logo slides right, arrow slides in from left */
        .app-container.collapsed .conversation-panel .collapsed-logo-container:hover .collapsed-logo-img {
            transform: translateX(4px) !important;
        }
        
        .app-container.collapsed .conversation-panel .collapsed-logo-container:hover .collapsed-expand-arrow {
            left: 4px !important;
            opacity: 1 !important;
        }

        /* Hide duplicate new-chat card when collapsed (only collapsed-new-chat-icon above is shown) */
        .app-container.collapsed .conversation-panel .new-conversation-card {
            display: none !important;
        }

        /* Ensure right content area takes full width when collapsed */
        .app-container.collapsed .right-content-area,
        .app-container.collapsed > .right-content-area,
        .app-container.collapsed #rightContentArea {
            flex: 1 1 100% !important;
            width: 100% !important;
            max-width: 100% !important;
        }

        /* Main layout grid - single column when right panel hidden */
        .main-layout,
        #mainLayout {
            display: flex !important;
            flex-direction: column !important;
            flex: 1 1 auto !important;
            width: 100% !important;
            height: 100% !important;
            min-height: 0 !important;
            min-width: 0 !important;
            overflow: hidden !important;
        }

        /* Chat section - flex container for messages + input */
        .chat-section {
            display: flex !important;
            flex-direction: column !important;
            flex: 1 1 auto !important;
            width: 100% !important;
            height: 100% !important;
            min-height: 0 !important;
            min-width: 0 !important;
            max-width: 100% !important;
            overflow: hidden !important;
            background: transparent !important;
        }

        /* Chat messages area - scrollable */
        .chat-messages,
        #log {
            flex: 1 1 auto !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            min-height: 0 !important;
            max-width: 100% !important;
            padding: 1rem !important;
            background: transparent !important;
        }

        /* Toast notifications (top right) */
        .ui-toast-container {
            position: fixed;
            top: 16px;
            right: 16px;
            z-index: 10000;
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-width: 360px;
            pointer-events: none;
        }
        .ui-toast {
            pointer-events: auto;
            padding: 12px 16px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.875rem;
            animation: uiToastIn 0.3s ease;
        }
        .ui-toast.ui-toast-error { background: #fef2f2; border-left: 4px solid #ef4444; color: #991b1b; }
        .ui-toast.ui-toast-success { background: #f0fdf4; border-left: 4px solid #22c55e; color: #166534; }
        .ui-toast .ui-toast-icon { flex-shrink: 0; margin-top: 1px; }
        .ui-toast .ui-toast-body { flex: 1; }
        .ui-toast .ui-toast-title { font-weight: 600; margin-bottom: 2px; }
        .ui-toast .ui-toast-msg { opacity: 0.95; }
        @keyframes uiToastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

        /* Chat input - stays at bottom */
        .chat-input {
            flex-shrink: 0 !important;
            position: relative !important;
            margin-top: auto !important;
            width: calc(100% - 24px) !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            margin-left: 12px !important;
            margin-right: 12px !important;
            margin-bottom: 12px !important;
        }

        /* ========================================
           LEFT EDGE OPENER (when panel collapsed)
           ======================================== */

        #leftEdgeOpenerWrap {
            position: fixed !important;
            left: 0 !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            z-index: 1000 !important;
            display: none !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 8px !important;
            padding: 8px 4px !important;
            background: transparent !important;
            border-radius: 0 !important;
            box-shadow: none !important;
        }

        .app-container.collapsed #leftEdgeOpenerWrap {
            display: flex !important;
        }

        /* Prevent any child from overflowing */
        .app-container *,
        .right-content-area *,
        .main-layout *,
        .chat-section * {
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

        /* ========================================
           RESPONSIVE BREAKPOINTS
           ======================================== */

        /* Large screens (1400px and above) */
        @media (min-width: 1400px) {
            .app-container .conversation-panel,
            .app-container > .conversation-panel,
            #conversationPanel {
                width: 340px !important;
            }
        }

        /* Medium-large screens (1200px - 1399px) */
        @media (max-width: 1399px) and (min-width: 1200px) {
            .app-container .conversation-panel,
            .app-container > .conversation-panel,
            #conversationPanel {
                width: 300px !important;
            }
        }

        /* Medium screens (1024px - 1199px) */
        @media (max-width: 1199px) and (min-width: 1024px) {
            .app-container .conversation-panel,
            .app-container > .conversation-panel,
            #conversationPanel {
                width: 280px !important;
            }
        }

        /* Tablet landscape and smaller desktops (900px - 1023px) */
        @media (max-width: 1023px) and (min-width: 900px) {
            .app-container .conversation-panel,
            .app-container > .conversation-panel,
            #conversationPanel {
                width: 250px !important;
            }

            .chat-messages {
                padding: 0.75rem !important;
            }
        }

        /* Tablet and small screens (768px - 899px) - show collapsed 60px sidebar */
        @media (max-width: 899px) and (min-width: 768px) {
            .app-container .conversation-panel,
            .app-container > .conversation-panel,
            #conversationPanel {
                width: 60px !important;
                min-width: 60px !important;
                max-width: 60px !important;
                overflow: hidden !important;
            }

            /* Hide text content, show only icons */
            .app-container .conversation-panel .conversation-list,
            .app-container .conversation-panel .conversation-stats,
            .app-container .conversation-panel .strip-content,
            .app-container .conversation-panel .strip-arrow,
            .app-container .conversation-panel #leftProfileContainer,
            .app-container .conversation-panel #leftPanelEdgeCloseBtn {
                display: none !important;
            }

            .app-container .right-content-area,
            .app-container > .right-content-area,
            #rightContentArea {
                flex: 1 1 auto !important;
            }

            #leftEdgeOpenerWrap {
                display: none !important;
            }

            .chat-messages {
                padding: 0.75rem !important;
            }

            .chat-input {
                margin: 8px !important;
                width: calc(100% - 16px) !important;
                margin-left: 8px !important;
                margin-right: 8px !important;
            }

            /* Quick action cards 2 columns */
            .quick-action-cards-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 0.75rem !important;
                max-width: 100% !important;
            }

            .quick-action-card {
                min-height: 120px !important;
            }

            .quick-action-cards-container {
                padding: 1rem !important;
            }
        }

        /* Mobile and small tablets (below 768px) - show collapsed 50px sidebar */
        @media (max-width: 767px) {
            .app-container {
                flex-direction: row !important;
            }

            .app-container .conversation-panel,
            .app-container > .conversation-panel,
            #conversationPanel {
                width: 50px !important;
                min-width: 50px !important;
                max-width: 50px !important;
                overflow: hidden !important;
            }

            /* Hide text content, show only icons */
            .app-container .conversation-panel .conversation-list,
            .app-container .conversation-panel .conversation-stats,
            .app-container .conversation-panel .strip-content,
            .app-container .conversation-panel .strip-arrow,
            .app-container .conversation-panel #leftProfileContainer,
            .app-container .conversation-panel #leftPanelEdgeCloseBtn,
            .app-container .conversation-panel .left-nav {
                display: none !important;
            }

            .app-container .right-content-area,
            .app-container > .right-content-area,
            #rightContentArea {
                width: auto !important;
                height: 100% !important;
                flex: 1 1 auto !important;
            }

            /* Hide left edge opener since sidebar is visible */
            #leftEdgeOpenerWrap {
                display: none !important;
            }

            .chat-messages {
                padding: 0.5rem !important;
            }

            .chat-input {
                margin: 6px !important;
                width: calc(100% - 12px) !important;
                margin-left: 6px !important;
                margin-right: 6px !important;
                padding: 6px 10px !important;
            }

            /* Quick action cards responsive - single column on mobile */
            .quick-action-cards-grid {
                grid-template-columns: 1fr !important;
                gap: 0.75rem !important;
                max-width: 100% !important;
                padding: 0 0.5rem !important;
            }

            .quick-action-card {
                min-height: 100px !important;
            }

            .quick-action-cards-container {
                padding: 0.5rem !important;
            }

            .quick-action-cards-header h3 {
                font-size: 1.25rem !important;
            }

            .quick-action-cards-header p {
                font-size: 0.875rem !important;
            }
        }

        /* Very small screens (below 480px) */
        @media (max-width: 479px) {
            .nav-instance {
                padding: 0.5rem !important;
            }

            .nav-title {
                display: none !important;
            }

            /* Show "Current Team: team name" consistently; hide only dark mode label in compact view */
            #darkModeLabel {
                display: none !important;
            }

            .chat-messages {
                padding: 0.25rem !important;
            }

            .chat-input {
                margin: 4px !important;
                padding: 4px 8px !important;
            }
        }

        /* ========================================
           WINDOW RESIZE HANDLING
           ======================================== */

        /* Force proper layout calculation on resize */
        .app-container,
        .right-content-area,
        .main-layout,
        .chat-section {
            box-sizing: border-box !important;
        }

        /* Prevent overflow issues during resize */
        .chat-section * {
            max-width: 100% !important;
        }

        /* Handle very short windows */
        @media (max-height: 500px) {
            .app-container {
                height: 100vh !important;
            }

            .chat-messages {
                min-height: 150px !important;
            }

            .conversation-panel .conversation-stats,
            .conversation-panel .conversation-list {
                max-height: 40vh !important;
                overflow-y: auto !important;
            }
        }

        /* Handle split-screen / narrow windows - minimal 44px sidebar */
        @media (max-width: 600px) {
            .app-container .conversation-panel,
            .app-container > .conversation-panel,
            #conversationPanel {
                width: 44px !important;
                min-width: 44px !important;
                max-width: 44px !important;
                overflow: hidden !important;
            }

            /* Hide most content */
            .app-container .conversation-panel .conversation-list,
            .app-container .conversation-panel .conversation-stats,
            .app-container .conversation-panel .strip-content,
            .app-container .conversation-panel .strip-arrow,
            .app-container .conversation-panel #leftProfileContainer,
            .app-container .conversation-panel #leftPanelEdgeCloseBtn,
            .app-container .conversation-panel .left-nav {
                display: none !important;
            }

            .app-container .right-content-area,
            .app-container > .right-content-area,
            #rightContentArea {
                flex: 1 1 auto !important;
            }

            #leftEdgeOpenerWrap {
                display: none !important;
            }

            /* Smaller action strip icons */
            .app-container .conversation-panel .conversation-action-strip {
                width: 36px !important;
                height: 36px !important;
                min-width: 36px !important;
            }

            .app-container .conversation-panel .strip-icon {
                width: 28px !important;
                height: 28px !important;
            }
        }

        /* ========================================
           ORIENTATION HANDLING
           ======================================== */

        @media (orientation: portrait) {
            .app-container .conversation-panel {
                max-width: 280px;
            }
        }

        @media (orientation: landscape) and (max-height: 500px) {
            .app-container .conversation-panel {
                width: 200px !important;
                min-width: 180px !important;
            }

            .chat-messages {
                padding: 0.5rem !important;
            }
        }

        /* ========================================
           MESSAGE BUBBLES RESPONSIVE
           ======================================== */

        .message-bubble,
        .user-message,
        .bot-message {
            max-width: 85% !important;
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
        }

        /* Bot message bubble - transparent background */
        .bot-message .message-bubble {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }

        @media (max-width: 899px) {
            .message-bubble,
            .user-message,
            .bot-message {
                max-width: 90% !important;
            }
        }

        @media (max-width: 599px) {
            .message-bubble,
            .user-message,
            .bot-message {
                max-width: 95% !important;
                padding: 0.75rem !important;
            }
        }

        /* ========================================
           INPUT AREA RESPONSIVE
           ======================================== */

        .chat-input .input-wrapper {
            flex: 1 !important;
            min-width: 0 !important;
        }

        .chat-input .message-input {
            min-width: 0 !important;
            width: 100% !important;
        }

        @media (max-width: 599px) {
            .chat-input .plus-menu-button,
            .chat-input .microphone-button {
                padding: 6px !important;
            }

            .chat-input .send-button {
                padding: 6px !important;
                min-width: 36px !important;
            }
        }

        /* ========================================
           NAV BAR RESPONSIVE
           ======================================== */

        .nav-instance {
            flex-wrap: nowrap !important;
            min-height: 0 !important;
        }

        @media (max-width: 899px) {
            .nav-instance {
                padding: 0.5rem 1rem !important;
            }

            .nav-left .ai-badge {
                display: none !important;
            }
        }

        @media (max-width: 599px) {
            .nav-instance {
                padding: 0.5rem !important;
            }

            .nav-logo img {
                width: 28px !important;
                height: 28px !important;
            }

            .mode-toggle-btn .mode-label {
                display: none !important;
            }
        }

/* Block 5 */
/* Hover message bubble - compact text-only tooltip */
    .hover-message {
        position: fixed;
        z-index: 2147483647; /* above everything */
        max-width: 220px;
        min-width: 80px;
        background: var(--surface-color, #ffffff);
        color: var(--text-primary, #1f2937);
        border: 1px solid var(--border-color, #e6edf3);
        border-radius: 6px;
        /* lighter shadow to reduce paint cost */
        box-shadow: 0 4px 12px rgba(16,24,40,0.08);
        padding: 6px 10px;
        font-size: 0.7rem;
        line-height: 1.3;
        pointer-events: none; /* do not block mouse events */
        opacity: 0;
        transform: translateY(4px) scale(0.98);
        /* only animate transform/opacity (GPU friendly) */
        transition: opacity 150ms ease, transform 150ms ease;
        will-change: transform, opacity;
        display: block;
    }

    .hover-message.show {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Hide the icon completely - text only */
    .hover-message .hover-icon {
        display: none !important;
    }

    .hover-message .hover-text {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Small caret to visually anchor to the touch point */
    .hover-message::after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        background: var(--surface-color, #ffffff);
        border-left: 1px solid var(--border-color, #e6edf3);
        border-bottom: 1px solid var(--border-color, #e6edf3);
        transform: rotate(45deg);
        left: 14px; /* updated dynamically when shown */
        bottom: -4px;
        box-shadow: -1px 1px 4px rgba(16,24,40,0.04);
        z-index: -1;
    }

    @media (max-width: 640px) {
        .hover-message { max-width: 85vw; min-width: 70px; }
    }

    /* Chat input - make the bottom chat bar pill-shaped (curvy/cylindrical)
       and ensure it visually ends at the left/right panel edges. The
       chat-section sits to the right of the left conversation panel
       (which uses 350px), so inside that area the .chat-input will
       span full width and render as a rounded pill. */
    :root {
        --left-panel-width: 350px; /* matches #conversationPanel width */
        --chat-pill-radius: 9999px;
        --chat-pill-bg: var(--surface-elevated, #ffffff);
        --chat-pill-border-color: var(--border-color, #e6edf3);
    }

    .chat-input {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        background: var(--chat-pill-bg);
        border: 2px solid var(--chat-pill-border-color);
        border-radius: var(--chat-pill-radius);
        box-shadow: 0 8px 24px rgba(16,24,40,0.06);
        position: sticky; /* keep near bottom of chat */
        bottom: 16px;
        z-index: 40;
        margin: 12px 0;
        align-self: stretch;
        /* ensure text doesn't cause overflow */
        min-width: 0;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    /* Single focus ring on the container when textarea is focused */
    .chat-input:focus-within {
        border-color: var(--primary-color, #667eea);
        box-shadow: 0 8px 24px rgba(16,24,40,0.06), 0 0 0 3px rgba(102, 126, 234, 0.15);
    }

    /* make the inner wrapper transparent so the pill shape is the visible container */
    .chat-input .input-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        padding: 0;
        margin: 0;
        min-width: 0;
    }

    .message-input {
        background: transparent;
        border: none;
        outline: none;
        resize: none;
        padding: 8px 12px;
        font-size: 14px;
        line-height: 1.2;
        width: 100%;
        border-radius: var(--chat-pill-radius);
        color: var(--text-primary, #1f2937);
        min-width: 0;
    }

    /* make icon buttons round and visually sit inside the pill */
    .send-button, .microphone-button, .plus-menu-button, .stt-cancel-chip {
        background: transparent;
        border: none;
        padding: 8px;
        border-radius: 9999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--text-primary, #1f2937);
    }

    .send-button i, .microphone-button i, .plus-menu-button i {
        color: var(--primary-color, #667eea);
    }

    .stt-cancel-chip {
        background: rgba(0,0,0,0.04);
        padding: 6px 10px;
        border-radius: 9999px;
    }

    @media (max-width: 768px) {
        .chat-input { margin: 8px; bottom: 8px; padding: 8px 10px; }
    }

/* Block 6 */
/* User dropdown menu styles */
        .user-welcome {
            position: relative;
        }

        .user-dropdown {
            position: fixed;
            top: 60px;
            right: 10px;
            margin-top: 0;
            background: var(--surface-color, #ffffff);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 0.75rem;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
            min-width: 200px;
            z-index: 999999;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.2s ease;
            pointer-events: none;
        }

        .user-dropdown.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto;
        }

        .user-dropdown-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            color: var(--text-primary);
            text-decoration: none;
            transition: var(--transition-normal);
            border-bottom: 1px solid var(--border-light);
            cursor: pointer;
        }

        .user-dropdown-item:last-child {
            border-bottom: none;
        }

        .user-dropdown-item:hover {
            background: var(--primary-color);
            color: white;
        }

        .user-dropdown-item.hidden {
            display: none !important;
        }

        .user-dropdown-item i {
            font-size: 1rem;
            width: 1.25rem;
            text-align: center;
        }

        .user-dropdown-item span {
            font-size: 0.9rem;
            font-weight: 500;
        }

        /* Dropdown arrow */
        .user-welcome::after {
            content: '';
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid var(--text-secondary);
            margin-left: 0.5rem;
            transition: var(--transition-normal);
        }

        .user-welcome:hover::after {
            border-top-color: var(--primary-color);
        }

        .user-welcome.dropdown-open::after {
            transform: rotate(180deg);
            border-top-color: var(--primary-color);
        }

        /* Mode Toggle Styles */
        .mode-toggle {
            margin-right: 0.6rem;
        }

        .mode-toggle-btn {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.3rem 0.6rem;
            background: var(--surface-color);
            border: none;
            border-radius: 0.5rem;
            color: var(--text-primary);
            font-weight: 500;
            font-size: 0.78rem;
            cursor: pointer;
            transition: var(--transition-normal);
        }

        .mode-toggle-btn:hover {
            background: var(--surface-hover);
        }

        .mode-label {
            min-width: 60px;
            text-align: left;
        }

        .toggle-switch {
            position: relative;
            width: 36px;
            height: 16px;
            background: var(--border-color);
            border-radius: 8px;
            transition: background-color 0.3s ease;
        }

        .toggle-switch.active {
            background: var(--primary-color);
        }

        .toggle-slider {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 12px;
            height: 12px;
            background: 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);
        }

        /* Mode Switch Modal Styles */
        .mode-switch-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 200000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
        }

        .mode-switch-content {
            position: relative;
            z-index: 10; /* Ensure content is above overlay for click events */
            background: white;
            border-radius: 16px;
            padding: 0;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            max-width: 420px;
            width: 90%;
            animation: modalSlideIn 0.3s ease-out;
            border: 1px solid #e5e7eb;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: scale(0.95) translateY(-10px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .mode-switch-content .modal-header {
            text-align: center;
            padding: 2rem 2rem 1.5rem;
            border-bottom: 1px solid #f3f4f6;
        }

        .modal-icon {
            width: 64px;
            height: 64px;
            background: linear-gradient(135deg, #6B9DE8 0%, #8BB4F0 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
        }

        .modal-icon i {
            font-size: 24px;
            color: white;
        }

        .mode-switch-content .modal-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1f2937;
            margin: 0 0 0.5rem 0;
            line-height: 1.3;
        }

        .mode-switch-content .modal-subtitle {
            font-size: 1rem;
            color: #6b7280;
            margin: 0;
            line-height: 1.5;
        }

        .modal-actions {
            display: flex;
            gap: 0.75rem;
            padding: 1.5rem 2rem 2rem;
            justify-content: center;
        }

        .modal-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
            min-width: 120px;
            justify-content: center;
        }

        .modal-btn-secondary {
            background: #f3f4f6;
            color: #374151;
            border: 1px solid #d1d5db;
        }

        .modal-btn-secondary:hover {
            background: #e5e7eb;
            border-color: #9ca3af;
            transform: translateY(-1px);
        }

        .modal-btn-primary {
            background: linear-gradient(135deg, #6B9DE8 0%, #8BB4F0 100%);
            color: white;
            border: 1px solid transparent;
        }

        .modal-btn-primary:hover {
            background: linear-gradient(135deg, #5a67d8 0%, #6b4696 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }

        .modal-btn i {
            font-size: 0.85rem;
        }

        /* Modal animation */
        .mode-switch-modal.closing .mode-switch-content {
            animation: modalSlideOut 0.2s ease-in forwards;
        }

        .reconnect-banner {
            display: none;
            background: #eef2ff; /* --user-message-bg */
            border: 1px solid #6B9DE8; /* --primary-color */
            color: #00A1C9; /* --accent-color */
            padding: 1rem 1.25rem;
            margin: 0.5rem 1rem 0;
            border-radius: 0.75rem;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        }

        .reconnect-message {
            font-size: 0.95rem;
        }

        .reconnect-message strong {
            color: #00A1C9; /* --accent-color */
}


        @keyframes modalSlideOut {
            from {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
            to {
                opacity: 0;
                transform: scale(0.95) translateY(-10px);
            }
        }