/* İyilik Hali Asistan — sohbet arayüzü stilleri (teal marka, sıcak, erişilebilir) */
:root {
    --ink: #06919D;
    --ink-dark: #057A84;
    --ink-light: rgba(6, 145, 157, 0.10);
    --sand: #F6F4EF;
    --text: #1f2a2c;
    --header-h: 64px;
    --footer-h: 48px;
    --giris-h: 80px;
}

body {
    font-family: 'Public Sans', system-ui, sans-serif;
    color: var(--text);
    margin: 0;
    background: var(--sand);
}

h1, h2, h3, .brand-text {
    font-family: 'Instrument Serif', Georgia, serif;
}

/* ── Kabuk düzeni ── */
.assistant-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}

/* ── Başlık ── */
.assistant-header {
    height: var(--header-h);
    border-bottom: 1px solid #e0e5e6;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    z-index: 50;
    flex-shrink: 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: var(--ink);
    font-size: 1.3rem;
}

.brand .mdi {
    font-size: 1.6rem;
}

.portal-link {
    color: var(--text);
    text-decoration: none;
    opacity: .7;
    transition: opacity .15s;
}

.portal-link:hover {
    opacity: 1;
    color: var(--ink);
}

/* ── Ana sohbet alanı ── */
.assistant-main {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sohbet-sayfa {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Mesaj listesi (kaydırılabilir) ── */
.mesaj-listesi {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 0 1rem;
    scroll-behavior: smooth;
}

/* Mesaj satırı — kullanıcı sağda, asistan solda */
.mesaj-satir {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    padding: .4rem 1rem;
    max-width: 860px;
    margin: 0 auto;
    width: 100%;
}

.mesaj-satir.kullanici {
    justify-content: flex-end;
}

.mesaj-satir.asistan {
    justify-content: flex-start;
}

/* Avatar ikonu (asistan) */
.avatar-baloncuk {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ink-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.avatar-ikon {
    font-size: 1.25rem;
    color: var(--ink);
}

/* ── Sohbet balonları ── */
.balon {
    max-width: 72%;
    padding: .75rem 1rem;
    border-radius: 18px;
    line-height: 1.55;
    font-size: .97rem;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* Kullanıcı balonu — teal, sağ */
.kullanici-balon {
    background: var(--ink);
    color: #fff;
    border-bottom-right-radius: 6px;
}

/* Asistan balonu — beyaz, sol */
.asistan-balon {
    background: #fff;
    color: var(--text);
    border: 1px solid #e0e5e6;
    border-bottom-left-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

/* "Yazıyor..." animasyon balonları */
.yazıyor-balon {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: .8rem 1.1rem;
}

.nokta {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink);
    opacity: .5;
    animation: noktaAtla 1.2s infinite ease-in-out;
}

.nokta:nth-child(2) { animation-delay: .2s; }
.nokta:nth-child(3) { animation-delay: .4s; }

@keyframes noktaAtla {
    0%, 80%, 100% { transform: translateY(0); opacity: .4; }
    40%            { transform: translateY(-6px); opacity: 1; }
}

/* ── Giriş alanı (altta sabit) ── */
.giris-alani {
    border-top: 1px solid #e0e5e6;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
    padding: .75rem 0 .5rem;
    flex-shrink: 0;
}

.giris-kutusu {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    background: #fff;
    border: 1.5px solid #cdd8d9;
    border-radius: 14px;
    padding: .5rem .6rem .5rem .9rem;
    transition: border-color .2s;
}

.giris-kutusu:focus-within {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(6, 145, 157, .12);
}

.mesaj-textarea {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    font-family: 'Public Sans', system-ui, sans-serif;
    font-size: .96rem;
    color: var(--text);
    background: transparent;
    max-height: 140px;
    line-height: 1.5;
    padding: .25rem 0;
}

.mesaj-textarea::placeholder {
    color: #94a4a6;
}

.mesaj-textarea:disabled {
    opacity: .6;
}

/* Gönder butonu */
.gonder-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: none;
    background: var(--ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, opacity .15s;
}

.gonder-btn:hover:not(:disabled) {
    background: var(--ink-dark);
}

.gonder-btn:disabled {
    background: #b0c8ca;
    cursor: not-allowed;
}

/* Alt not metni */
.giris-not {
    text-align: center;
    font-size: .78rem;
    color: #8a9fa1;
    margin: .4rem 0 0;
}

/* ── Alt bilgi ── */
.assistant-footer {
    border-top: 1px solid #e0e5e6;
    background: #fff;
    flex-shrink: 0;
}

.assistant-footer a {
    color: var(--ink);
    text-decoration: none;
}

.assistant-footer a:hover {
    text-decoration: underline;
}

/* ── Mobil uyumlu ── */
@media (max-width: 576px) {
    .balon { max-width: 88%; font-size: .92rem; }
    .mesaj-satir { padding: .3rem .6rem; }
}

/* ═══════════════ Mod seçici + araç çubuğu ═══════════════ */
.asistan-arac-cubugu {
    border-bottom: 1px solid #e0e5e6;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(6px);
    flex-shrink: 0;
}
.asistan-arac-cubugu .container { max-width: 860px; }
.mod-secici { position: relative; }
.mod-buton {
    display: flex; align-items: center; gap: .4rem;
    background: var(--ink-light); color: var(--ink);
    border: 1px solid transparent; border-radius: 999px;
    padding: .35rem .9rem; font-weight: 600; font-size: .9rem; cursor: pointer;
}
.mod-buton:hover { border-color: var(--ink); }
.mod-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    width: 340px; max-width: 86vw; background: #fff;
    border: 1px solid #e0e5e6; border-radius: 14px; padding: .4rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    display: grid; gap: .25rem;
}
.mod-secenek {
    display: flex; align-items: center; gap: .7rem; text-align: left;
    background: none; border: none; border-radius: 10px; padding: .6rem .7rem; cursor: pointer;
}
.mod-secenek:hover { background: var(--sand); }
.mod-secenek.aktif { background: var(--ink-light); }
.mod-secenek-ikon {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
    display: grid; place-items: center; background: var(--ink-light); color: var(--ink); font-size: 1.2rem;
}

/* ═══════════════ Boş ekran + öneri çipleri ═══════════════ */
.bos-ekran { text-align: center; padding: 2.5rem 1rem; max-width: 860px; margin: 0 auto; }
.oneri-cipleri { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.5rem; }
.oneri-cip {
    background: #fff; border: 1px solid #cdd8d9; border-radius: 999px;
    padding: .5rem 1rem; font-size: .9rem; color: var(--text); cursor: pointer; transition: border-color .15s, background .15s;
}
.oneri-cip:hover:not(:disabled) { border-color: var(--ink); background: var(--ink-light); }
.oneri-cip:disabled { opacity: .5; cursor: not-allowed; }

/* Kriz yönlendirme balonu — sıcak vurgu */
.kriz-balon { border-color: #e0a96d !important; background: #fff8f0 !important; }

/* Yazıyor alias (tiltsiz sınıf) */
.yaziyor-balon { display: flex; align-items: center; gap: 5px; padding: .8rem 1.1rem; }

/* ═══════════════ Genel yardımcı butonlar ═══════════════ */
.btn-icon { background: none; border: none; color: var(--text); border-radius: 50%; padding: .25rem .4rem; cursor: pointer; }
.btn-icon:hover { background: var(--ink-light); color: var(--ink); }
.btn-portal { background: var(--ink); color: #fff; border: none; border-radius: 10px; padding: .5rem 1.1rem; font-weight: 600; cursor: pointer; }
.btn-portal:hover { background: var(--ink-dark); color: #fff; }

/* ═══════════════ Sakinleşme / modal ═══════════════ */
.sakinlik-overlay {
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.sakinlik-panel {
    position: relative; width: 100%; max-width: 32rem; max-height: 92vh; overflow-y: auto;
    background: #fff; border-radius: 18px; padding: 1.25rem; box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.arac-kart {
    display: flex; align-items: center; gap: .75rem; text-align: left;
    background: #fff; border: 1px solid #e0e5e6; border-radius: 14px; padding: 1rem; cursor: pointer; transition: border-color .15s, background .15s;
}
.arac-kart:hover { border-color: var(--ink); background: var(--ink-light); }
.arac-ikon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--ink-light); color: var(--ink); font-size: 1.4rem; }

/* 4-7-8 nefes dairesi */
.nefes-sahne { position: relative; width: 13rem; height: 13rem; display: grid; place-items: center; }
.nefes-daire { position: absolute; width: 10rem; height: 10rem; border-radius: 50%; background: rgba(6,145,157,.25); transition-property: transform; transition-timing-function: ease-in-out; }
.nefes-cekirdek { position: absolute; width: 7rem; height: 7rem; border-radius: 50%; background: rgba(6,145,157,.4); }
.nefes-metin { position: relative; text-align: center; }
.nefes-sayi { font-size: 2.5rem; font-weight: 300; color: var(--ink-dark); }

/* Dürtü dalgası sahnesi */
.dalga-sahne { position: relative; height: 10rem; width: 100%; overflow: hidden; border-radius: 14px; background: var(--ink-light); }
.dalga-nokta { position: absolute; width: .75rem; height: .75rem; border-radius: 50%; background: var(--ink-dark); box-shadow: 0 1px 4px rgba(0,0,0,.2); transform: translateX(-50%); transition: all 1s linear; }
.dalga-egri { position: absolute; inset: 0; width: 100%; height: 100%; }
.dalga-sayac { position: absolute; right: .75rem; top: .75rem; font-family: ui-monospace, monospace; font-size: 1.5rem; color: var(--ink-dark); }

/* 5-4-3-2-1 topraklama */
.toprak-satir { display: flex; align-items: center; gap: .75rem; border: 1px solid #e0e5e6; border-radius: 14px; padding: .75rem; }
.toprak-no { width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #fff; background: var(--ink); }