/* AvigonMedia Branding — Override Chainlit HSL Theme Variables */

:root {
    /* Override Chainlit's HSL color system */
    --background: 222 47% 11% !important;        /* Slate 900 — dark navy */
    --foreground: 210 40% 96% !important;         /* Light text */
    --card: 217 33% 17% !important;               /* Slate 800 — card bg */
    --card-foreground: 210 40% 96% !important;
    --popover: 217 33% 17% !important;
    --popover-foreground: 210 40% 96% !important;
    --primary: 239 84% 67% !important;            /* Indigo 500 — AvigonMedia */
    --primary-foreground: 0 0% 100% !important;
    --secondary: 217 33% 17% !important;
    --secondary-foreground: 210 40% 96% !important;
    --muted: 217 33% 17% !important;
    --muted-foreground: 215 20% 65% !important;
    --accent: 160 84% 39% !important;             /* Emerald — success/accent */
    --accent-foreground: 0 0% 100% !important;
    --destructive: 0 84% 60% !important;
    --destructive-foreground: 0 0% 100% !important;
    --border: 215 25% 27% !important;             /* Slate 700 border */
    --input: 215 25% 27% !important;
    --ring: 239 84% 67% !important;               /* Indigo ring */

    /* Sidebar */
    --sidebar-background: 222 47% 8% !important;
    --sidebar-foreground: 210 40% 96% !important;
    --sidebar-primary: 239 84% 67% !important;
    --sidebar-primary-foreground: 0 0% 100% !important;
    --sidebar-accent: 217 33% 17% !important;
    --sidebar-accent-foreground: 210 40% 96% !important;
    --sidebar-border: 215 25% 20% !important;

    /* Custom AvigonMedia vars for additional styling */
    --avigon-indigo: #6366F1;
    --avigon-indigo-dark: #4338CA;
    --avigon-emerald: #10B981;
    --avigon-navy: #0F172A;
}

/* ─── Global ─── */

body {
    background: hsl(222, 47%, 11%) !important;
}

/* ─── Action buttons (account list, quick actions) ─── */

button {
    transition: all 0.15s ease !important;
}

/* Style the account selection and quick action buttons specifically */
.ai-message button,
.message-content button {
    background: hsl(239, 84%, 67%) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    margin: 3px !important;
}

.ai-message button:hover,
.message-content button:hover {
    background: hsl(239, 84%, 74%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35) !important;
}

/* ─── Messages ─── */

.ai-message {
    border-radius: 12px !important;
}

.message-content {
    font-size: 14px !important;
    line-height: 1.75 !important;
}

/* ─── Tables (audit reports) ─── */

table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 16px 0 !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

table th {
    background: hsl(239, 84%, 30%) !important;
    color: white !important;
    padding: 10px 12px !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

table td {
    padding: 8px 12px !important;
    border-bottom: 1px solid hsl(215, 25%, 27%) !important;
}

table tr:hover td {
    background: hsl(217, 33%, 22%) !important;
}

/* ─── Headings in messages ─── */

.message-content h1 {
    color: hsl(239, 84%, 74%) !important;
    font-size: 22px !important;
    margin-top: 8px !important;
    margin-bottom: 16px !important;
    font-weight: 700 !important;
}

.message-content h2 {
    color: hsl(239, 84%, 74%) !important;
    font-size: 17px !important;
    margin-top: 24px !important;
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
    border-bottom: 2px solid hsl(239, 84%, 30%) !important;
    font-weight: 600 !important;
}

.message-content h3 {
    font-size: 15px !important;
    margin-top: 16px !important;
    font-weight: 600 !important;
}

/* ─── Bold text — make key numbers stand out ─── */

.message-content strong {
    color: hsl(160, 84%, 50%) !important;
    font-weight: 700 !important;
}

/* ─── Code blocks ─── */

.message-content pre {
    background: hsl(222, 47%, 8%) !important;
    border: 1px solid hsl(215, 25%, 27%) !important;
    border-radius: 8px !important;
    padding: 12px !important;
}

.message-content code:not(pre code) {
    background: hsl(217, 33%, 22%) !important;
    color: hsl(239, 84%, 80%) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
}

/* ─── Lists ─── */

.message-content ul,
.message-content ol {
    padding-left: 20px !important;
}

.message-content li {
    margin-bottom: 4px !important;
    line-height: 1.7 !important;
}

/* ─── Scrollbar ─── */

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: hsl(222, 47%, 11%);
}

::-webkit-scrollbar-thumb {
    background: hsl(215, 25%, 35%);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(215, 25%, 45%);
}

/* ─── Input area ─── */

textarea {
    font-size: 14px !important;
}

/* ─── Login page ─── */

/* Make login area more branded */
input[type="text"],
input[type="password"] {
    border-radius: 8px !important;
}

input[type="text"]:focus,
input[type="password"]:focus {
    border-color: hsl(239, 84%, 67%) !important;
    box-shadow: 0 0 0 2px hsla(239, 84%, 67%, 0.2) !important;
}