:root {
    --navy: #111a2e;
    --navy2: #1b2944;
    --purple: #635bdf;
    --purple2: #8278f5;
    --teal: #0ea875;
    --paper: #f4f6fb;
    --ink: #172033;
    --muted: #778096;
    --line: #e5e9f2;
    --white: #fff;
    --shadow: 0 14px 36px rgba(30, 42, 70, .09);
}

body {
    background: #edf1f7;
    letter-spacing: -.01em;
}

.app {
    grid-template-columns: 82px 360px minmax(0, 1fr);
    background: #edf1f7;
}

.rail {
    background: linear-gradient(180deg, #111a2e 0%, #17233b 100%);
    border-right: 1px solid rgba(255,255,255,.05);
    box-shadow: 8px 0 30px rgba(18,28,48,.10);
    z-index: 2;
}

.rail-brand {
    border: 1px solid rgba(255,255,255,.18);
    background: linear-gradient(145deg, #8d83ff, #5b51d8);
    box-shadow: 0 10px 26px rgba(99,91,223,.35);
}

.rail-link {
    border: 1px solid transparent;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.rail-link:hover {
    transform: translateY(-1px);
}

.rail-link:hover,
.rail-link.active {
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.06);
}

.sidebar {
    border-right: 1px solid #e2e7f0;
    box-shadow: 8px 0 28px rgba(32,45,72,.04);
    z-index: 1;
}

.sidebar > header {
    background: linear-gradient(180deg, #fff, #fbfcff);
}

.sidebar h1 {
    color: #172033;
    font-size: 22px;
    letter-spacing: -.035em;
}

.sidebar header small {
    color: #635bdf;
    letter-spacing: .16em;
}

.sidebar .session-user {
    background: #f7f8fc;
    border: 1px solid #e8eaf3;
    border-radius: 12px;
    padding: 8px;
}

.sidebar .session-user > span {
    background: linear-gradient(145deg, #756bea, #5148c5);
    color: #fff;
    box-shadow: 0 5px 14px rgba(99,91,223,.22);
}

.presence-status {
    width: fit-content;
    padding: 3px 20px 3px 7px;
    border: 1px solid #d8eee5;
    border-radius: 999px;
    background-color: #edf9f5;
    color: #087b59;
}

.logout-button {
    background: #fff;
    box-shadow: 0 2px 7px rgba(25,35,60,.05);
}

.inbox-tabs {
    padding: 12px 16px;
    gap: 6px;
    background: #fff;
}

.inbox-tabs button {
    flex: 1;
    padding: 9px 8px;
    border: 1px solid transparent;
    transition: .18s ease;
}

.inbox-tabs button.active {
    border-color: #ddd9ff;
    background: #f0eeff;
    box-shadow: inset 0 0 0 1px rgba(99,91,223,.02);
}

.search {
    padding: 14px 16px;
    background: #fbfcfe;
}

.search input,
.module-search {
    background: #fff;
    border-color: #e1e6ef;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(35,48,75,.035);
}

.conversation-list {
    padding: 3px 8px 14px;
}

.conversation {
    margin: 3px 0;
    padding: 12px 11px;
    border: 1px solid transparent;
    border-left: 1px solid transparent;
    border-radius: 13px;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.conversation:hover {
    background: #f8f9fd;
    border-color: #eaedf4;
    transform: translateX(2px);
}

.conversation.active {
    background: linear-gradient(100deg, #f0eeff, #f8f7ff);
    border-color: #dedaff;
    box-shadow: 0 5px 16px rgba(99,91,223,.08);
}

.conversation .avatar,
.chat-header .avatar {
    border-radius: 14px;
    background: linear-gradient(145deg, #35435b, #1c293f);
    box-shadow: 0 6px 15px rgba(20,31,52,.16);
}

.chat {
    background:
        radial-gradient(circle at 90% 5%, rgba(99,91,223,.07), transparent 28%),
        linear-gradient(180deg, #f7f8fb, #f2f4f8);
}

.chat-header {
    height: 82px;
    padding: 0 22px;
    border-bottom-color: #e5e9f2;
    box-shadow: 0 4px 18px rgba(24,36,62,.04);
    backdrop-filter: blur(12px);
    z-index: 1;
}

.chat-header > div:nth-of-type(2) strong {
    font-size: 15px;
    color: #172033;
}

.tag,
.assigned-agent,
.sla-status,
.workflow-button,
.bot-toggle,
.more-button {
    border-radius: 999px;
}

.workflow-button,
.bot-toggle,
.more-button {
    min-height: 32px;
    transition: transform .16s ease, box-shadow .16s ease;
}

.workflow-button:hover,
.bot-toggle:hover,
.more-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(25,35,58,.08);
}

.messages {
    padding-top: 32px;
}

.bubble {
    border: 1px solid rgba(224,228,237,.85);
    box-shadow: 0 5px 16px rgba(28,40,65,.055);
}

.bubble.in {
    background: rgba(255,255,255,.98);
}

.bubble.out {
    border-color: #d9d5ff;
    background: linear-gradient(145deg, #eeecff, #e4e0ff);
}

.quick-replies {
    border-top: 1px solid #edf0f5;
    padding-top: 10px;
}

.quick-replies button {
    border-radius: 999px;
    transition: background .16s ease, transform .16s ease;
}

.quick-replies button:hover {
    background: #efedff;
    transform: translateY(-1px);
}

.composer {
    padding-bottom: 18px;
    box-shadow: 0 -8px 24px rgba(32,45,72,.035);
}

.composer textarea {
    min-height: 46px;
    border-radius: 16px;
    background: #fbfcfe;
    box-shadow: inset 0 1px 2px rgba(26,38,62,.025);
}

.composer button {
    border-radius: 14px;
    box-shadow: 0 7px 16px rgba(99,91,223,.22);
}

.composer button.attach {
    box-shadow: none;
}

.module-view {
    background: #f5f7fb;
}

.module-header {
    background: rgba(255,255,255,.88);
    border-bottom: 1px solid #e6eaf2;
    backdrop-filter: blur(12px);
}

.panel,
.metric-grid article,
.kanban-column,
.form-panel {
    border: 1px solid #e5e9f2;
    box-shadow: var(--shadow);
}

.panel,
.metric-grid article,
.form-panel {
    border-radius: 18px;
}

.kanban-column {
    border-radius: 16px;
}

.modal {
    backdrop-filter: blur(5px);
    background: rgba(17,26,46,.55);
}

.modal-card {
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 22px;
    box-shadow: 0 28px 80px rgba(13,22,40,.25);
}

.login {
    background:
        radial-gradient(circle at 18% 20%, rgba(130,120,245,.30), transparent 32%),
        radial-gradient(circle at 85% 85%, rgba(14,168,117,.14), transparent 28%),
        linear-gradient(145deg, #10192c, #1a2945);
}

.login-card {
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 30px 90px rgba(5,12,27,.30);
}

@media (max-width: 1120px) {
    .app {
        grid-template-columns: 72px 330px minmax(0,1fr);
    }

    .chat-header {
        gap: 8px;
        padding: 0 14px;
    }

    .workflow-button,
    .bot-toggle {
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (max-width: 760px) {
    .sidebar > header {
        min-height: 112px;
    }

    .conversation-list {
        padding-left: 7px;
        padding-right: 7px;
    }

    .chat-header {
        border-radius: 0;
    }
}