:root {
    --bg: #f4f7fa;
    --panel: #ffffff;
    --ink: #172235;
    --muted: #607086;
    --line: #d9e1eb;
    --brand: #0f7f8f;
    --brand-dark: #123042;
    --soft: #eef8fa;
    --shadow: 0 18px 42px rgba(23, 34, 53, .08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}

.chat-app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
}

.sidebar {
    background: var(--brand-dark);
    color: #fff;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
}

.mark {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    font-weight: 800;
}

.brand h1,
.chat-head h2,
.sidebar h2 {
    margin: 0;
    letter-spacing: 0;
}

.brand p,
.chat-head p,
.sidebar p,
.sidebar small {
    color: #cfe0e7;
    margin: 4px 0 0;
}

.sidebar section {
    display: grid;
    gap: 9px;
}

.sidebar h2 {
    font-size: 14px;
    text-transform: uppercase;
    color: #dcecf1;
}

.sidebar button {
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.07);
    color: #fff;
    border-radius: 9px;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.chat-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-width: 0;
}

.chat-head {
    padding: 18px 24px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.chat-head p {
    color: var(--muted);
}

.chat-head a {
    color: var(--brand);
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
}

.chat-window {
    overflow: auto;
    padding: 26px;
    display: grid;
    align-content: start;
    gap: 18px;
}

.msg {
    display: grid;
    grid-template-columns: 38px minmax(0, 780px);
    gap: 12px;
}

.msg.user {
    grid-template-columns: minmax(0, 780px) 38px;
    justify-content: end;
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.msg.user .avatar {
    grid-column: 2;
    background: #40566b;
}

.bubble {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 15px;
    box-shadow: var(--shadow);
    line-height: 1.55;
}

.msg.user .bubble {
    grid-column: 1;
    grid-row: 1;
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

.bubble h3 {
    margin: 0 0 8px;
    font-size: 17px;
}

.bubble p {
    margin: 8px 0;
}

.bubble ul {
    margin: 8px 0;
    padding-left: 20px;
}

.bubble .next {
    margin-top: 12px;
    padding: 10px;
    border-radius: 9px;
    background: var(--soft);
    color: #0a5965;
}

.followups {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.followups button {
    border: 1px solid #bcd2db;
    background: #fff;
    color: #0c6370;
    border-radius: 999px;
    padding: 7px 10px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.typing .bubble {
    color: var(--muted);
}

.typing-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted);
    animation: pulse .9s infinite ease-in-out;
}

.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes pulse {
    0%, 100% { opacity: .35; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-2px); }
}

.composer {
    padding: 18px 24px;
    background: var(--panel);
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.composer input {
    border: 1px solid #c7d1dc;
    border-radius: 12px;
    padding: 13px 14px;
    font: inherit;
}

.composer button {
    border: 0;
    border-radius: 12px;
    padding: 0 18px;
    background: var(--brand);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

@media (max-width: 860px) {
    .chat-app { grid-template-columns: 1fr; }
    .sidebar { min-height: auto; }
    .chat-head { align-items: flex-start; flex-direction: column; }
    .chat-window { padding: 16px; }
    .msg,
    .msg.user { grid-template-columns: 32px minmax(0, 1fr); }
    .msg.user { grid-template-columns: minmax(0, 1fr) 32px; }
    .avatar { width: 32px; height: 32px; font-size: 12px; }
}