/* MeetSlava — server-rendered app surface (кабинет, аккаунт, HR, админ, платежи).
   Дизайн-система лендинга: бумага/чернила, petrol = действие, amber = деньги,
   mono для данных/токенов/чисел. Системные шрифты, ноль внешних зависимостей.
   ВАЖНО: имена классов сохранены 1:1 с вьюхами — это только рестайл. */

:root {
    --bg:        #f6f8fa;   /* бумага (как лендинг) */
    --surface:   #ffffff;
    --ink:       #101828;
    --panel:     #0b1220;   /* чернильные панели (токены, код) */
    --muted:     #5b6472;
    --faint:     #8a94a6;
    --border:    #e3e8ef;
    --border-2:  #c9d2dd;
    --accent:    #0f766e;   /* petrol — действия/ссылки */
    --accent-ink:#0c5f59;
    --accent-bg: #e6f4f2;
    --amber:     #d97706;   /* только деньги: цены, paid-бейджи */
    --amber-ink: #b45309;
    --amber-bg:  #fff4e0;
    --ok:        #15803d;
    --ok-bg:     #dcfce7;
    --danger:    #dc2626;
    --warn:      #b45309;
    --shadow:    0 1px 2px rgba(11,18,32,.04), 0 8px 24px -12px rgba(11,18,32,.12);
    --radius:    12px;
    --mono:      ui-monospace, "SF Mono", Menlo, "Cascadia Mono", monospace;
    --sans:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.55;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---- app header ---- */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: relative;
}
.site-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--accent);
}
.site-header__inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: baseline;
    gap: 14px;
}
.brand {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.02em;
    color: var(--ink);
    text-decoration: none;
}
.brand:hover { color: var(--accent); text-decoration: none; }
.brand__dot { color: var(--accent); }
.brand__tag {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .02em;
    color: var(--faint);
}

main {
    width: 100%;
    max-width: 760px;
    margin: 36px auto;
    padding: 0 20px;
    flex: 1;
}
main.narrow { max-width: 432px; margin-top: 56px; }
main.medium { max-width: 720px; margin-top: 56px; }
main.wide   { max-width: 980px; }

/* ---- typography ---- */
h1 {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.025em;
    margin: 0 0 6px;
    line-height: 1.2;
}
h2 {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.01em;
    margin: 30px 0 4px;
}
h3 {
    font-size: 14px;
    font-weight: 650;
    margin: 22px 0 4px;
}
p { margin: 10px 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a.back { color: var(--muted); font-size: 13px; }
a.back:hover { color: var(--ink); }

code { font-family: var(--mono); font-size: .92em; }
code.token {
    display: block;
    padding: 13px 14px;
    background: var(--panel);
    color: #dbe3ee;
    border-radius: 10px;
    font-size: 13px;
    word-break: break-all;
    user-select: all;
    line-height: 1.5;
}

p.desc { color: var(--muted); margin: 14px 0; }
.error { color: var(--danger); }
.note { color: var(--faint); font-size: 12.5px; margin-top: 8px; }

/* Статус-сообщения (результат POST: сохранено / ошибка / промокод) */
.flash {
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
    margin: 14px 0;
}
.flash.ok    { border-left-color: var(--ok); }
.flash.error { border-left-color: var(--danger); color: var(--danger); }
p.field-error { color: var(--danger); font-size: 12.5px; margin: 6px 0 0; }

/* ---- admin inquiry view ---- */
.meta { color: var(--muted); font-size: 13px; margin-bottom: 22px; }
.label { font-weight: 650; margin-top: 16px; display: block; color: var(--ink); }
pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 13px;
    font-family: var(--mono);
    font-size: 13px;
}
.photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.photos img { max-width: 400px; border-radius: 10px; border: 1px solid var(--border); }
.slots { margin: 8px 0 0; padding-left: 20px; }
.slots li { margin: 2px 0; }

/* ---- cards / dashboard ---- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}
.card h1:first-child, .card h2:first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
h1.ok { color: var(--ok); }

/* Шапка страницы: заголовок слева, действие (logout и т.п.) справа */
.page-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.page-head h1 { margin: 0; }
.who { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.who b { color: var(--ink); font-weight: 600; }

/* Навигационные ссылки-строки под дашбордом */
.nav-links { margin: 14px 0; color: var(--border-2); }
.nav-links a { margin-right: 4px; }
.grid { display: flex; gap: 14px; flex-wrap: wrap; }
.grid > div {
    flex: 1;
    min-width: 116px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 14px 16px;
    color: var(--muted);
    font-size: 13px;
}
.num {
    display: block;
    font-family: var(--mono);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    margin-bottom: 2px;
}

/* ---- buttons ---- */
.btn, button {
    display: inline-block;
    padding: 11px 18px;
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 10px;
    text-decoration: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .12s ease, transform .04s ease, box-shadow .12s ease;
    box-shadow: 0 1px 2px rgba(15,118,110,.18);
}
.btn:hover, button:hover { background: var(--accent-ink); text-decoration: none; }
.btn:active, button:active { transform: translateY(1px); }
.btn.secondary { background: #16223a; box-shadow: none; }
.btn.secondary:hover { background: var(--panel); }
.btn.is-disabled { opacity: .45; pointer-events: none; cursor: default; }
.btn-link {
    background: none;
    color: var(--accent);
    box-shadow: none;
    padding: 0;
    font-weight: 600;
    width: auto;
}
.btn-link:hover { background: none; text-decoration: underline; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* Выход и отвязка MAX — тихие кнопки, а не главный CTA страницы */
form[action="/account/logout"] { margin-top: 28px; }
form[action="/account/logout"] button,
form[action="/account/max-link/unlink"] button {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border-2);
    box-shadow: none;
    padding: 8px 14px;
    font-size: 13.5px;
    width: auto;
}
form[action="/account/logout"] button:hover,
form[action="/account/max-link/unlink"] button:hover { background: #fff; color: var(--ink); }
.page-head form[action="/account/logout"] { margin: 0; }

/* Компактные кнопки-действия внутри таблиц (модерация, промокоды) */
td form { display: inline; }
td button {
    margin: 1px 2px 1px 0;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 7px;
    background: #fff;
    color: var(--accent-ink);
    border: 1px solid var(--border-2);
    box-shadow: none;
    width: auto;
}
td button:hover { background: var(--accent-bg); border-color: var(--accent); }

/* ---- forms ---- */
label { display: block; font-weight: 600; margin: 15px 0 6px; font-size: 14px; }
input, textarea, select {
    width: 100%;
    padding: 11px 13px;
    font-size: 15px;
    font-family: inherit;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--border-2);
    border-radius: 10px;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(15,118,110,.15);
}
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); }
input:disabled { background: #f0f3f6; color: var(--faint); }
textarea { min-height: 110px; resize: vertical; }
select { appearance: auto; }
form.card button { margin-top: 20px; width: 100%; }
label.accept { font-weight: 400; font-size: 13.5px; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; }
label.accept input { margin-top: 3px; }
label.check { font-weight: 400; font-size: 14px; display: flex; gap: 8px; align-items: center; }

/* Настройки: группа чекбоксов типов событий */
fieldset {
    border: 1px solid var(--border-2);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 14px 0;
}
legend { font-size: 13px; font-weight: 650; color: var(--muted); padding: 0 6px; }

/* Списки профиля (опыт, достижения, FAQ) */
ul.items { list-style: none; margin: 8px 0 4px; padding: 0; }
ul.items li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
ul.items li:last-child { border-bottom: 0; }
ul.items form { display: inline; flex-shrink: 0; }
ul.items .btn-link { font-size: 12.5px; color: var(--danger); }
.price { font-size: 17px; font-weight: 650; margin: 12px 0; letter-spacing: -.01em; color: var(--amber-ink); font-variant-numeric: tabular-nums; }
.row { display: flex; gap: 12px; }
.row > div { flex: 1; }

/* ---- tables ---- */
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--faint);
    font-weight: 650;
    border-bottom: 1px solid var(--border-2);
    padding: 8px 10px;
    text-align: left;
}
td { border-bottom: 1px solid var(--border); padding: 9px 10px; text-align: left; vertical-align: top; }
tbody tr:hover td { background: var(--bg); }
td code { font-size: 12px; }

/* ---- HR OAuth clients: длинные Client ID/redirect URI не должны распирать карточку ---- */
.table-scroll { overflow-x: auto; }
.oauth-clients { table-layout: fixed; }
.oauth-clients th:nth-child(1), .oauth-clients td:nth-child(1) { width: 22%; }
.oauth-clients th:nth-child(2), .oauth-clients td:nth-child(2) { width: 30%; }
.oauth-clients th:nth-child(3), .oauth-clients td:nth-child(3) { width: 38%; }
.oauth-clients th:nth-child(4), .oauth-clients td:nth-child(4) { width: 10%; }
.oauth-clients td code { word-break: break-all; white-space: normal; }

/* ---- role toggle (admin/users) ---- */
button.role {
    margin: 2px; padding: 4px 9px; border: 1px solid var(--border-2);
    border-radius: 7px; font-size: 12px; font-weight: 600;
    background: #fff; color: var(--muted); width: auto; box-shadow: none;
}
button.role:hover { background: var(--bg); color: var(--ink); }
button.role.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-ink); }

/* ---- badges ---- */
.badge { font-family: var(--mono); font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 999px; letter-spacing: .01em; }
.badge.free     { background: var(--accent-bg); color: var(--accent-ink); }
.badge.paid     { background: var(--amber-bg); color: var(--amber-ink); }
.badge.entitled { background: #eef1f6; color: var(--muted); }

/* ---- analytics: funnel + sparklines ---- */
.switch { margin: 8px 0 22px; color: var(--muted); font-size: 13px; }
.switch a { color: var(--accent); }
.frow { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 14px; }
.flabel { width: 168px; color: var(--ink); }
.ftrack { flex: 1; background: #e9eef2; border-radius: 7px; height: 22px; overflow: hidden; }
.fbar { height: 22px; background: var(--accent); border-radius: 7px; }
.fnum { width: 48px; text-align: right; font-weight: 700; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.fconv { width: 56px; text-align: right; color: var(--faint); font-family: var(--mono); }
.spark { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; font-size: 13px; }
.spark span { width: 168px; }
.sgrid { display: flex; gap: 22px; flex-wrap: wrap; }
.sgrid div { font-size: 13px; color: var(--ink); }

/* ---- misc ---- */
.qr { margin: 14px 0; }
.qr svg, .qr img { border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 10px; }
.present-toggle { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.present-toggle input { width: auto; }

/* Аккордеон-секции /account/profile — сворачиваемые группы скаляр-полей */
.accordion-section {
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    margin-bottom: 12px;
    padding: 0 18px;
}
.accordion-section:not([open]) { padding-bottom: 0; }
.accordion-section summary {
    cursor: pointer;
    list-style: none;
    padding: 16px 0;
    font-weight: 600;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.accordion-section summary::-webkit-details-marker { display: none; }
.accordion-section summary::before { content: "▸"; color: var(--muted); font-size: 12px; }
.accordion-section[open] summary::before { content: "▾"; }
.section-count { font-weight: 400; font-size: 13px; color: var(--muted); }
.accordion-body { padding-bottom: 18px; }

/* ---- footer ---- */
.site-footer {
    max-width: 980px;
    margin: 8px auto 0;
    padding: 22px 20px 28px;
    color: var(--faint);
    font-size: 12.5px;
}
.site-footer a { color: var(--muted); }

/* ---- responsive ---- */
@media (max-width: 700px) {
    table { display: block; overflow-x: auto; }
}

@media (max-width: 560px) {
    main { margin: 24px auto; }
    h1 { font-size: 22px; }
    .card { padding: 18px; }
    .grid { gap: 10px; }
    .frow, .spark { font-size: 13px; }
    .flabel, .spark span { width: 110px; }
    .site-header__inner { flex-direction: column; gap: 2px; align-items: flex-start; }
}

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

/* ---- chat ---- */
.gigachat-integration {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gigachat-integration button,
.gigachat-integration a {
    text-decoration: none;
    color: #333;
    padding: 8px 12px;
    background-color: #e3f2fd;
    border-radius: 4px;
    font-size: 14px;
    border: none;
    cursor: pointer;
}

.gigachat-integration button:hover,
.gigachat-integration a:hover {
    background-color: #bbdefb;
}

.chat-container {
    display: flex;
    gap: 20px;
    height: 80vh;
}

.chat-threads {
    width: 250px;
    border-right: 1px solid #ddd;
    padding-right: 15px;
}

.chat-threads h3 {
    margin-top: 0;
}

.chat-threads-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-thread {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.2s;
}

.chat-thread:hover {
    background-color: #f5f5f5;
}

.chat-thread.active {
    background-color: #e3f2fd;
    border-color: #2196f3;
}

.chat-thread-title {
    font-weight: 500;
}

.chat-thread-date {
    font-size: 0.85em;
    color: #666;
}

.chat-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.chat-message {
    padding: 15px;
    border-radius: 8px;
    background-color: #f5f5f5;
}

.chat-message-user {
    background-color: #e3f2fd;
    margin-left: 50px;
}

.chat-message-assistant {
    background-color: #e8f5e9;
    margin-right: 50px;
}

.chat-message-system {
    background-color: #fff3e0;
    text-align: center;
    margin: 20px auto;
    max-width: 500px;
}

.chat-message-role {
    font-size: 0.8em;
    color: #666;
    margin-bottom: 5px;
}

.chat-message-content {
    margin-bottom: 5px;
}

.chat-message-time {
    font-size: 0.75em;
    color: #999;
}

/* Chat integration button in header */
#gigachat-chat-btn {
    background-color: #e3f2fd;
    border: 1px solid #2196f3;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    padding: 8px 12px;
    transition: background-color 0.2s;
}

#gigachat-chat-btn:hover {
    background-color: #bbdefb;
}