/*
 * Olisend agent dashboard.
 *
 * Metronic 8.3.3 does the work: its bundle is loaded before this file and
 * supplies the shell, the buttons, the cards, the forms and the badges. What
 * is left here is the face, and the one screen Metronic has no component for
 * — the three-column inbox and the conversation itself.
 *
 * Everything below is written against Metronic's own custom properties
 * (--bs-*), so changing its theme changes this too.
 */

/* ------------------------------------------------------------------ fonts */

/*
 * Served from /fonts, the same copy the public site and the widget use.
 * Metronic ships with Inter; this replaces it everywhere by overriding the
 * two variables Bootstrap resolves the body face from.
 */

@font-face {
    font-family: 'Geologica';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/geologica-greek.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Geologica';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/geologica-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                   U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Geologica';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/geologica-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-font-sans-serif: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                          'Helvetica Neue', Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}

body, .fw-normal, .fw-semibold, .fw-bold, .fw-bolder {
    font-family: var(--bs-font-sans-serif);
}

/* ----------------------------------------------------------------- inbox */

/*
 * Three columns inside Metronic's content area: the queue, the conversation
 * and who you are talking to. Metronic has cards and tables, but nothing
 * shaped like a mail client, so this is ours.
 */

.inbox {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr) 300px;
    gap: 0;
    height: 100%;
    min-height: 0;
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-card-border-radius);
    overflow: hidden;
}

.inbox-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.inbox-column + .inbox-column { border-left: 1px solid var(--bs-border-color); }

.inbox-head { padding: 1rem; border-bottom: 1px solid var(--bs-border-color); }

.inbox-scroll { flex: 1; min-height: 0; overflow-y: auto; }

.conversation-row {
    display: block;
    width: 100%;
    text-align: start;
    padding: 0.85rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--bs-gray-200);
    border-left: 3px solid transparent;
    background: transparent;
    color: inherit;
}

.conversation-row:hover { background: var(--bs-gray-100); }

.conversation-row.is-selected {
    background: var(--bs-primary-light);
    border-left-color: var(--bs-primary);
}

/* ------------------------------------------------------------- the thread */

.thread-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem;
    background: var(--bs-gray-100);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* A run of messages from one sender: named once, timed once. */

.turn { display: flex; flex-direction: column; max-width: 100%; }
.turn.customer { align-items: flex-start; }
.turn.agent, .turn.ai { align-items: flex-end; }

.turn-head { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.25rem; }

.bubble {
    max-width: 68%;
    padding: 0.6rem 0.85rem;
    border-radius: var(--bs-border-radius-lg);
    font-size: 0.95rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.bubble + .bubble { margin-top: 0.2rem; }

.turn.customer .bubble {
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
}

.turn.customer .bubble:last-of-type { border-top-left-radius: 0.25rem; }

/* Mine is filled; a colleague's is not, so a thread can be read back and
   attributed at a glance. */
.turn.agent .bubble {
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
}

.turn.agent.is-mine .bubble {
    background: var(--bs-primary);
    border-color: transparent;
    color: var(--bs-primary-inverse);
}

/* An automatic reply never wears a person's face. */
.turn.ai .bubble {
    background: var(--bs-info-light);
    border: 1px solid var(--bs-info);
}

.turn.agent .bubble:last-of-type,
.turn.ai .bubble:last-of-type { border-top-right-radius: 0.25rem; }

/* The time sits under the bubble, not inside it: white at opacity .6 on a
   filled bubble was about 2.3:1. */
.turn-meta { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.25rem; }

.day-line { align-self: center; }

.system-line {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 90%;
    text-align: center;
}

.system-line::before, .system-line::after {
    content: '';
    flex: 0 0 2rem;
    height: 1px;
    background: var(--bs-border-color);
}

.typing {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
}

.typing .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bs-gray-500);
    animation: olisend-blink 1.3s infinite ease-in-out;
}

.typing .dot:nth-child(2) { animation-delay: 0.18s; }
.typing .dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes olisend-blink { 0%, 60%, 100% { opacity: 0.28; } 30% { opacity: 1; } }

.composer-box { padding: 0.75rem 1rem; border-top: 1px solid var(--bs-border-color); }

/* ============================================================ Olisend theme */

/*
 * Metronic supplies the components; this supplies the face. The tokens below
 * are the same ones the landing page and the widget use, so the three
 * surfaces read as one product rather than three.
 */

:root,
[data-bs-theme="light"] {
    --olisend-blue: #176cf2;
    --olisend-blue-deep: #1259cc;
    --olisend-blue-light: #10a8ff;
    --olisend-purple: #6535e8;
    --olisend-violet-deep: #4a3aa8;

    --olisend-ink: #10131c;
    --olisend-ink-2: #3e4759;
    --olisend-ink-3: #59627a;
    --olisend-ink-4: #8a93a6;

    --olisend-line: #dfe3ed;
    --olisend-line-soft: #eceff6;
    --olisend-paper: #f4f5f9;
    --olisend-tint-blue: #eaf1fe;
    --olisend-tint-violet: #efeafd;

    --olisend-night: #0f1320;
    --olisend-night-2: #151a2c;
    --olisend-night-line: #262c43;

    --olisend-gradient: linear-gradient(120deg, var(--olisend-blue-light), var(--olisend-blue) 45%, var(--olisend-purple));
    --olisend-gradient-safe: linear-gradient(120deg, var(--olisend-blue), #5a2ee0);
    --olisend-ring: rgba(23, 108, 242, 0.18);

    /* Bootstrap, rebuilt around the brand. */
    --bs-primary: #176cf2;
    --bs-primary-rgb: 23, 108, 242;
    --bs-primary-active: #1259cc;
    --bs-primary-light: #eaf1fe;
    --bs-primary-inverse: #ffffff;
    --bs-primary-clarity: rgba(23, 108, 242, 0.2);
    --bs-primary-text-emphasis: #1259cc;
    --bs-primary-bg-subtle: #eaf1fe;
    --bs-primary-border-subtle: #bcd3fb;

    /* Violet is the AI's colour, here and in the widget. */
    --bs-info: #6535e8;
    --bs-info-rgb: 101, 53, 232;
    --bs-info-active: #5227c9;
    --bs-info-light: #efeafd;
    --bs-info-inverse: #ffffff;
    --bs-info-clarity: rgba(101, 53, 232, 0.2);
    --bs-info-text-emphasis: #5227c9;
    --bs-info-bg-subtle: #efeafd;
    --bs-info-border-subtle: #cdbdf7;

    --bs-body-color: var(--olisend-ink);
    --bs-border-color: var(--olisend-line);
    --bs-card-border-color: var(--olisend-line);
    --bs-border-radius: 10px;
    --bs-border-radius-lg: 12px;
    --bs-border-radius-xl: 16px;
}

body { background: var(--olisend-paper); }

h1, h2, h3, h4 { letter-spacing: -0.02em; }

/* A primary button walks the same gradient the landing page's does, started
   where white text is legible. */
.btn-primary {
    background-image: var(--olisend-gradient-safe);
    border-color: transparent;
}
.btn-primary:hover,
.btn-primary:focus { filter: brightness(1.07); }
.btn-check:active + .btn-primary,
.btn-primary:active { filter: brightness(0.96); }

.btn-light-primary { background: var(--olisend-tint-blue); color: var(--olisend-blue-deep); }
.btn-light-primary:hover { background: #dbe8fd; color: var(--olisend-blue-deep); }

/* ------------------------------------------------------------------ forms */

/*
 * Metronic's solid inputs sit on a grey fill with no border, which on a
 * white card is close to invisible. Here every field is a white box with a
 * visible edge, and focus is the brand ring.
 */
.form-control,
.form-control-solid,
.form-select,
.form-check-input {
    background-color: #fff;
    border: 1px solid var(--olisend-line);
    color: var(--olisend-ink);
}

.form-control:focus,
.form-control-solid:focus,
.form-select:focus {
    background-color: #fff;
    border-color: var(--olisend-blue);
    box-shadow: 0 0 0 3px var(--olisend-ring);
    color: var(--olisend-ink);
}

.form-control::placeholder,
.form-control-solid::placeholder { color: var(--olisend-ink-4); opacity: 1; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background: var(--olisend-paper); }
.form-label { font-weight: 600; color: var(--olisend-ink-2); }

/* ----------------------------------------------------------- user menu */

.user-menu { position: relative; }

.user-menu-toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem 0.6rem 0.25rem 0.25rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--olisend-ink);
}

.user-menu-toggle:hover { background: var(--olisend-paper); border-color: var(--olisend-line); }

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--olisend-gradient-safe);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.user-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 250px;
    padding: 0.4rem;
    background: #fff;
    border: 1px solid var(--olisend-line);
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(16, 19, 28, 0.18);
    z-index: 60;
}

.user-menu-head { padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--olisend-line-soft); margin-bottom: 0.35rem; }
.user-menu-head .name { font-weight: 700; font-size: 0.85rem; }
.user-menu-head .email { font-size: 0.75rem; color: var(--olisend-ink-3); word-break: break-all; }

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--olisend-ink);
    font-size: 0.85rem;
    font-weight: 550;
    text-align: start;
}

.user-menu-item:hover { background: var(--olisend-tint-blue); color: var(--olisend-blue-deep); }
.user-menu-item.danger { color: #a3322b; }
.user-menu-item.danger:hover { background: #fdecec; color: #a3322b; }

.user-menu-divider { height: 1px; margin: 0.35rem 0.5rem; background: var(--olisend-line-soft); }

/* -------------------------------------------------------------- overview */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.stat-card {
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--olisend-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 19, 28, 0.04);
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 0.85rem;
}

.stat-icon.blue { background: var(--olisend-tint-blue); color: var(--olisend-blue-deep); }
.stat-icon.amber { background: #fdf0e6; color: #8a4a12; }
.stat-icon.grey { background: #eef0f6; color: var(--olisend-ink-3); }
.stat-icon.violet { background: var(--olisend-tint-violet); color: var(--olisend-violet-deep); }

.stat-value { font-size: 1.7rem; font-weight: 760; letter-spacing: -0.03em; line-height: 1; color: var(--olisend-ink); }
.stat-label { font-size: 0.8rem; color: var(--olisend-ink-3); margin-top: 0.35rem; }

/* --------------------------------------------------------- overview page */

.overview { flex: 1; min-height: 0; background: transparent; }

/* A grouped bar chart, drawn with elements rather than a charting library. */
.chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 190px;
    padding-top: 0.5rem;
}

.chart-day { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.chart-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.chart-bar { display: block; width: 42%; max-width: 14px; min-height: 2px; border-radius: 4px 4px 0 0; }
.chart-bar.started { background: var(--olisend-gradient-safe); }
.chart-bar.closed { background: #cdd6e8; }
.chart-label { height: 14px; font-size: 0.62rem; color: var(--olisend-ink-4); }

.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; }
.legend-dot.started { background: var(--olisend-gradient-safe); }
.legend-dot.closed { background: #cdd6e8; }

.meter { height: 8px; border-radius: 999px; background: #eef0f6; overflow: hidden; }
.meter-fill { display: block; height: 100%; border-radius: 999px; background: var(--olisend-gradient-safe); }
.meter-fill.violet { background: var(--olisend-gradient); }
.meter-fill.amber { background: linear-gradient(120deg, #f5a524, #f97316); }

.recent-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    width: 100%;
    padding: 0.65rem 0.5rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    text-align: start;
    color: inherit;
}

.recent-row:hover { background: var(--olisend-paper); }
.recent-row .row-avatar { grid-row: auto; }
.recent-row .row-main { display: block; min-width: 0; }

/* -------------------------------------------------------- widget preview */

.widget-swatch {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(16, 19, 28, 0.08);
}

/* The save row stays in view while the settings form scrolls: a change made
   at the top of a long form should not mean hunting for the button. */
.widget-save-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    background: #fff;
    border-top: 1px solid var(--olisend-line);
}

.widget-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: #eceff6;
    overflow-x: auto;
}

.widget-tab {
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--olisend-ink-3);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.widget-tab:hover { color: var(--olisend-ink); }
.widget-tab.is-on { background: #fff; color: var(--olisend-ink); box-shadow: 0 1px 3px rgba(16, 19, 28, 0.12); }

.widget-preview {
    --wp-primary: #176cf2;
    --wp-secondary: #6535e8;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    min-height: 430px;
    padding: 20px;
    border: 1px solid var(--olisend-line);
    border-radius: 16px;
    background:
        radial-gradient(120% 120% at 100% 0%, #eef3ff 0%, #f4f5f9 55%, #eef0f6 100%);
}

.widget-preview[data-position="bottom-left"] { align-items: flex-start; }

.wp-panel {
    width: 100%;
    max-width: 320px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(16, 19, 28, 0.16);
}

.wp-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--wp-primary); color: #fff; }

.wp-avatar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.24);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.wp-identity { flex: 1; min-width: 0; }
.wp-name { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-status { font-size: 11.5px; opacity: 0.85; }
.wp-close { font-size: 20px; line-height: 1; opacity: 0.8; }

.wp-body { min-height: 130px; padding: 14px; background: #f7f8fc; display: flex; }

.wp-bubble {
    align-self: flex-start;
    max-width: 85%;
    padding: 9px 12px;
    border: 1px solid #e4e7f0;
    border-radius: 12px 12px 12px 3px;
    background: #fff;
    color: #14171c;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.wp-composer { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid #eceef2; }
.wp-placeholder { flex: 1; font-size: 12.5px; color: #8a93a6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wp-send {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--wp-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.wp-brand { padding: 6px; border-top: 1px solid #eceef2; text-align: center; font-size: 10.5px; color: #8a93a6; }

.wp-launcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 16px;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--wp-primary), var(--wp-secondary));
    color: #fff;
    font-size: 14px;
    font-weight: 650;
    box-shadow: 0 10px 24px rgba(16, 19, 28, 0.2);
}

.wp-launcher-icon { font-size: 15px; }

/* ------------------------------------------------------------------ shell */

#kt_app_sidebar,
.app-sidebar {
    background: var(--olisend-night);
    border-right: 1px solid var(--olisend-night-line);
}

.app-sidebar-logo { height: 70px; }

/* The search trigger at the top of the rail, in the rail's own colours. */
.sidebar-search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    height: 38px;
    padding: 0 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #aab3c8;
    font-size: 0.85rem;
    font-weight: 550;
}

.sidebar-search:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.sidebar-search kbd { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.14); color: #c9d3ea; }

/* The attention panel in the rail's footer. */
.attention {
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--olisend-night-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.attention-head { margin-bottom: 0.35rem; }

.usage-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7b869f;
}

.attention-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.4rem 0.45rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #c9d3ea;
    font-size: 0.8rem;
    font-weight: 550;
    text-align: start;
}

.attention-row:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.attention-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.attention-dot.amber { background: #f5a524; }
.attention-dot.violet { background: #9b7bff; }
.attention-dot.blue { background: #4f93ff; }

.attention-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.attention-count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #9aa4bd;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.attention-count.is-live { background: rgba(23, 108, 242, 0.35); color: #fff; }

.app-sidebar .menu-heading { color: #6d7893 !important; letter-spacing: 0.14em; }

.app-sidebar .menu-link {
    border-radius: 10px;
    color: #aab3c8;
    transition: background 120ms ease, color 120ms ease;
}

.app-sidebar .menu-link .menu-icon i { color: #7b869f; }
.app-sidebar .menu-link:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.app-sidebar .menu-link:hover .menu-icon i { color: #c9d3ea; }

.app-sidebar .menu-link.active {
    background: linear-gradient(90deg, rgba(23, 108, 242, 0.24), rgba(101, 53, 232, 0.14));
    color: #fff;
}

.app-sidebar .menu-link.active .menu-icon i { color: #8fb6ff; }

.app-sidebar-footer .btn-light { background: rgba(255, 255, 255, 0.06); color: #c9d3ea; border: 0; }
.app-sidebar-footer .btn-light:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

#kt_app_header { border-bottom: 1px solid transparent; }
body[data-kt-app-header-minimize="on"] #kt_app_header {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom-color: var(--olisend-line);
}

.app-content { padding-top: 0.5rem; }

/* ------------------------------------------------------------------ cards */

.card {
    border: 1px solid var(--olisend-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 19, 28, 0.04);
}

.section-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--olisend-ink-3);
}

/* ------------------------------------------------------------------ inbox */

/*
 * The inbox is a fixed-height app: the thread scrolls inside its own column,
 * so the composer is always on screen. Metronic's flex-column-fluid does not
 * shrink (flex-shrink: 0), which otherwise lets the thread grow the whole
 * page and pushes the composer below the fold.
 */
.app-main > .flex-column-fluid { flex: 1 1 auto; min-height: 0; }
.app-content.flex-column-fluid { flex: 1 1 auto; min-height: 0; }
.app-container { min-height: 0; }

.inbox {
    grid-template-columns: 360px minmax(0, 1fr) 320px;
    height: 100%;
    min-height: 0;
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(16, 19, 28, 0.08);
}

.inbox-head {
    padding: 1.1rem 1.1rem 0.9rem;
    background: var(--bs-card-bg);
}

.inbox-column.queue-column { background: #fbfcfe; }
.inbox-column.customer-column { background: #fbfcfe; }

/* The queue's own title row. */
.queue-title { display: flex; align-items: center; gap: 0.6rem; }
.queue-title h1 { letter-spacing: -0.02em; }

.density-toggle {
    margin-left: auto;
    display: inline-flex;
    border: 1px solid var(--olisend-line);
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
}

.density-toggle button {
    width: 30px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--olisend-ink-3);
}

.density-toggle button.is-on { background: var(--olisend-tint-blue); color: var(--olisend-blue-deep); }

/* Segmented filter tabs, quieter than four buttons. */
.segmented {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
    background: #eceff6;
}

.segmented button {
    flex: 1;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--olisend-ink-3);
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.segmented button.is-on {
    background: #fff;
    color: var(--olisend-ink);
    box-shadow: 0 1px 3px rgba(16, 19, 28, 0.12);
}

.segmented .count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--olisend-tint-blue);
    color: var(--olisend-blue-deep);
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.filter-chips { display: flex; gap: 0.4rem; }

.filter-chip {
    height: 28px;
    padding: 0 0.7rem;
    border: 1px solid var(--olisend-line);
    border-radius: 999px;
    background: #fff;
    color: var(--olisend-ink-2);
    font-size: 0.75rem;
    font-weight: 600;
}

.filter-chip.is-on { background: var(--olisend-ink); border-color: var(--olisend-ink); color: #fff; }

/* --------------------------------------------------------------- the queue */

.conversation-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border-left: 3px solid transparent;
}

.conversation-row:hover { background: #f4f7fd; }

.conversation-row.is-selected {
    background: var(--olisend-tint-blue);
    border-left-color: var(--olisend-blue);
}

.row-avatar {
    grid-row: 1 / span 3;
    align-self: start;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--olisend-tint-blue);
    color: var(--olisend-blue-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
}

.conversation-row.is-unread .row-avatar {
    background: var(--olisend-gradient-safe);
    color: #fff;
}

.row-main { min-width: 0; display: block; }

.row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; min-width: 0; }

.row-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--olisend-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conversation-row.is-unread .row-name { font-weight: 750; }

.row-time { flex-shrink: 0; font-size: 0.72rem; color: var(--olisend-ink-4); }
.conversation-row.is-unread .row-time { color: var(--olisend-blue-deep); font-weight: 600; }

.row-preview {
    display: block;
    font-size: 0.8rem;
    color: var(--olisend-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-row.is-unread .row-preview { color: var(--olisend-ink-2); font-weight: 500; }

.row-tags { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; }

.row-tag {
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.row-tag.status-open { background: var(--olisend-tint-blue); color: var(--olisend-blue-deep); }
.row-tag.status-waiting { background: #fdf0e6; color: #8a4a12; }
.row-tag.status-closed { background: #eef0f6; color: var(--olisend-ink-3); }
.row-tag.ai { background: var(--olisend-tint-violet); color: var(--olisend-violet-deep); }
.row-tag.handoff { background: #f7f4fe; color: var(--olisend-violet-deep); }
.row-tag.csat-up { background: #e6f6ec; color: #1f8a4c; }
.row-tag.csat-down { background: #fdecec; color: #a3322b; }

.row-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--olisend-blue);
    flex-shrink: 0;
}

.row-assignee { margin-left: auto; font-size: 0.7rem; color: var(--olisend-ink-4); }

/* Compact density. */
.inbox.is-compact .conversation-row { padding: 0.5rem 0.85rem; grid-template-columns: 32px minmax(0, 1fr); }
.inbox.is-compact .row-avatar { width: 32px; height: 32px; font-size: 0.72rem; }
.inbox.is-compact .row-preview { display: none; }
.inbox.is-compact .row-tags { margin-top: 0.25rem; }
.inbox.is-compact .bubble { padding: 0.5rem 0.7rem; font-size: 0.9rem; }
.inbox.is-compact .thread-scroll { padding: 1rem; gap: 0.5rem; }

/* -------------------------------------------------------------- the thread */

.thread-column { position: relative; }

.thread-scroll { background: #f8f9fc; }

.turn-head { gap: 0.45rem; }

.turn-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--olisend-line);
    color: var(--olisend-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
}

.turn.ai .turn-avatar { background: var(--olisend-tint-violet); border-color: transparent; color: var(--olisend-violet-deep); }

.bubble { box-shadow: 0 1px 1px rgba(16, 19, 28, 0.03); }
.turn.customer .bubble { background: #fff; }
.turn.agent .bubble { background: #fff; }
.turn.agent.is-mine .bubble { background-image: var(--olisend-gradient-safe); }

/* A visitor's verdict on the conversation, see spec section 56. */
.csat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 650;
}

.csat-chip.up { background: #e6f6ec; color: #1f8a4c; }
.csat-chip.down { background: #fdecec; color: #a3322b; }

/* The AI draft, offered to the agent rather than sent, see spec section 42. */
.ai-suggest {
    margin: 0.25rem 0 0.5rem;
    border: 1px dashed #c3b6f2;
    border-radius: 14px;
    background: #f7f4fe;
    padding: 0.85rem 0.95rem;
}

.ai-suggest-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--olisend-violet-deep);
}

.ai-suggest-body {
    margin-top: 0.5rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--olisend-ink);
    white-space: pre-wrap;
}

.ai-suggest-sources {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ai-suggest-source {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #dcd4f7;
    color: var(--olisend-violet-deep);
    font-size: 0.68rem;
    font-weight: 600;
}

.ai-suggest-actions { display: flex; gap: 0.5rem; margin-top: 0.7rem; }

.ai-suggest-skeleton {
    height: 0.8rem;
    border-radius: 6px;
    background: linear-gradient(90deg, #e9e3fb, #f4f1fd, #e9e3fb);
    background-size: 200% 100%;
    animation: olisend-shimmer 1.2s linear infinite;
}

@keyframes olisend-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* Jump back to the newest message after scrolling up. */
.thread-jump {
    position: absolute;
    right: 1.25rem;
    bottom: 6.5rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--olisend-line);
    background: #fff;
    color: var(--olisend-ink-2);
    box-shadow: 0 6px 18px rgba(16, 19, 28, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.thread-jump:hover { color: var(--olisend-blue-deep); border-color: var(--olisend-blue); }

/* ------------------------------------------------------------ the customer */

.customer-column { padding: 1.25rem; }

.customer-card {
    padding: 1rem;
    border: 1px solid var(--olisend-line);
    border-radius: 14px;
    background: #fff;
}

.customer-section + .customer-section { margin-top: 1.25rem; }

.customer-entry + .customer-entry { margin-top: 0.7rem; }

.customer-entry-label {
    font-size: 0.7rem;
    color: var(--olisend-ink-4);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.customer-entry-value { font-size: 0.85rem; color: var(--olisend-ink); word-break: break-word; }

/* ------------------------------------------------------------ command bar */

.cmdk {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(16, 19, 28, 0.42);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}

.cmdk-panel {
    width: min(560px, calc(100vw - 32px));
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 30px 70px rgba(16, 19, 28, 0.32);
    overflow: hidden;
}

.cmdk-input {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--olisend-line);
    padding: 1rem 1.15rem;
    font-size: 1rem;
    outline: none;
}

.cmdk-list { max-height: 50vh; overflow-y: auto; padding: 0.4rem; }

.cmdk-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    text-align: start;
    color: var(--olisend-ink);
}

.cmdk-item:hover,
.cmdk-item.is-active { background: var(--olisend-tint-blue); }

.cmdk-item .cmdk-hint { margin-left: auto; font-size: 0.72rem; color: var(--olisend-ink-4); }
.cmdk-empty { padding: 1.2rem; text-align: center; color: var(--olisend-ink-3); font-size: 0.85rem; }

kbd {
    display: inline-block;
    min-width: 20px;
    padding: 1px 5px;
    border: 1px solid var(--olisend-line);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: #fff;
    color: var(--olisend-ink-3);
    font-family: var(--bs-font-sans-serif);
    font-size: 0.68rem;
    font-weight: 600;
    text-align: center;
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 1199.98px) {
    .inbox { grid-template-columns: 340px minmax(0, 1fr); }

    /*
     * The customer's details become a drawer over the thread rather than
     * disappearing. They used to be display:none with nothing in their
     * place, so an agent on a laptop lost the order number entirely.
     */
    .inbox-column.customer-column {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 320px;
        background: var(--bs-card-bg);
        box-shadow: var(--bs-box-shadow-lg);
        z-index: 5;
        transform: translateX(100%);
        transition: transform 180ms ease;
    }

    .inbox-column.customer-column.is-open { transform: none; }
    .inbox { position: relative; }
}

@media (min-width: 1200px) {
    .customer-toggle { display: none; }
}

@media (max-width: 767.98px) {
    .inbox { grid-template-columns: minmax(0, 1fr); }
    .inbox-column.queue-column { display: none; }
    .inbox.is-queue .inbox-column.queue-column { display: flex; }
    .inbox.is-queue .inbox-column.thread-column { display: none; }

    .thread-jump { bottom: 5.5rem; right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .typing .dot { animation: none; opacity: 0.6; }
    .inbox-column.customer-column { transition: none; }
    .ai-suggest-skeleton { animation: none; }
    .conversation-row, .app-sidebar .menu-link { transition: none; }
}

/*
 * ToastNotification, fitted to this dashboard.
 *
 * The library sizes its text, padding and gaps in rem but its icon in a flat
 * 30px. Metronic sets the root font to 13px, so under this page everything
 * but the icon shrinks by a fifth and the icon comes out oversized against
 * the words beside it. Sizing it in em puts it back in proportion at any
 * root size, rather than pinning a second magic number.
 *
 * The typeface is hard-coded to `sans-serif` in the library, which is the
 * one thing on the page that is not Geologica.
 */
.ts-toast-container .ts-toast {
    font-family: inherit;
}

.ts-toast-container .ts-toast-icon svg {
    width: 1.5em;
    height: 1.5em;
}