:root {
    /* Primary brand palette */
    --color-accent: #126ed2;               /* matches primary */
    --color-accent-half: #126ed280;        /* 50% alpha */
    --color-accent-light: #126ed21a;       /* 10% alpha */
    --color-primary: #126ed2;              /* base brand colour */
    --color-primary-lighter: #4d92dd;      /* mix with white for softer buttons */
    --color-primary-darker: #0f5cb4;       /* darker hover state */
    --color-primary-half: #126ed280;       /* 50% alpha */
    --color-primary-light: #126ed21a;      /* 10% alpha */
    --color-primary-ultralight: #126ed210; /* 5% alpha */


    /* UI neutrals & utility */
    --color-selection: #bee2fa80;           /* 50% alpha */
    --color-placeholder: #9aa3ab;           /* matches feedback muted grey */
    --color-border: #dddddd;

    /* Text / link colours */
    --color-link: #126ed2;
    --color-link-hover: #126ed2;
    --color-header-link: #00000040;         /* 25% alpha */
    --color-header-link-hover: #000000cc;   /* 80% alpha */
    --color-footer-text: #00000040;         /* 25% alpha */

    /* Chat bubbles */
    --color-user-bubble-bg: #126ed21a;      /* 10% alpha */
    --color-bot-bubble-bg: transparent;

    /* Sources */
    --color-source-shadow: #126ed233;       /* 20% alpha */
    --color-source-btn-hover: #e2e6ea;
    --source-card-vpad: 28px;               /* vertical padding for source cards */

    /* States */
    --color-error: #dc3545;
}
/* ===================================================================
   MARK: GENERAL
   =================================================================== */
html,
body {
    height: 100vh;
    overflow: hidden;
}

::selection {
    background: var(--color-selection) !important;
}

::-moz-selection {
    background: var(--color-selection) !important;
}

a {
    color: var(--color-link);
}

a:hover,
a:active,
a.active,
a:focus {
    color: var(--color-link-hover);
}

.text-primary {
    color: var(--color-primary) !important;
}

/* Ensure lists match paragraph spacing across public pages */
ul {
    margin-bottom: 1rem !important; /* align with default <p> bottom margin */
}

/* ===================================================================
   MARK: CHAT
   =================================================================== */
.spinner-grow {
    color: var(--color-accent);
}

.slowness-disclaimer {
    color: var(--color-accent);
    font-size: .8rem;
}

.chat-frame {
    border-radius: 16px;
    box-shadow: inset 1px 1px 16px #0000000d;
    /* 5% alpha */
}

/* ===================================================================
   MARK: INPUT
   =================================================================== */
.multiline-input {
    min-height: 2em;
    max-height: 12em;
    line-height: 1.2em;
    resize: none;
    overflow-y: auto;
}

.no-border {
    border: none !important;
}

.no-outline {
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-placeholder);
    font-weight: 500;
}

input {
    caret-color: var(--color-accent);
    caret-shape: block;
}

.btn-teal {
    background-color: var(--color-primary);
    color: #ffffff;
}

.btn-teal:hover {
    background-color: var(--color-primary-darker);
    color: #ffffff;
}

.btn-teal:active,
.btn-teal.active,
.btn-teal:focus {
    background-color: var(--color-primary-darker) !important;
    color: #ffffff !important;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled {
    background-color: var(--color-primary-half);
    color: #ffffff;
}

.btn-outline-teal {
    border-color: var(--color-primary);
    background-color: transparent;
    color: var(--color-primary);
}

.btn-outline-teal:hover {
    background-color: var(--color-primary-darker);
    color: #ffffff;
    border-color: var(--color-primary-darker);
}

.btn-outline-teal:active,
.btn-outline-teal.active,
.btn-outline-teal:focus {
    background-color: var(--color-primary-darker) !important;
    color: #ffffff !important;
    border-color: var(--color-primary-darker) !important;
}

.btn-outline-teal.disabled,
.btn-outline-teal:disabled,
fieldset:disabled .btn-outline-teal {
    background-color: transparent;
    color: var(--color-primary-half);
    border-color: var(--color-primary-half);
}

/* ===================================================================
   MARK: MESSAGES
   =================================================================== */
.user-message .content,
.bot-response .content {
    padding: 10px;
    border-radius: 10px;
    flex-grow: 1;
}

.user-message .content {
    background-color: var(--color-user-bubble-bg);
    text-align: right;
    margin-left: 48px !important;
}

.user-message {
    color: var(--color-primary) !important;
}

.bot-response .content {
    background-color: var(--color-bot-bubble-bg);
    text-align: left;
    margin-right: 24px;
}

.message-datails {
    font-size: .75rem;
}

/* ===================================================================
   MARK: HEADER
   =================================================================== */
.svg-header {
    height: 42px;
    width: auto;
}

.header a {
    color: var(--color-header-link);
    font-size: .65rem;
    text-decoration: none;
    font-weight: 500;
}

a.fade-effect {
    transition: color .3s;
}

a.fade-effect:hover {
    color: var(--color-header-link-hover);
}

/* ===================================================================
   MARK: FOOTER
   =================================================================== */
.footer,
.footer a {
    color: var(--color-footer-text);
    font-size: .65rem;
    text-decoration: none;
}

.svg-footer {
    height: 16px;
    width: auto;
    opacity: .25;
}

img.fade-effect {
    transition: opacity .3s;
}

img.fade-effect:hover {
    opacity: .8;
}

/* ===================================================================
   MARK: SOURCES
   =================================================================== */
#sources-container {
    overflow-y: auto;
    padding: 16px;
    -ms-overflow-style: none;
    /* IE/Edge */
    scrollbar-width: none;
    /* Firefox */
}

#sources-container::-webkit-scrollbar {
    display: none;
}

.source-card {
    min-width: 160px;
    max-width: 100%;
    min-height: 140px;
    flex: 0 0 auto;
    transition: transform .25s, box-shadow .25s ease;
    border-radius: 8px;
    margin-top: 0 !important;
    margin-bottom: 16 !important;
}

.source-card:hover {
    box-shadow: inset 0px 0px 8px var(--color-source-shadow);
}

.source-card:hover .btn {
    background-color: var(--color-primary);
    color: white;
}

/* Increase vertical padding inside source cards for better readability */
.source-card .card-body {
    padding-top: var(--source-card-vpad);
    padding-bottom: var(--source-card-vpad);
}

/* ===================================================================
   MARK: CHAT CONTAINER / BUBBLES LAYOUT
   =================================================================== */
#chat-container {
    overflow-y: auto;
    border: 1px solid var(--color-border);
    padding: 16px;
    border-radius: 5px;
}

/* Sidebar collapse behavior */
#sidebar-col {
    transition: width .2s ease;
}
#sidebar-col.collapsed {
    width: 56px !important;
    flex: 0 0 56px !important; /* ensure it stays on the same row */
}
#sidebar-col.collapsed .sidebar-content { display: none !important; }
#sidebar-col.collapsed .tab-header { flex-direction: column; align-items: center; }
#sidebar-col.collapsed .tab-header > .d-flex {
    flex-direction: column !important;
    align-items: center !important;
}
#sidebar-col.collapsed #sidebar-toggle { display: none; }

.message {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.error-message .content {
    color: var(--color-error);
    font-size: .8rem !important;
}

.message img.avatar {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    margin: 0 5px;
}

.user-message {
    flex-direction: row-reverse;
}

.bot-response {
    flex-direction: row;
}

#chat-form {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

#chat-form input[type="text"] {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    margin-right: 10px;
}

/* Summary content should be left aligned and match sources padding */
#summary-container {
    text-align: left;
    padding: 16px; /* match #sources-container */
}

.chat-icon {
    position: absolute;
    top: 8px;
    right: 8px;
}

#feedback-container {
    display: flex;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .3s ease, transform .3s ease;
}

#feedback-container.visible {
    opacity: 1;
    transform: translateY(0);
}


/*  ===================================================================
    MARK: GENERAL PURPOSE CLASSES
    =================================================================== */

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Placeholder for empty tabs */
.tab-empty-placeholder {
    color: #6c757d; /* light grey */
    font-size: .875rem; /* match .small */
    display: block; /* top-left placement */
    text-align: left;
}

/* ===================================================================
   MARK: ICON BUTTONS (attach + tabs)
   =================================================================== */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    min-width: 34px;
    min-height: 34px;
    border-radius: 8px;
    border: 1px solid transparent;
    background-color: transparent;
    color: #6c757d; /* neutral gray for icons */
    cursor: pointer;
    vertical-align: middle; /* align consistently within text flows */
}

.icon-btn:hover {
    background-color: var(--color-primary-ultralight);
    color: var(--color-primary);
}

.icon-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

.icon-btn.active {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-half);
    color: var(--color-primary);
}

/* Text label variant for locale switch etc. */
.icon-btn--text {
    padding: 6px 10px;          /* horizontal padding for text */
    min-width: auto;            /* don't force square width */
    min-height: 34px;           /* baseline with icon buttons */
    height: 34px;               /* exact match to icon-btn height */
    line-height: 1.1;
    font-size: 0.9rem;
}

/* Flag variant (mobile language switch): larger glyph without changing button size */
.icon-btn--flag {
    padding: 0;                 /* keep the outer box exactly 34x34 */
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
}
.icon-btn--flag .flag-emoji {
    font-size: 24px;            /* larger flag inside */
    line-height: 1;             /* keep vertical centering tidy */
    display: inline-block;
}

/* Normalize native button appearance if any element uses <button class="icon-btn"> */
button.icon-btn {
    -webkit-appearance: none;
    appearance: none;
}

/* Mobile tweaks: ensure flag is comfortably large on small screens */
@media (max-width: 575.98px) {
    .icon-btn--flag .flag-emoji { font-size: 24px; }
}

/* Feather icons inside */
.icon-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

/* MDI icons inside */
.icon-btn i.mdi {
    font-size: 20px;
    line-height: 1;
}

/* Muted variant: lighter neutral for subtle actions (e.g., feedback thumbs) */
.icon-btn--muted {
    color: #9aa3ab; /* lighter gray than .icon-btn default */
}

.icon-btn--muted:hover {
    background-color: var(--color-primary-ultralight);
    color: #6c757d;
}

.icon-btn--muted.active {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-half);
    color: var(--color-primary);
}

#thumb-up-btn:hover,
#thumb-up-btn:focus,
#thumb-down-btn:hover,
#thumb-down-btn:focus {
    color: var(--color-primary);
}

.feedback-question {
    color: #9aa3ab;
}

/* Opt-in variant: reveal text on hover/focus with width animation */
.icon-btn--hoverlabel {
    overflow: hidden; /* hide inline label when collapsed */
}
.icon-btn--hoverlabel { gap: 0; }
.icon-btn--hoverlabel .icon-btn__text {
    max-width: 0;            /* collapsed */
    opacity: 0;              /* hidden */
    white-space: nowrap;     /* keep on one line */
    overflow: hidden;        /* no residual width */
    display: inline-block;   /* allow max-width to take effect */
    transition: max-width .45s ease, opacity .45s ease, padding-left .45s ease; /* animate spacing too */
    will-change: max-width, opacity, padding-left;
    font-size: .85rem;
    padding-left: 0;         /* no spacing when hidden to keep square */
}
.icon-btn--hoverlabel:hover .icon-btn__text {
    max-width: 160px;        /* expand smoothly; container width animates with it */
    opacity: 1;
    padding-left: 6px;       /* add spacing only when visible */
}

/* Desktop only: hide hover labels entirely on small screens */
@media (max-width: 575.98px) {
    .icon-btn--hoverlabel .icon-btn__text { display: none !important; }
}

/* Do not show labels when sidebar is collapsed */
#sidebar-col.collapsed .icon-btn--hoverlabel .icon-btn__text { display: none !important; }
/* Suppress labels right after expanding to avoid sticky hover */
#sidebar-col.suppress-hover .icon-btn--hoverlabel .icon-btn__text {
    max-width: 0 !important;
    opacity: 0 !important;
}

/* Thread drawer toggle (desktop only): animate button max-width inside a fixed wrapper */
#threads-float #threads-toggle.icon-btn--hoverlabel {
    overflow: hidden;                 /* clip label when collapsed */
    max-width: 40px;                  /* collapsed size */
    transition: max-width .45s ease;  /* expand background smoothly */
    justify-content: flex-start;      /* keep icon left */
}
#threads-float #threads-toggle.icon-btn--hoverlabel:hover {
    max-width: 132px;                 /* compact expanded size */
}
@media (max-width: 575.98px) {
    #threads-float { display: none !important; }
}
/* Drawer toggle label: match global hoverlabel behavior so icon stays visible */
#threads-float #threads-toggle.icon-btn--hoverlabel .icon-btn__text {
    max-width: 0;                     /* collapsed with no layout impact */
    opacity: 0;
    padding-left: 0;                  /* no spacing when hidden */
    overflow: hidden;
    display: inline-block;
    transition: max-width .45s ease, opacity .45s ease, padding-left .45s ease !important;
}
#threads-float #threads-toggle.icon-btn--hoverlabel:hover .icon-btn__text {
    max-width: 96px;                  /* sized for compact 132px button */
    opacity: 1;
    padding-left: 6px;                /* add spacing only when visible */
}