/* mgorka-support — shared design system. "Clinical calm": a light, trustworthy helpdesk skin.
   Spectral (serif display) + Golos Text (sans body), both with native Cyrillic. CSS-only — the CSP
   forbids inline scripts, so no JS here. Page-load motion degrades under prefers-reduced-motion. */

:root {
    --font-sans: 'Golos Text', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;

    --bg: #eef3f0;
    --surface: #ffffff;
    --surface-2: #f7faf8;
    --ink: #19292a;
    --ink-soft: #3d4f51;
    --muted: #6c7e7e;
    --line: #e2eae6;
    --line-soft: #eef3f0;

    --accent: #0f8a78;
    --accent-strong: #0a6f60;
    --accent-tint: #e6f3ef;
    --accent-ring: rgba(15, 138, 120, 0.20);

    --amber: #9c6b1f;       --amber-tint: #fbf1de;   /* OPEN */
    --blue: #2c6aa8;        --blue-tint: #e7f0f9;    /* IN_PROGRESS */
    --green: #1c7d54;       --green-tint: #e4f3eb;   /* RESOLVED */
    --slate: #5d6f73;       --slate-tint: #eaeef0;   /* CLOSED */
    --danger: #b1443a;      --danger-tint: #f8e9e7;
    --ok: #1c7d54;

    --radius: 14px;
    --radius-sm: 10px;
    --pill: 999px;
    --shadow-sm: 0 1px 2px rgba(18, 42, 40, 0.05), 0 1px 3px rgba(18, 42, 40, 0.06);
    --shadow: 0 4px 14px rgba(18, 46, 44, 0.07), 0 14px 34px rgba(18, 46, 44, 0.05);
    --shadow-lg: 0 22px 60px rgba(12, 58, 52, 0.16);
    --maxw: 980px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--bg);
    /* layered atmosphere: a soft teal wash up top, a faint dot grid, then the paper base */
    background-image:
        radial-gradient(120% 70% at 50% -10%, rgba(15, 138, 120, 0.10), rgba(15, 138, 120, 0) 60%),
        radial-gradient(rgba(15, 138, 120, 0.045) 1px, transparent 1px);
    background-size: auto, 22px 22px;
    background-attachment: fixed;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---- app bar ---------------------------------------------------------- */
.appbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line);
}
.appbar-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 11px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.spacer { flex: 1; }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand-mark {
    position: relative;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: linear-gradient(150deg, var(--accent), var(--accent-strong));
    box-shadow: 0 4px 12px var(--accent-ring), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    flex: none;
}
.brand-mark::before, .brand-mark::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    background: #fff; border-radius: 2px; transform: translate(-50%, -50%);
}
.brand-mark::before { width: 16px; height: 3.6px; }
.brand-mark::after  { width: 3.6px; height: 16px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong, .brand-text b { font-family: var(--font-serif); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.brand-text small { color: var(--muted); font-size: 11.5px; letter-spacing: 0.02em; }

.nav { display: flex; gap: 4px; align-items: center; }
.nav a {
    text-decoration: none;
    color: var(--ink-soft);
    font-weight: 500;
    font-size: 14.5px;
    padding: 7px 12px;
    border-radius: var(--pill);
    transition: background 0.15s ease, color 0.15s ease;
}
.nav a:hover { background: var(--accent-tint); color: var(--accent-strong); }

.whoami { color: var(--muted); font-size: 13.5px; }
.whoami b { color: var(--ink-soft); font-weight: 600; }
.appbar form { margin: 0; }

/* ---- page shell ------------------------------------------------------- */
.page {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 34px 20px 80px;
}
.page.narrow { max-width: 760px; }

.back {
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 500;
    margin-bottom: 14px;
}
.back:hover { color: var(--accent-strong); }

/* ---- typography ------------------------------------------------------- */
h1 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(28px, 4vw, 38px);
    letter-spacing: -0.02em;
    line-height: 1.12;
    margin: 0 0 6px;
    color: var(--ink);
}
h2 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 21px;
    letter-spacing: -0.01em;
    margin: 34px 0 12px;
    color: var(--ink);
}
h3 { font-family: var(--font-serif); font-weight: 600; font-size: 17px; margin: 0 0 8px; color: var(--ink); }
.card h2, .card h3 { margin-top: 0; }
.lede { color: var(--muted); font-size: 15px; margin: 0 0 18px; max-width: 60ch; }
p { margin: 10px 0; }
a { color: var(--accent-strong); text-underline-offset: 2px; }
code {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 0.9em;
}
.muted { color: var(--muted); }

/* ---- cards ------------------------------------------------------------ */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin: 18px 0;
    box-shadow: var(--shadow-sm);
}
.card.accent { border-left: 3px solid var(--accent); }
.card .sub { margin-top: -2px; margin-bottom: 14px; color: var(--muted); font-size: 13.5px; }

/* ---- forms ------------------------------------------------------------ */
label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--ink-soft); }
.field { margin: 14px 0; }
.hint { color: var(--muted); font-weight: 400; font-size: 0.88em; }

input, textarea, select {
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    width: 100%;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder, textarea::placeholder { color: #9aa9a9; }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-ring);
}
textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
select { appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236c7e7e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }

/* a horizontal form row that wraps (used on the user-create form) */
form.inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
form.inline input, form.inline select { width: auto; flex: 1 1 180px; }

/* ---- buttons ---------------------------------------------------------- */
button, .btn {
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: linear-gradient(160deg, var(--accent), var(--accent-strong));
    color: #fff;
    box-shadow: 0 2px 8px var(--accent-ring);
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}
button:hover, .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px var(--accent-ring); }
button:active, .btn:active { transform: translateY(0); }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-ghost {
    background: var(--surface); color: var(--ink-soft);
    border-color: var(--line); box-shadow: none;
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent-strong); box-shadow: none; }
.btn-sm { padding: 7px 13px; font-size: 13.5px; }
.btn-danger { background: none; color: var(--danger); border-color: var(--danger-tint); box-shadow: none; }
.btn-danger:hover { background: var(--danger-tint); box-shadow: none; }

/* destructive-action confirm — pure HTML/CSS two-click guard. The CSP forbids inline
   script (incl. onsubmit handlers), so <details> stands in for a confirm() dialog: no JS. */
details.confirm { display: inline-block; }
details.confirm > summary {
    display: inline-flex; align-items: center;
    list-style: none; cursor: pointer; user-select: none;
}
details.confirm > summary::-webkit-details-marker { display: none; }
details.confirm > summary::marker { content: ""; }
.confirm-pop {
    margin-top: 8px; padding: 13px 15px;
    background: var(--surface);
    border: 1px solid var(--danger-tint);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
.confirm-pop p { margin: 0 0 10px; }

/* ---- tables ----------------------------------------------------------- */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-top: 12px;
}
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
th {
    background: var(--surface-2);
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted);
}
tbody tr:last-child td, tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-2); }
td a { font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }

/* ---- status chips ----------------------------------------------------- */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 11px;
    border-radius: var(--pill);
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
    background: var(--slate-tint); color: var(--slate);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.chip[data-status="OPEN"]        { background: var(--amber-tint); color: var(--amber); }
.chip[data-status="IN_PROGRESS"] { background: var(--blue-tint);  color: var(--blue); }
.chip[data-status="RESOLVED"]    { background: var(--green-tint); color: var(--green); }
.chip[data-status="CLOSED"]      { background: var(--slate-tint); color: var(--slate); }

/* ---- alerts ----------------------------------------------------------- */
.ok, .err {
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    margin: 14px 0;
}
.ok  { background: var(--green-tint); color: var(--ok); border: 1px solid #cbe6d6; }
.err { background: var(--danger-tint); color: var(--danger); border: 1px solid #eccfca; }

/* ---- conversation bubbles -------------------------------------------- */
.talk { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.msg {
    padding: 10px 14px;
    border-radius: 14px;
    max-width: 84%;
    border: 1px solid transparent;
}
.msg .who { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); margin-bottom: 2px; }
.msg pre { margin: 0; }
/* own side (requester "me" / agent "agent") — aligned right, teal tint */
.msg.me, .msg.agent {
    align-self: flex-end;
    background: var(--accent-tint);
    border-color: #cfe7df;
    border-bottom-right-radius: 5px;
}
/* the other side (support / bot) — aligned left, neutral */
.msg.support, .msg.bot {
    align-self: flex-start;
    background: var(--surface-2);
    border-color: var(--line);
    border-bottom-left-radius: 5px;
}

/* the private agent<->assistant chat card gets a faint tinted field */
.card.chat { background: linear-gradient(180deg, #f3f9f7, var(--surface)); }

pre { white-space: pre-wrap; word-wrap: break-word; font-family: inherit; margin: 6px 0; }

/* ---- login ------------------------------------------------------------ */
.auth-wrap {
    min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px;
}
.auth-card {
    width: 100%; max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    padding: 34px 32px 30px;
}
.auth-card .brand { margin-bottom: 22px; }
.auth-card h1 { font-size: 26px; margin-bottom: 2px; }
.auth-card form { margin-top: 18px; }
.auth-card input { margin: 8px 0; }
.auth-card button { width: 100%; margin-top: 8px; padding: 12px; }
.auth-foot { margin-top: 22px; color: var(--muted); font-size: 12.5px; text-align: center; }

/* ---- motion ----------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.page > *, .auth-card { animation: rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.page > *:nth-child(2) { animation-delay: 0.05s; }
.page > *:nth-child(3) { animation-delay: 0.10s; }
.page > *:nth-child(4) { animation-delay: 0.15s; }
.page > *:nth-child(5) { animation-delay: 0.20s; }
.page > *:nth-child(n+6) { animation-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

@media (max-width: 640px) {
    .appbar-inner { flex-wrap: wrap; gap: 10px 14px; }
    .whoami { display: none; }
    .brand-text small { display: none; }
    th, td { padding: 10px 12px; }
}