/* ============================================================
   CodeStack AI Playground — оформление
   Светлая тема. Палитра — neutral/slate + sky/green акценты.
   Классы соответствуют разметке из render_playground() и JS.
   Инлайновые цвета в PHP-разметке (телеметрия, капча) переопределены
   здесь через !important там, где на белом фоне они нечитаемы.
   ============================================================ */

:root {
    --cs-bg:        #f8fafc;   /* фон контейнера            */
    --cs-bg-2:      #ffffff;   /* фон панелей/карточек       */
    --cs-bg-3:      #f1f5f9;   /* фон кода/шапки/заголовков  */
    --cs-line:      #e2e8f0;   /* границы                    */
    --cs-line-2:    #cbd5e1;   /* границы контролов          */
    --cs-text:      #0f172a;   /* основной текст             */
    --cs-muted:     #64748b;   /* подписи                    */
    --cs-accent:    #0284c7;   /* синий акцент (sky-600)     */
    --cs-accent-2:  #16a34a;   /* зелёный (primary btn)      */
    --cs-warn:      #ca8a04;
    --cs-err:       #dc2626;
    --cs-radius:    10px;
    --cs-mono: ui-monospace, "SF Mono", "Cascadia Code", "Consolas", "Liberation Mono", monospace;
}

/* ---------- Каркас ---------- */
.cs-ai-container {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 16px;
    align-items: start;
    background: var(--cs-bg);
    color: var(--cs-text);
    border: 1px solid var(--cs-line);
    border-radius: calc(var(--cs-radius) + 4px);
    padding: 16px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
}
@media (max-width: 820px) {
    .cs-ai-container { grid-template-columns: 1fr; }
}

.cs-ai-container *, .cs-ai-container *::before, .cs-ai-container *::after { box-sizing: border-box; }

/* ---------- Левая панель ---------- */
.cs-ai-sidebar {
    background: var(--cs-bg-2);
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
@media (max-width: 820px) {
    .cs-ai-sidebar { position: static; }
}

.cs-ai-panel-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--cs-text);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cs-line);
}

.cs-ai-field { display: flex; flex-direction: column; gap: 6px; }
.cs-ai-field > label,
.cs-ai-label-row label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cs-muted);
    margin: 0;
}

.cs-ai-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cs-ai-value-display {
    font-family: var(--cs-mono);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--cs-accent);
    min-width: 2.4em;
    text-align: right;
}

/* select */
.cs-ai-field select {
    appearance: none;
    background: var(--cs-bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L2 4h8z'/%3E%3C/svg%3E") no-repeat right 10px center;
    color: var(--cs-text);
    border: 1px solid var(--cs-line-2);
    border-radius: 8px;
    padding: 9px 30px 9px 11px;
    font-size: 0.9rem;
    width: 100%;
    cursor: pointer;
}
.cs-ai-field select:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 1px; }
.cs-ai-field select:disabled {
    opacity: .55; cursor: not-allowed;
    background-color: var(--cs-bg-3); color: var(--cs-muted);
}

/* range */
.cs-ai-field input[type="range"] {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px; border-radius: 3px;
    background: var(--cs-line); cursor: pointer; margin: 4px 0;
}
.cs-ai-field input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--cs-accent); border: 2px solid var(--cs-bg-2);
    box-shadow: 0 0 0 1px var(--cs-accent);
}
.cs-ai-field input[type="range"]::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--cs-accent); border: 2px solid var(--cs-bg-2);
}
.cs-ai-field input[type="range"]:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 4px; }
.cs-ai-field input[type="range"]:disabled { opacity: .45; cursor: not-allowed; }

.cs-ai-hint { font-size: 0.75rem; color: var(--cs-muted); line-height: 1.35; }

/* бейдж режима */
.cs-ai-badge {
    font-size: 0.82rem;
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid transparent;
    line-height: 1.4;
}
.cs-ai-badge--instruct {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #14532d;
}
.cs-ai-badge--base {
    background: #fffbeb;
    border-color: #fde68a;
    color: #713f12;
}
.cs-ai-badge strong { color: inherit; }

/* ---------- Правая колонка ---------- */
.cs-ai-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* «терминал» — в светлой теме это белая карточка вывода */
.cs-ai-terminal-wrapper {
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius);
    overflow: hidden;
    background: var(--cs-bg-2);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.cs-ai-terminal-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: var(--cs-bg-3);
    border-bottom: 1px solid var(--cs-line);
}
.cs-ai-terminal-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.cs-ai-terminal-dot--red    { background: #ff5f57; }
.cs-ai-terminal-dot--yellow { background: #febc2e; }
.cs-ai-terminal-dot--green  { background: #28c840; }
.cs-ai-terminal-title {
    margin-left: 8px; font-size: 0.8rem; color: var(--cs-muted);
    font-family: var(--cs-mono); letter-spacing: .03em;
}

.cs-ai-terminal-body {
    height: clamp(320px, 50vh, 560px);
    overflow-y: auto;
    padding: 16px;
    font-size: 0.92rem;
    background: var(--cs-bg-2);
    scrollbar-width: thin;
    scrollbar-color: var(--cs-line-2) transparent;
}
.cs-ai-terminal-body::-webkit-scrollbar { width: 10px; }
.cs-ai-terminal-body::-webkit-scrollbar-thumb { background: var(--cs-line-2); border-radius: 5px; }

.cs-ai-terminal-placeholder { color: var(--cs-muted); font-style: italic; }

/* индикатор «печатает» */
.cs-ai-terminal-body.cs-ai-printing::after {
    content: "▋";
    color: var(--cs-accent);
    animation: cs-blink 1s steps(2) infinite;
}
@keyframes cs-blink { 50% { opacity: 0; } }

/* реплики */
.cs-ai-user-msg {
    color: var(--cs-accent);
    font-weight: 600;
    margin-top: 14px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--cs-line-2);
    white-space: pre-wrap;
    word-break: break-word;
}
.cs-ai-ai-msg {
    margin-top: 8px;
    color: var(--cs-text);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* Markdown-контент ответа */
.cs-ai-ai-msg p { margin: 0 0 .7em; }
.cs-ai-ai-msg :first-child { margin-top: 0; }
.cs-ai-ai-msg :last-child { margin-bottom: 0; }
.cs-ai-ai-msg ul, .cs-ai-ai-msg ol { margin: 0 0 .7em; padding-left: 1.4em; }
.cs-ai-ai-msg li { margin: .2em 0; }
.cs-ai-ai-msg a { color: var(--cs-accent); text-decoration: underline; }
.cs-ai-ai-msg h1, .cs-ai-ai-msg h2, .cs-ai-ai-msg h3,
.cs-ai-ai-msg h4, .cs-ai-ai-msg h5, .cs-ai-ai-msg h6 {
    margin: 1em 0 .5em; line-height: 1.3; color: var(--cs-text);
}
.cs-ai-ai-msg table { border-collapse: collapse; margin: .6em 0; width: 100%; font-size: .88em; }
.cs-ai-ai-msg th, .cs-ai-ai-msg td { border: 1px solid var(--cs-line-2); padding: 6px 9px; }
.cs-ai-ai-msg th { background: var(--cs-bg-3); }
.cs-ai-ai-msg blockquote { margin: .6em 0; padding: .2em .9em; border-left: 3px solid var(--cs-line-2); color: var(--cs-muted); }
.cs-ai-ai-msg code {
    font-family: var(--cs-mono); font-size: .88em;
    background: var(--cs-bg-3); border: 1px solid var(--cs-line);
    padding: .1em .35em; border-radius: 5px; color: #be123c;
}
.cs-ai-ai-msg pre {
    background: var(--cs-bg-3) !important;
    border: 1px solid var(--cs-line);
    border-radius: 8px;
    padding: 12px 14px;
    overflow-x: auto;
    margin: .6em 0;
}
.cs-ai-ai-msg pre code {
    background: none; border: none; padding: 0; color: var(--cs-text); font-size: .82rem;
}

/* ---------- Телеметрия ---------- */
/* В PHP ячейки размечены инлайновыми тёмными цветами — переопределяем. */
.cs-ai-telemetry {
    background: var(--cs-bg-2) !important;
    border: 1px solid var(--cs-line) !important;
    border-radius: var(--cs-radius) !important;
    color: var(--cs-text) !important;
}
/* серые подписи инлайном (#a1a1aa) на белом почти не видны — затемняем */
.cs-ai-telemetry .cs-ai-stat > span:first-child {
    color: var(--cs-muted) !important;
}
/* значения: читаемые на белом варианты тех же тонов */
#cs-ai-stat-speed    { color: #15803d !important; font-weight: 700; }
#cs-ai-stat-ttft     { color: #1d4ed8 !important; font-weight: 700; }
#cs-ai-stat-tokens   { color: #a16207 !important; font-weight: 700; }
#cs-ai-stat-load     { color: #7e22ce !important; }
#cs-ai-stat-p-tokens { color: #0e7490 !important; }
#cs-ai-stat-p-eval   { color: #c2410c !important; }
#cs-ai-stat-ram      { color: #0369a1 !important; }
#cs-ai-stat-swap     { color: #be123c !important; }
#cs-ai-stat-cpu      { color: #db2777 !important; }
#cs-ai-stat-ctx      { color: #e11d48 !important; font-weight: 700; }
/* верхняя пунктирная разделительная линия контекста (инлайн #27272a) */
.cs-ai-telemetry .cs-ai-stat[style*="border-top"] {
    border-top-color: var(--cs-line-2) !important;
}
.cs-ai-stat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Ввод ---------- */
.cs-ai-input-row { display: flex; flex-direction: column; gap: 8px; }

#cs-ai-prompt {
    width: 100%;
    resize: vertical;
    min-height: 60px;
    background: var(--cs-bg-2);
    color: var(--cs-text);
    border: 1px solid var(--cs-line-2);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: .92rem;
    font-family: inherit;
    line-height: 1.45;
}
#cs-ai-prompt:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 1px; border-color: transparent; }
#cs-ai-prompt:disabled {
    opacity: .55; cursor: not-allowed;
    background: var(--cs-bg-3); color: var(--cs-muted);
    resize: none;
}
#cs-ai-prompt::placeholder { color: #94a3b8; }

/* капча */
.cs-ai-captcha-block { flex-wrap: wrap; }
.cs-ai-captcha-block label { color: var(--cs-muted); font-weight: 600; }
#cs-ai-captcha {
    background: var(--cs-bg-2) !important;
    color: var(--cs-text) !important;
    border: 2px solid var(--cs-line-2) !important;
}
#cs-ai-captcha:focus-visible { outline: 2px solid var(--cs-accent); }

/* кнопки */
.cs-ai-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.cs-ai-btn {
    appearance: none; border: 1px solid transparent; cursor: pointer;
    border-radius: 8px; padding: 10px 18px;
    font-size: .92rem; letter-spacing: .01em;
    transition: transform .05s ease, filter .12s ease, opacity .12s ease;
}
.cs-ai-btn:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
.cs-ai-btn:not(:disabled):hover { filter: brightness(1.06); }
.cs-ai-btn:not(:disabled):active { transform: translateY(1px); }
.cs-ai-btn:disabled { opacity: .55; cursor: not-allowed; }
.cs-ai-btn--primary { background: var(--cs-accent-2); color: #ffffff; }
.cs-ai-btn--secondary { background: var(--cs-bg-2); color: var(--cs-text); border-color: var(--cs-line-2); }
.cs-ai-btn--secondary:not(:disabled):hover { background: var(--cs-bg-3); }

/* ---------- Доступность / reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .cs-ai-terminal-body.cs-ai-printing::after { animation: none; }
    .cs-ai-btn { transition: none; }
}