/* Inter font fallback */
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        /* CSS Variables for theming */
        :root {
            /* Light theme colors - Fresh & Modern (Concept 2) */
            --bg-primary: #f8fcf5;
            --bg-secondary: #f0f7eb;
            --bg-tertiary: #e6f2df;
            --bg-elevated: #ffffff;
            --bg-sidebar: #e8f0e3;
            --bg-header: #dde8d6;
            --text-primary: #1a2e1a;
            --text-secondary: #4a5d4a;
            --text-tertiary: #7a8d7a;
            --text-inverse: #ffffff;
            --border-default: #d4e7cc;
            --border-light: #e6f2df;
            --border-dark: #b8d4ad;
            --interactive-hover: #d4e7cc;
            --interactive-active: #c8dcc0;
            --primary-green: #80d060;
            --primary-green-hover: #6fc04e;
            --primary-green-light: #e6f2df;
            --header-height: 56px;
        }

        [data-theme="dark"] {
            /* Dark theme colors - Fresh & Modern (Concept 2) */
            --bg-primary: #1f2923;
            --bg-secondary: #2a3831;
            --bg-tertiary: #354739;
            --bg-elevated: #2a3831;
            --bg-sidebar: #1a231d;
            --bg-header: #151c18;
            --text-primary: #e8f5e8;
            --text-secondary: #a8c8a8;
            --text-tertiary: #789878;
            --text-inverse: #1a2e1a;
            --border-default: #3d4d41;
            --border-light: #354739;
            --border-dark: #4d5d51;
            --interactive-hover: #2a3831;
            --interactive-active: #354739;
            --primary-green: #80d060;
            --primary-green-hover: #6fc04e;
            --primary-green-light: rgba(128, 208, 96, 0.2);
            --error-bg: rgba(220, 53, 69, 0.1);
            --error-border: #dc3545;
            --header-height: 56px;
        }

        /* Base styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-size: 16px;
            line-height: 1.5;
            color: var(--text-primary);
            background: var(--bg-primary);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* Main layout */
        .app-layout {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* Top Header Bar */
        .app-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: var(--header-height);
            background: var(--bg-header);
            border-bottom: 1px solid var(--border-default);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            z-index: 200;
        }

        .header-left {
            display: flex;
            align-items: center;
        }

        .header-brand {
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .brand-logo {
            width: 22px;
            height: 25px;
        }

        .brand-text {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .brand-ai {
            color: var(--text-secondary);
            font-weight: 400;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .header-theme-btn {
            width: 36px;
            height: 36px;
            background: transparent;
            border: 1px solid var(--border-default);
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .header-theme-btn:hover {
            background: var(--interactive-hover);
            border-color: var(--border-dark);
        }

        .header-theme-btn svg {
            width: 18px;
            height: 18px;
            color: var(--text-primary);
        }

        .theme-icon-dark {
            display: none;
        }

        [data-theme="dark"] .theme-icon-light {
            display: none;
        }

        [data-theme="dark"] .theme-icon-dark {
            display: block;
        }

        /* Sidebar */
        .app-sidebar {
            position: fixed;
            left: 0;
            top: var(--header-height);
            height: calc(100vh - var(--header-height));
            width: 280px;
            background: var(--bg-sidebar);
            border-right: 1px solid var(--border-default);
            display: flex;
            flex-direction: column;
            z-index: 100;
            transition: transform 0.3s ease;
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }

        .logo-icon {
            width: 32px;
            height: 32px;
            flex-shrink: 0;
        }

        .logo-text {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
            text-decoration: none;
        }

        .logo-text .ai-suffix {
            color: var(--text-secondary);
        }

        /* Sidebar Navigation */
        .sidebar-nav {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 8px;
        }

        .sidebar-section {
            margin-bottom: 16px;
        }

        .sidebar-nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            color: var(--text-secondary);
            text-decoration: none;
            border-radius: 6px;
            transition: background-color 0.15s, color 0.15s;
        }

        .sidebar-nav-item:hover {
            background-color: var(--interactive-hover);
            color: var(--text-primary);
        }

        .sidebar-nav-item.active {
            background-color: var(--interactive-active);
            color: var(--text-primary);
        }

        .sidebar-nav-item svg {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }

        .sidebar-section-header {
            padding: 8px 12px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .sidebar-section-title {
            position: relative;
            display: flex;
            align-items: center;
            padding: 8px 12px;
            padding-right: 32px;
            margin-bottom: 4px;
        }

        .sidebar-section-title span {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .clear-all-btn {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            cursor: pointer;
            padding: 2px;
            color: var(--text-secondary);
            opacity: 0;
            transition: opacity 0.15s;
        }

        .clear-all-btn svg {
            width: 14px;
            height: 14px;
        }

        .sidebar-section-title:hover .clear-all-btn {
            opacity: 0.6;
        }

        .clear-all-btn:hover {
            opacity: 1;
            color: var(--error-border);
        }

        .sidebar-section-content {
            /* No max-height restrictions for non-collapsible sections */
        }

        .sidebar-nav-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            margin: 2px 0;
            color: var(--text-primary);
            text-decoration: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .sidebar-nav-item:hover {
            background: var(--interactive-hover);
        }

        .sidebar-nav-item.active {
            background: var(--interactive-active);
            font-weight: 600;
        }

        .sidebar-nav-item svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }

        /* Chat session items */
        .session-item {
            position: relative;
            display: block;
            padding: 10px 12px;
            padding-right: 32px;
            margin: 2px 0;
            color: var(--text-primary);
            text-decoration: none;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.2s;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .session-item:hover {
            background: var(--interactive-hover);
        }

        .session-item:hover .session-delete-btn {
            opacity: 1;
        }

        .session-item.active {
            background: var(--interactive-active);
            font-weight: 600;
        }

        .session-delete-btn {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border: none;
            background: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 2px;
            border-radius: 4px;
            opacity: 0;
            transition: opacity 0.15s;
            z-index: 10;
        }

        .session-delete-btn:hover {
            background: var(--error-bg);
            color: var(--error-border);
        }

        .session-delete-btn svg {
            width: 14px;
            height: 14px;
        }

        /* Sidebar Footer (User Profile) */
        .sidebar-footer {
            border-top: 1px solid var(--border-default);
            padding: 16px;
            position: relative;
        }

        .user-profile {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .user-profile:hover {
            background: var(--interactive-hover);
        }

        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--primary-green-light);
            color: var(--primary-green);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 14px;
            flex-shrink: 0;
            pointer-events: none;
        }

        .user-info {
            flex: 1;
            overflow: hidden;
            pointer-events: none;
        }

        .user-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .user-role {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .user-dropdown-trigger {
            pointer-events: none;
        }

        .user-dropdown-trigger svg {
            width: 16px;
            height: 16px;
            color: var(--text-secondary);
            flex-shrink: 0;
        }

        /* User Dropdown Menu */
        .user-dropdown {
            position: absolute;
            bottom: 70px;
            left: 16px;
            right: 16px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            display: none;
            z-index: 200;
        }

        .user-dropdown.visible {
            display: block;
        }

        .user-dropdown-header {
            padding: 12px;
            border-bottom: 1px solid var(--border-default);
        }

        .user-dropdown-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .user-dropdown-email {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .user-dropdown-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            width: 100%;
            border: none;
            background: none;
            color: var(--text-primary);
            font-size: 14px;
            cursor: pointer;
            text-align: left;
            transition: background-color 0.2s;
            text-decoration: none;
            font-family: inherit;
        }

        .user-dropdown-item:hover {
            background: var(--interactive-hover);
        }

        .user-dropdown-item svg {
            width: 18px;
            height: 18px;
        }

        /* Main Content Area */
        .main-content {
            flex: 1;
            margin-top: var(--header-height);
            padding: 40px;
            transition: margin-left 0.3s ease;
        }

        /* Main content wrapper with sidebar spacing */
        .main-with-sidebar {
            margin-top: var(--header-height);
            transition: margin-left 0.3s ease;
        }

        /* Only add sidebar margin when authenticated on desktop */
        @media (min-width: 1024px) {
            [data-authenticated="True"] .main-content,
            [data-authenticated="True"] .main-with-sidebar {
                margin-left: 280px;
            }
        }

        /* Chat specific layout - centered with max-width */
        .chat-container {
            max-width: 900px;
            margin: 0 auto;
            padding-top: 24px;
        }

        /* Admin pages layout - wider for tables */
        .admin-container {
            max-width: 1400px;
            margin: 0 auto;
            padding-top: 24px;
        }

        /* Page header - reusable header for content pages */
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .page-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }

        .page-description {
            color: var(--text-secondary);
            margin-top: 0.25rem;
        }

        .admin-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }

        .admin-header h1 {
            font-size: 24px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .content-header {
            margin-bottom: 24px;
        }

        .content-header h1 {
            font-size: 32px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .content-header p {
            font-size: 16px;
            color: var(--text-secondary);
        }

        .demo-card {
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 16px;
        }

        .demo-card h2 {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 12px;
        }

        .demo-card p {
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.6;
        }

        /* Mobile Overlay */
        .sidebar-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 99;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .sidebar-overlay.visible {
            display: block;
            opacity: 1;
        }

        /* Hamburger Menu Button (mobile) */
        .sidebar-toggle-btn {
            display: none;
            width: 36px;
            height: 36px;
            background: transparent;
            border: 1px solid var(--border-default);
            border-radius: 6px;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            margin-right: 12px;
        }

        .sidebar-toggle-btn:hover {
            background: var(--interactive-hover);
            border-color: var(--border-dark);
        }

        .sidebar-toggle-btn svg {
            width: 20px;
            height: 20px;
            color: var(--text-primary);
        }

        /* Responsive */
        @media (max-width: 1023px) {
            .app-sidebar {
                transform: translateX(-100%);
            }

            .app-sidebar.open {
                transform: translateX(0);
            }

            .main-content,
            .main-with-sidebar {
                margin-left: 0;
                padding: 20px;
            }

            .chat-container,
            .admin-container {
                padding-top: 24px;
            }

            .sidebar-toggle-btn {
                display: flex;
            }

            .sidebar-overlay {
                top: var(--header-height);
            }
        }

        @media (max-width: 768px) {
            .content-header h1 {
                font-size: 24px;
            }

            .main-content,
            .main-with-sidebar {
                padding: 16px;
            }

            .chat-container,
            .admin-container {
                padding-top: 24px;
            }

            .app-header {
                padding: 0 12px;
            }

            .brand-text {
                font-size: 18px;
            }
        }

        /* Reusable Modal Styles */
        body.modal-open {
            overflow: hidden;
        }

        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(8px);
            z-index: 9999;
            align-items: center;
            justify-content: center;
            padding: 20px;
            overflow-y: auto;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal-content {
            background: var(--bg-elevated);
            border-radius: 8px;
            width: 100%;
            max-width: 600px;
            max-height: 95vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
        }

        .modal-content.modal-large {
            max-width: 900px;
        }

        .modal-header {
            padding: 20px;
            border-bottom: 1px solid var(--border-default);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--bg-secondary);
        }

        .modal-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 24px;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: background 0.2s;
            line-height: 1;
        }

        .modal-close:hover {
            background: var(--interactive-hover);
        }

        .modal-body {
            padding: 20px;
            overflow-y: auto;
            flex: 1;
            min-height: 0;
            background: var(--bg-elevated);
        }

        .modal-footer {
            padding: 20px;
            border-top: 1px solid var(--border-default);
            background: var(--bg-secondary);
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            flex-shrink: 0;
        }

        /* Reusable Button Styles */
        .btn {
            display: inline-block;
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 14px;
            text-decoration: none;
        }

        .btn-primary {
            background: var(--primary-green);
            color: var(--text-inverse);
            border: 1px solid var(--primary-green);
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        }

        .btn-primary:hover {
            background: var(--primary-green-hover);
            border-color: var(--primary-green-hover);
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
            transform: translateY(-1px);
        }

        .btn-secondary {
            background: var(--bg-secondary);
            color: var(--text-primary);
            border: 1px solid var(--border-default);
        }

        .btn-secondary:hover {
            background: var(--interactive-hover);
        }

        .btn-edit {
            display: inline-block;
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border: 1px solid var(--border-default);
            text-decoration: none;
        }

        .btn-edit:hover {
            background: var(--interactive-hover);
            border-color: var(--border-dark);
        }

        .btn-delete {
            display: inline-block;
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            background: #fee;
            color: #c33;
            border: 1px solid #fcc;
            text-decoration: none;
        }

        .btn-delete:hover {
            background: #fdd;
            border-color: #fbb;
        }

        .btn-connect {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            background: var(--primary-green);
            color: var(--text-inverse);
            border: 1px solid var(--primary-green);
            text-decoration: none;
        }

        .btn-connect:hover {
            background: var(--primary-green-hover);
            border-color: var(--primary-green-hover);
        }

        /* Reusable Form Styles */
        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 8px;
            font-size: 14px;
        }

        .form-input,
        .form-select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border-default);
            border-radius: 6px;
            background: var(--bg-primary);
            color: var(--text-primary);
            font-size: 14px;
            box-sizing: border-box;
        }

        .form-input:focus,
        .form-select:focus {
            outline: none;
            border-color: var(--border-dark);
            box-shadow: 0 0 0 2px var(--interactive-active);
        }

        .form-textarea {
            width: 100%;
            min-height: 100px;
            padding: 10px 12px;
            border: 1px solid var(--border-default);
            border-radius: 6px;
            background: var(--bg-primary);
            color: var(--text-primary);
            font-size: 14px;
            box-sizing: border-box;
            resize: vertical;
            font-family: inherit;
        }

        .form-textarea:focus {
            outline: none;
            border-color: var(--border-dark);
            box-shadow: 0 0 0 2px var(--interactive-active);
        }

        .form-checkbox {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .form-checkbox input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        .form-checkbox label {
            cursor: pointer;
            font-size: 14px;
            color: var(--text-primary);
            margin: 0;
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 24px;
            padding-top: 20px;
            border-top: 1px solid var(--border-default);
        }

        .form-error,
        .message-error {
            background: #fee;
            border: 1px solid #fcc;
            color: #c33;
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 16px;
            font-size: 14px;
        }

        .form-success,
        .message-success {
            background: #efe;
            border: 1px solid #cfc;
            color: #363;
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 16px;
            font-size: 14px;
        }

        /* Reusable Table Styles */
        .admin-table {
            width: 100%;
            border-collapse: collapse;
            background: var(--bg-elevated);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .admin-table th,
        .admin-table td {
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid var(--border-default);
        }

        .admin-table th {
            background: var(--bg-secondary);
            font-weight: 600;
            color: var(--text-primary);
            font-size: 14px;
        }

        .admin-table td {
            color: var(--text-secondary);
            font-size: 14px;
        }

        .admin-table tbody tr {
            transition: background 0.2s;
        }

        .admin-table tbody tr:hover {
            background: var(--bg-secondary);
        }

        .admin-table tbody tr:last-child td {
            border-bottom: none;
        }

        /* Dashboard Grid & Widgets */
        .dashboard-actions {
            display: flex;
            gap: 0.5rem;
        }

        .edit-mode-badge {
            background: var(--warning-bg);
            color: var(--warning-text);
            border: 1px solid var(--warning-border);
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            font-size: 0.85rem;
            font-weight: 500;
        }

        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            margin-top: 1.5rem;
        }

        @media (max-width: 1200px) {
            .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 768px) {
            .dashboard-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
            .dashboard-grid .dashboard-widget.size-s,
            .dashboard-grid .dashboard-widget.size-m,
            .dashboard-grid .dashboard-widget.size-l { grid-column: 1 / -1; }
        }

        .dashboard-widget {
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .dashboard-widget.size-xs { min-height: 120px; grid-column: span 1; }
        .dashboard-widget.size-s { min-height: 200px; grid-column: span 2; }
        .dashboard-widget.size-m { min-height: 300px; grid-column: span 3; }
        .dashboard-widget.size-l { min-height: 400px; grid-column: span 4; }

        @media (max-width: 1200px) {
            .dashboard-widget.size-s { grid-column: span 1; }
            .dashboard-widget.size-m { grid-column: span 2; }
            .dashboard-widget.size-l { grid-column: span 2; }
        }

        .dashboard-widget.dragging {
            opacity: 0.5;
            transform: scale(1.02);
        }

        .dashboard-widget.drag-over {
            border-color: var(--primary-green);
            box-shadow: 0 0 0 2px rgba(154, 208, 102, 0.3);
        }

        .edit-mode .dashboard-widget {
            cursor: move;
        }

        .edit-mode .dashboard-widget:hover {
            border-color: var(--border-dark);
        }

        .widget-header {
            padding: 1rem;
            border-bottom: 1px solid var(--border-default);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--bg-secondary);
        }

        .widget-title {
            font-weight: 600;
            font-size: 0.95rem;
            color: var(--text-primary);
            margin: 0;
        }

        .widget-actions {
            display: flex;
            gap: 0.25rem;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .dashboard-widget:hover .widget-actions,
        .edit-mode .widget-actions {
            opacity: 1;
        }

        .widget-action-btn {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 1rem;
        }

        .widget-action-btn:hover {
            background: var(--interactive-hover);
            color: var(--text-primary);
        }

        .widget-action-btn.delete:hover {
            background: var(--error-bg);
            color: var(--error-text);
        }

        .widget-body {
            padding: 1rem;
            flex: 1;
            overflow: auto;
        }

        .widget-content {
            font-size: 0.9rem;
            line-height: 1.6;
            color: var(--text-primary);
        }

        .widget-meta {
            font-size: 0.75rem;
            color: var(--text-tertiary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .widget-loading, .widget-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
            color: var(--text-secondary);
            padding: 1rem;
            gap: 0.5rem;
        }

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

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

        /* Shared content tables (chat messages and dashboard widgets) */
        .message-content table,
        .widget-content table {
            width: 100%;
            border-collapse: collapse;
            background: var(--bg-primary);
            border-radius: 8px;
            margin: 8px 0;
            font-size: 14px;
            table-layout: auto;
        }

        .message-content table th,
        .message-content table td,
        .widget-content table th,
        .widget-content table td {
            padding: 10px 12px;
            text-align: left;
            border-bottom: 1px solid var(--border-default);
        }

        .message-content table th,
        .widget-content table th {
            background: var(--bg-secondary);
            font-weight: 600;
            color: var(--text-primary);
            white-space: nowrap;
        }

        .message-content table td,
        .widget-content table td {
            color: var(--text-secondary);
        }

        .message-content table tbody tr:hover,
        .widget-content table tbody tr:hover {
            background: var(--bg-secondary);
        }

        .message-content table tbody tr:last-child td,
        .widget-content table tbody tr:last-child td {
            border-bottom: none;
        }

        /* Links in tables */
        .message-content table a,
        .widget-content table a {
            color: #3b82f6;
            text-decoration: none;
            font-weight: 500;
        }

        .message-content table a:hover,
        .widget-content table a:hover {
            text-decoration: underline;
        }

        /* Shared content charts */
        .message-content canvas,
        .widget-content canvas {
            max-width: 100%;
            height: auto;
            margin: 16px 0;
            background: transparent;
            border-radius: 8px;
            padding: 12px;
        }

        /* Shared content lists and paragraphs */
        .message-content ul, .message-content ol,
        .widget-content ul, .widget-content ol {
            margin: 0.5rem 0;
            padding-left: 1.5rem;
        }

        .message-content p,
        .widget-content p {
            margin: 0.5rem 0;
        }

        .message-content li,
        .widget-content li {
            margin: 0.25em 0;
        }

        /* Shared content headers */
        .message-content h1,
        .message-content h2,
        .message-content h3,
        .widget-content h1,
        .widget-content h2,
        .widget-content h3 {
            margin: 0.5em 0;
            font-weight: 600;
        }

        .message-content h1,
        .widget-content h1 {
            font-size: 1.5em;
        }

        .message-content h2,
        .widget-content h2 {
            font-size: 1.3em;
        }

        .message-content h3,
        .widget-content h3 {
            font-size: 1.1em;
        }

        /* Shared content code styling */
        .message-content code,
        .widget-content code {
            background: rgba(0, 0, 0, 0.1);
            padding: 0.2em 0.4em;
            border-radius: 3px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.9em;
        }

        .message-content pre,
        .widget-content pre {
            background: var(--bg-primary);
            border: 1px solid var(--border-default);
            border-radius: 8px;
            padding: 12px;
            overflow-x: auto;
            margin: 0.5em 0;
        }

        .message-content pre code,
        .widget-content pre code {
            background: none;
            padding: 0;
            font-size: 0.875em;
            line-height: 1.5;
        }

        /* Shared content blockquote */
        .message-content blockquote,
        .widget-content blockquote {
            border-left: 4px solid var(--border-default);
            padding-left: 1em;
            margin: 0.5em 0;
            color: var(--text-secondary);
        }

        /* Shared content text formatting */
        .message-content strong,
        .widget-content strong {
            font-weight: 600;
        }

        .message-content em,
        .widget-content em {
            font-style: italic;
        }

        /* Reusable Badge Styles */
        .badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }

        .badge-blue {
            background: #eef;
            color: #336;
        }

        .badge-green {
            background: #efe;
            color: #363;
        }

        .badge-red {
            background: #fee;
            color: #c33;
        }

        .badge-admin {
            background: #eef;
            color: #336;
        }

        .badge-superadmin {
            background: #fef;
            color: #636;
        }

        .badge-configured {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .badge-not-configured {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        /* Attachment display components */
        .message-attachments {
            margin-top: 8px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .message-attachment {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: 6px;
            font-size: 13px;
            color: var(--text-primary);
        }

        .message-attachment-icon {
            font-size: 16px;
        }

        .badge-not-required {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            border: 1px solid var(--border-default);
        }

        /* Action Button Groups */
        .action-buttons {
            display: flex;
            gap: 8px;
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 4rem 2rem;
            color: var(--text-secondary);
        }

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

        .empty-state-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--text-primary);
        }

        .empty-state-description {
            font-size: 0.875rem;
        }

        /* Credential Form Specific */
        .required-indicator {
            color: #e74c3c;
            margin-left: 0.25rem;
        }

        .field-help-text {
            display: block;
            margin-top: 0.25rem;
            font-size: 0.75rem;
            color: var(--text-secondary);
            font-style: italic;
        }
    </style>