/* ── Yapay Zekâ section (pages/ai_*.js, models*, providers, api_keys) ──
 *
 * Calm on purpose: one accent, soft surfaces, generous spacing, status said
 * with a dot or a pill instead of a wall of badges. Only the theme tokens from
 * style.css are used, so Gece / Ferah / Kum all work unchanged.
 */

.ai-nav {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 4px; margin: 0 0 20px;
    background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
    width: fit-content; max-width: 100%;
}
.ai-nav button {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border: 0; border-radius: 10px;
    background: transparent; color: var(--text2);
    font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.ai-nav button:hover { color: var(--text); background: var(--hover-tint); }
.ai-nav button.on { background: var(--primary); color: var(--on-primary); }

.ai-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }
.ai-head h2 { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; }
.ai-head p { color: var(--text2); font-size: 14px; line-height: 1.55; max-width: 720px; margin-top: 4px; }
.ai-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.ai-group { margin: 0 0 26px; }

/* ── Families (LLM / ASR / TTS / OCR / Üretim) ── */
.ai-fam { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.ai-fam button {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--bg2); color: var(--text2); font: inherit; font-size: 13px; font-weight: 550; cursor: pointer;
}
.ai-fam button small { font-size: 11.5px; font-weight: 500; opacity: 0.8; }
.ai-fam button:hover { color: var(--text); border-color: var(--primary); }
.ai-fam button.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.ai-family { margin: 0 0 30px; }
.ai-family[hidden] { display: none; }
.ai-fam-head {
    display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
    padding: 0 0 10px; margin: 0 0 12px; border-bottom: 1px solid var(--border);
}
.ai-fam-head > div:not(.ai-head-actions) { flex: 1; min-width: 220px; }
.ai-fam-head h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 650; margin: 0; }
.ai-fam-head p { color: var(--text2); font-size: 13px; line-height: 1.5; margin: 2px 0 0; max-width: 760px; }
.ai-fam-icon {
    width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; font-size: 19px;
    display: inline-flex; align-items: center; justify-content: center; background: var(--bg3);
}
.ai-subhead {
    display: flex; align-items: center; gap: 8px; margin: 16px 0 8px;
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text2);
}
.ai-lines { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.5; }
.ai-lines code { font-size: 12px; }
.ai-lead { font-size: 13px; line-height: 1.5; margin: 0; }
.ai-steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.ai-steps li {
    counter-increment: step; display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); font-size: 13px;
}
.ai-steps li::before { content: counter(step); font-size: 11px; font-weight: 700; color: var(--text2); }
.ai-steps li small { color: var(--text2); font-size: 11.5px; }
.ai-steps li:last-child { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.ai-pickline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-pickline label { margin: 0; font-size: 13.5px; font-weight: 600; }
.ai-pickline select { min-width: 260px; }
.ai-group > h3 {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text2); margin: 0 0 10px;
}
.ai-group-meta { margin-left: auto; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.ai-group-meta label.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-weight: 400; }
.ai-group-meta input { width: auto; }
.ai-pad { padding: 4px 2px 8px; }

/* ── Pills, dots, avatars ── */
.ai-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ai-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 550; line-height: 1.7; white-space: nowrap;
    background: var(--bg3); color: var(--text2);
}
.ai-chip.ok { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.ai-chip.warn { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.ai-chip.bad { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.ai-chip.cap { background: color-mix(in srgb, var(--primary) 13%, transparent); color: var(--link); }
.ai-chip.muted { background: var(--bg3); color: var(--text2); }

.ai-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--text2); }
.ai-dot.ok { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent); }
.ai-dot.warn { background: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 20%, transparent); }
.ai-dot.bad { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); }

.ai-avatar {
    --h: 220;
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
    background: hsl(var(--h) 55% 50% / 0.16); color: hsl(var(--h) 60% 62%);
}
:root[data-theme="light"] .ai-avatar, :root[data-theme="sand"] .ai-avatar { color: hsl(var(--h) 55% 32%); }

/* ── Rows and cards ── */
.ai-row, .ai-tool, .ai-key {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; margin-bottom: 8px;
    background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
    transition: border-color 0.15s;
}
.ai-row:hover, .ai-tool:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.ai-row.off, .ai-tool.off, .ai-rule.off { opacity: 0.6; }
.ai-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 180px; flex: 1; }
.ai-row-main strong { font-size: 14.5px; font-weight: 600; }
.ai-row-main small { color: var(--text2); font-size: 12.5px; overflow-wrap: anywhere; }
.ai-row-main code, .ai-key code, .ai-pick-main code { font-size: 12px; }
.ai-row-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ai-row .ai-chips { flex: 0 1 auto; }

.ai-icon-btn {
    width: 32px; height: 32px; border-radius: 9px;
    border: 1px solid var(--border); background: transparent; color: var(--text2);
    font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ai-icon-btn:hover:not(:disabled) { color: var(--primary); border-color: var(--primary); }
.ai-icon-btn.danger:hover { color: var(--danger); border-color: var(--danger); }
.ai-icon-btn:disabled { opacity: 0.35; cursor: default; }

.ai-mini-select { width: auto; padding: 6px 10px; font-size: 12.5px; border-radius: 9px; }

.ai-switch { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.ai-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ai-switch span {
    width: 38px; height: 22px; border-radius: 999px; background: var(--bg3);
    border: 1px solid var(--border); position: relative; transition: background 0.15s;
}
.ai-switch span::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--text2); transition: transform 0.15s, background 0.15s;
}
.ai-switch input:checked + span { background: var(--primary); border-color: var(--primary); }
.ai-switch input:checked + span::after { transform: translateX(16px); background: var(--on-primary); }
.ai-switch input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

.ai-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.ai-card {
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
}
.ai-card-head { display: flex; align-items: center; gap: 12px; }
.ai-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-keys { display: flex; flex-direction: column; gap: 6px; }
.ai-key { margin: 0; padding: 8px 10px; background: var(--bg); border-radius: 10px; }
.ai-key-main { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; }
.ai-key-main small { color: var(--text2); font-size: 12px; }
.ai-url { font-size: 12px; overflow-wrap: anywhere; margin-top: -4px; }
.ai-probe:empty { display: none; }

.ai-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.ai-tile {
    display: flex; align-items: center; gap: 12px; text-align: left;
    padding: 12px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
    color: var(--text); font: inherit; cursor: pointer; transition: border-color 0.15s, transform 0.15s;
}
button.ai-tile:hover { border-color: var(--primary); transform: translateY(-1px); }
.ai-tile.static { cursor: default; }
.ai-tile-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ai-tile-main strong { font-size: 14px; }
.ai-tile-main small { color: var(--text2); font-size: 12px; }
.ai-tile-go { color: var(--link); font-size: 12.5px; font-weight: 600; white-space: nowrap; }

.ai-empty {
    text-align: center; padding: 34px 20px; color: var(--text2);
    background: var(--bg2); border: 1px dashed var(--border); border-radius: 14px;
}
.ai-empty-icon { font-size: 30px; margin-bottom: 8px; }
.ai-empty strong { color: var(--text); font-size: 15px; display: block; margin-bottom: 4px; }
.ai-empty p { font-size: 13.5px; max-width: 460px; margin: 0 auto 12px; line-height: 1.55; }

.ai-alert {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between;
    padding: 12px 16px; margin-bottom: 20px; border-radius: 12px; font-size: 14px;
    background: color-mix(in srgb, var(--warning) 10%, var(--bg2));
    border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border));
}

.ai-note { display: block; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; margin-top: 6px; }
.ai-note.ok { background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--text); }
.ai-note.warn { background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--text); }
.ai-note.bad { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--text); }

details.ai-more { font-size: 13px; color: var(--text2); }
details.ai-more > summary { cursor: pointer; width: fit-content; padding: 2px 0; }
details.ai-more > summary:hover { color: var(--text); }
details.ai-more[open] > summary { margin-bottom: 8px; }
details.ai-more > div { line-height: 1.8; }

/* ── İşlemler ── */
.ai-op {
    padding: 14px 16px; margin-bottom: 10px;
    background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
    display: flex; flex-direction: column; gap: 10px;
}
.ai-op-head { display: flex; align-items: center; gap: 12px; }
.ai-op-title { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.ai-op-title strong { font-size: 15px; font-weight: 600; }
.ai-op-title small { color: var(--text2); font-size: 12.5px; }
.ai-mchips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ai-mchip {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    padding: 4px 4px 4px 6px; border-radius: 10px;
    background: var(--bg); border: 1px solid var(--border); font-size: 13px;
}
.ai-mchip.warn { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); }
.ai-mchip.bad { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }
.ai-mchip.off { opacity: 0.55; border-style: dashed; }
.ai-mchip-n {
    width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg3); color: var(--text2); font-size: 11px; font-weight: 700;
}
.ai-mchip-name { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.ai-mchip small { color: var(--text2); font-size: 11.5px; }
.ai-x {
    width: 22px; height: 22px; border-radius: 6px; border: 0; background: transparent;
    color: var(--text2); font-size: 16px; line-height: 1; cursor: pointer;
}
.ai-x:hover { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.ai-add {
    padding: 6px 12px; border-radius: 10px; border: 1px dashed var(--border);
    background: transparent; color: var(--link); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ai-add:hover { border-color: var(--primary); background: var(--hover-tint); }
.ai-mchips:not(.open) .ai-mchip.extra { display: none; }
.ai-fix {
    padding: 1px 8px; border-radius: 999px; border: 1px solid var(--success);
    background: transparent; color: var(--success); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.ai-fix:hover { background: color-mix(in srgb, var(--success) 15%, transparent); }
.ai-add.more { border-style: solid; color: var(--text2); font-weight: 500; }
.ai-miss { font-size: 13px; color: var(--danger); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.only-missing .ai-op[data-ready="true"],
.only-missing .ai-family:not(:has([data-ready="false"])) { display: none; }

/* ── Model filters (Modeller) ── */
.ai-filter {
    padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--bg2); color: var(--text2); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.ai-filter:hover { color: var(--text); border-color: var(--primary); }
.ai-filter.on { background: color-mix(in srgb, var(--primary) 16%, var(--bg2)); border-color: var(--primary); color: var(--text); }
.ai-filter.on.bad { background: color-mix(in srgb, var(--danger) 14%, var(--bg2)); border-color: var(--danger); }
.ai-filter.small { padding: 3px 9px; font-size: 12px; }
#ai-models.f-key [data-key="false"], #ai-models.f-hears [data-hears="false"], #ai-models.f-active [data-active="false"] { display: none; }

/* ── Picker & dialogs ── */
.ai-overlay { backdrop-filter: blur(2px); }
.modal.ai-modal { border-radius: 16px; padding: 22px 24px; max-height: 86vh; }
.modal.ai-modal.wide { max-width: 760px; }
.ai-modal h3 { font-size: 16px; margin-bottom: 6px; }
.ai-ask { display: flex; gap: 14px; align-items: flex-start; }
.ai-ask p { color: var(--text2); line-height: 1.6; font-size: 14px; }
.ai-ask-icon { font-size: 26px; line-height: 1; }
.ai-pick-bar { display: flex; gap: 8px; margin-bottom: 10px; }
.ai-pick-bar input { flex: 1; }
.ai-pick-bar select { width: auto; max-width: 220px; }
.ai-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ai-pick-live { min-height: 4px; margin-bottom: 8px; }
.ai-pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 48vh; overflow-y: auto; padding-right: 2px; }
.ai-pick-item {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text); font: inherit; cursor: pointer;
}
button.ai-pick-item:hover { border-color: var(--primary); background: var(--hover-tint); }
.ai-pick-item.static { cursor: default; }
.ai-pick-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ai-pick-main strong { font-size: 14px; overflow-wrap: anywhere; }
.ai-pick-main small { color: var(--text2); font-size: 12px; overflow-wrap: anywhere; }
.ai-pick-more { text-align: center; padding: 8px; }

.ai-md-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.ai-md-grid.three { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ai-md-h { font-size: 13px; font-weight: 600; color: var(--text2); margin: 14px 0 8px; }
.ai-md-caps { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ai-md-ears { margin: 6px 0 2px; min-height: 18px; }
.ai-md-route { margin-top: 8px; overflow-wrap: anywhere; }
.ai-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--text); font-weight: 400; cursor: pointer; }
.ai-check input { width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; }
.ai-check.big { font-size: 14px; font-weight: 500; }
.ai-op-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 14px; }
.ai-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; max-height: 120px; overflow-y: auto; }
.ai-suggest-chip {
    padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text2); font: inherit; font-size: 12px; cursor: pointer;
}
.ai-suggest-chip:hover { border-color: var(--primary); color: var(--text); }
.ai-suggest-chip.live { color: var(--link); border-style: dashed; }

/* ── ASR chain (İşlemler › ASR) ── */
.ai-tool-icon {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
    background: var(--bg3);
}
.ai-rule {
    padding: 12px 14px; margin-bottom: 8px;
    background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
    display: flex; flex-direction: column; gap: 10px;
}
.only-audio .ai-rule[data-audio-ops="false"] { display: none; }
.ai-rule-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ai-rule-body { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: 13px; color: var(--text2); }
.ai-inline { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; font-size: 13px; font-weight: 400; }
.ai-seg { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--bg3); margin-left: auto; }
.ai-seg button {
    padding: 5px 12px; border: 0; border-radius: 8px; background: transparent;
    color: var(--text2); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.ai-seg button.on { background: var(--bg2); color: var(--text); box-shadow: var(--shadow); }
.ai-engine-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-bottom: 14px; }
.ai-engine {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
    padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg);
    color: var(--text); font: inherit; cursor: pointer;
}
.ai-engine small { color: var(--text2); font-size: 12px; line-height: 1.45; }
.ai-engine:hover { border-color: var(--primary); }
.ai-engine.on { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent); }

@media (max-width: 768px) {
    .ai-row-actions, .ai-seg { margin-left: 0; }
    .ai-mchip-name { max-width: 160px; }
    .ai-pick-bar { flex-direction: column; }
    .ai-pick-bar select { max-width: none; width: 100%; }
    .ai-pickline select { min-width: 0; width: 100%; }
}