:root {
    --ts-bg: #f4f6f9;
    --ts-surface: #ffffff;
    --ts-border: #e2e5ec;
    --ts-text: #1f2430;
    --ts-text-muted: #6b7280;
    --ts-sidebar-bg: #1a2233;
    --ts-sidebar-text: #c9d1e3;
    --ts-sidebar-active: #2a3654;
    --ts-primary: #3b5bfd;
    --ts-bubble-customer: #ffffff;
    --ts-bubble-agent: #3b5bfd;
    --ts-bubble-agent-text: #ffffff;
    --ts-bubble-internal: #fff6d9;
    --ts-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}

[data-theme="dark"] {
    --ts-bg: #10131a;
    --ts-surface: #1a1f2b;
    --ts-border: #2b3342;
    --ts-text: #e7e9ee;
    --ts-text-muted: #9aa2b1;
    --ts-sidebar-bg: #0c0f16;
    --ts-sidebar-text: #b7bfd1;
    --ts-sidebar-active: #232c42;
    --ts-primary: #5b7bff;
    --ts-bubble-customer: #232838;
    --ts-bubble-agent: #3b5bfd;
    --ts-bubble-agent-text: #ffffff;
    --ts-bubble-internal: #3a3320;
    --ts-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

body {
    background-color: var(--ts-bg);
    color: var(--ts-text);
    transition: background-color .15s ease, color .15s ease;
}

.ts-surface {
    background-color: var(--ts-surface);
    border: 1px solid var(--ts-border);
    border-radius: .5rem;
    box-shadow: var(--ts-shadow);
}

.ts-navbar {
    background-color: var(--ts-surface);
    border-bottom: 1px solid var(--ts-border);
}

.ts-sidebar {
    background-color: var(--ts-sidebar-bg);
    min-height: 100vh;
    color: var(--ts-sidebar-text);
}

.ts-sidebar a {
    color: var(--ts-sidebar-text);
    text-decoration: none;
    display: block;
    padding: .6rem 1rem;
    border-radius: .375rem;
    margin: .15rem .5rem;
}

.ts-sidebar a:hover,
.ts-sidebar a.active {
    background-color: var(--ts-sidebar-active);
    color: #fff;
}

.ts-sidebar .ts-brand {
    color: #fff;
    padding: 1rem;
    font-weight: 700;
    font-size: 1.1rem;
}

.ts-stat-card {
    background-color: var(--ts-surface);
    border: 1px solid var(--ts-border);
    border-radius: .6rem;
    padding: 1.1rem 1.25rem;
}

.ts-stat-card .value {
    font-size: 1.75rem;
    font-weight: 700;
}

.ts-stat-card .label {
    color: var(--ts-text-muted);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Chat / conversation UI */
.ts-chat {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
}

.ts-msg {
    max-width: 72%;
    display: flex;
    flex-direction: column;
}

.ts-msg.from-customer {
    align-self: flex-start;
}

.ts-msg.from-agent {
    align-self: flex-end;
}

.ts-msg .bubble {
    padding: .75rem 1rem;
    border-radius: .8rem;
    box-shadow: var(--ts-shadow);
    white-space: pre-wrap;
    word-break: break-word;
}

.ts-msg.from-customer .bubble {
    background-color: var(--ts-bubble-customer);
    border: 1px solid var(--ts-border);
    border-bottom-left-radius: .2rem;
}

.ts-msg.from-agent .bubble {
    background-color: var(--ts-bubble-agent);
    color: var(--ts-bubble-agent-text);
    border-bottom-right-radius: .2rem;
}

.ts-msg.is-internal .bubble {
    background-color: var(--ts-bubble-internal);
    color: var(--ts-text);
    border: 1px dashed #d8b93a;
}

.ts-msg .meta {
    font-size: .74rem;
    color: var(--ts-text-muted);
    margin-top: .25rem;
}

.ts-msg.from-agent .meta {
    text-align: right;
}

.ts-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(0, 0, 0, .05);
    border-radius: .35rem;
    padding: .25rem .5rem;
    font-size: .8rem;
    margin-top: .35rem;
    margin-right: .35rem;
}

.ts-theme-toggle {
    cursor: pointer;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    color: var(--ts-text);
}

.ts-badge-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background-color: #dc3545;
}

.form-control, .form-select {
    background-color: var(--ts-surface);
    color: var(--ts-text);
    border-color: var(--ts-border);
}

.dropdown-menu {
    background-color: var(--ts-surface);
    color: var(--ts-text);
}

.table {
    color: var(--ts-text);
}