/* Mesleknedir Chatbot – Temiz, modüler CSS */
/* Bölümler: 1) Değişkenler 2) Kapsayıcı/FAB 3) Backdrop/Drawer 4) Üst Başlık 5) Öneri Çipleri 6) Mesaj Alanı 7) Baloncuklar 8) Yazıyor 9) Giriş Alanı 10) Toast 11) Responsive */

:root {
  --mn-ai-brand-1: #6366f1; /* indigo-500 */
  --mn-ai-brand-2: #8b5cf6; /* violet-500 */
  --mn-ai-success: #16a34a;
  --mn-ai-text: #0f172a;
  --mn-ai-muted: #64748b;
  --mn-ai-surface: #ffffff;
  --mn-ai-surface-2: #f8fafc;
  --mn-ai-border: #e5e7eb;
  --mn-ai-shadow: 0 18px 50px rgba(15,23,42,.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --mn-ai-text: #e5e7eb;
    --mn-ai-muted: #94a3b8;
    --mn-ai-surface: #0b1220;
    --mn-ai-surface-2: #0e1628;
    --mn-ai-border: #1f2937;
    --mn-ai-shadow: 0 18px 50px rgba(0,0,0,.45);
  }
}

.mn-ai { position: fixed; right: 20px; bottom: 20px; z-index: 9999; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; }
.mn-ai .mn-fab { width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--mn-ai-brand-1), var(--mn-ai-brand-2)); box-shadow: 0 16px 40px rgba(99,102,241,.35); transition: transform .15s ease; }
.mn-ai .mn-fab:hover { transform: translateY(-2px); }
.mn-ai .mn-fab:focus { outline: 3px solid rgba(99,102,241,.35); outline-offset: 2px; }

.mn-ai .mn-backdrop { position: fixed; inset: 0; background: rgba(2,6,23,.45); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.mn-ai.open .mn-backdrop { opacity: 1; pointer-events: auto; }

.mn-ai .mn-panel { position: fixed; right: 0; bottom: 0; top: 0; width: min(420px, 92vw); max-height: 100vh; background: var(--mn-ai-surface); color: var(--mn-ai-text); border-left: 1px solid var(--mn-ai-border); border-radius: 0; overflow: hidden; box-shadow: var(--mn-ai-shadow); transform: translateX(102%); transition: transform .25s ease; display:flex; flex-direction:column; overscroll-behavior: contain; touch-action: pan-y; }
.mn-ai.open .mn-panel { transform: translateX(0); }
.mn-ai .mn-hd { display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 14px 16px; background: var(--mn-ai-surface); border-bottom: 1px solid var(--mn-ai-border); }
.mn-ai .mn-brand { display:flex; align-items:center; gap:12px; }
.mn-ai .mn-avatar { width:28px; height:28px; border-radius:8px; border:1px solid var(--mn-ai-border); display:flex; align-items:center; justify-content:center; color: var(--mn-ai-brand-1); background: linear-gradient(180deg,#ffffff,#f8faff); box-shadow: 0 2px 6px rgba(99,102,241,.15); }
.mn-ai .mn-title { display:flex; flex-direction:column; line-height:1.1; }
.mn-ai .mn-logo { font-weight:900; font-size:15px; color: var(--mn-ai-text); letter-spacing:.2px; }
.mn-ai .mn-sub { font-size:11px; color: var(--mn-ai-muted); font-weight:600; }
.mn-ai .mn-actions { display:flex; align-items:center; gap:8px; }
.mn-ai .mn-pill { height:36px; padding:0 12px; border-radius:10px; background:var(--mn-ai-surface); border:1px solid var(--mn-ai-border); color:var(--mn-ai-text); font-weight:700; cursor:pointer; }
.mn-ai .mn-icon { width:36px; height:36px; border-radius:10px; background:var(--mn-ai-surface); border:1px solid var(--mn-ai-border); color:var(--mn-ai-text); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
/* Öneri çipleri */
.mn-ai .mn-sugs { display:flex; gap:8px; padding: 10px 12px; background: var(--mn-ai-surface-2); border-bottom:1px solid var(--mn-ai-border); overflow-x:auto; white-space: nowrap; scrollbar-width: thin; }
.mn-ai .mn-sug { display:inline-flex; align-items:center; border:1px solid var(--mn-ai-border); background: var(--mn-ai-surface); color: var(--mn-ai-text); padding:8px 12px; border-radius:999px; font-size:12px; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease; }
.mn-ai .mn-sug:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(99,102,241,.12); }

.mn-ai .mn-msgs { flex:1; overflow:auto; overflow-x:hidden; -webkit-overflow-scrolling: touch; padding: 16px; display:flex; flex-direction:column; gap:12px; background: linear-gradient(180deg,var(--mn-ai-surface-2),var(--mn-ai-surface)); line-height: 1.7; }
.mn-ai .mn-msgs:focus { outline: 2px solid var(--mn-ai-brand-1); outline-offset: -2px; }
/* Scrollbar cilası (destekleyen tarayıcılar) */
.mn-ai .mn-msgs::-webkit-scrollbar { width: 10px; }
.mn-ai .mn-msgs::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--mn-ai-brand-1), var(--mn-ai-brand-2)); border-radius: 8px; border: 2px solid var(--mn-ai-surface); }
.mn-ai .mn-msgs::-webkit-scrollbar-track { background: var(--mn-ai-surface-2); }

.mn-ai .b { display:flex; gap:10px; align-items:flex-start; }
.mn-ai .b .a { width:32px; height:32px; border-radius:50%; background: linear-gradient(135deg,var(--mn-ai-brand-1),var(--mn-ai-brand-2)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; box-shadow: 0 6px 16px rgba(99,102,241,.25); overflow: hidden; }
.mn-ai .b .a img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-ai .b .c { position: relative; background: var(--mn-ai-surface); border:1px solid var(--mn-ai-border); padding:12px 14px; border-radius:14px; max-width: 92%; box-shadow: 0 1px 0 rgba(17,24,39,.04); }
.mn-ai .b .c p { margin: 8px 0; }
.mn-ai .b .c ul, .mn-ai .b .c ol { margin: 8px 0 10px 18px; }
.mn-ai .b .c li { margin: 4px 0; }
/* Özel nokta (bullet) – daha kompakt ve şık görünüm */
.mn-ai .b .c ul, .mn-ai .b .c ol { list-style: none; padding-left: 18px; }
.mn-ai .b .c ul li, .mn-ai .b .c ol li { position: relative; }
.mn-ai .b .c ul li::before, .mn-ai .b .c ol li::before { content: ""; position: absolute; left: -12px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--mn-ai-brand-1); box-shadow: 0 0 0 2px #ffffff; }
.mn-ai .b.bot .c:after { content: ""; position: absolute; left: -8px; top: 14px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid var(--mn-ai-border); }
.mn-ai .b.bot .c:before { content: ""; position: absolute; left: -7px; top: 15px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 7px solid #fff; }
.mn-ai .b.me { flex-direction: row-reverse; }
.mn-ai .b.me .t { margin-left: 0; margin-right: 46px; text-align: right; }
.mn-ai .b.me .c:after { content: ""; position: absolute; right: -8px; top: 14px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid var(--mn-ai-border); }
.mn-ai .b.me .c:before { content: ""; position: absolute; right: -7px; top: 15px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid #fbfbff; }
.mn-ai .b.bot .c { background: #fff; }
.mn-ai .b.me .c { background: #fbfbff; border-color: #e6e8ff; }
.mn-ai .b.bot + .b.bot { margin-top: -4px; }
.mn-ai .b.me + .b.me { margin-top: -4px; }
.mn-ai .b .c h3, .mn-ai .b .c h4 { margin: 6px 0 8px; font-weight:800; }
.mn-ai .b .c h3 { font-size: 17px; }
.mn-ai .b .c h4 { font-size: 15px; }
/* Welcome özel stilleri kaldırıldı (düz metin) */
.mn-ai .b .c blockquote { margin:8px 0; padding:8px 10px; border-left:3px solid var(--mn-ai-brand-1); background: var(--mn-ai-surface-2); border-radius:8px; }
.mn-ai .b .c pre, .mn-ai .b .c code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.mn-ai .b .c pre { overflow:auto; background:#0b1220; color:#e5e7eb; padding:10px 12px; border-radius:10px; border:1px solid #111827; }
.mn-ai .b .c table { width:100%; border-collapse: collapse; margin:8px 0; }
.mn-ai .b .c table th, .mn-ai .b .c table td { border:1px solid var(--mn-ai-border); padding:8px 10px; text-align:left; }
.mn-ai .b .c table th { background: var(--mn-ai-surface-2); font-weight:800; }
.mn-ai .b .c .table-wrap { overflow:auto; border:1px solid var(--mn-ai-border); border-radius:10px; }
.mn-ai .b .t { display: none; }
.mn-ai .me .a { background: linear-gradient(135deg,var(--mn-ai-success),#22c55e); box-shadow: 0 6px 16px rgba(34,197,94,.25); }
.mn-ai .me .c { background: linear-gradient(180deg,#f0fff4,var(--mn-ai-surface)); border-color: rgba(34,197,94,.18); }

/* Araçlar kaldırıldı */
.mn-ai .tools, .mn-ai .tool { display: none !important; }

/* Yazıyor durumu */
.mn-ai .typing .c { background: rgba(124,58,237,.06); border:1px solid rgba(124,58,237,.14); }
.mn-ai .typing .dots{ display:inline-flex; align-items:center; gap:8px; }
.mn-ai .typing .dot{ width:8px; height:8px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #a78bfa, #7c3aed); opacity:.85; animation: mnBounce 1.2s infinite; }
.mn-ai .typing .dot:nth-child(2){ animation-delay:.15s }
.mn-ai .typing .dot:nth-child(3){ animation-delay:.3s }

@keyframes mnBounce{ 0%,80%,100%{ transform: translateY(0); opacity:.4;} 40%{ transform: translateY(-4px); opacity:1; } }
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

.mn-ai .mn-inp { display:flex; gap:8px; padding: 12px; border-top: 1px solid var(--mn-ai-border); background: var(--mn-ai-surface-2); }
.mn-ai .mn-inp input { flex:1; height:48px; border-radius:12px; border:1px solid var(--mn-ai-border); background:var(--mn-ai-surface); color:var(--mn-ai-text); padding:0 14px; font-size:16px; }
.mn-ai .mn-inp input::placeholder{ color:#9aa4b2; }
.mn-ai .mn-inp button { height:48px; border-radius:12px; border:0; background:linear-gradient(135deg,var(--mn-ai-brand-1),var(--mn-ai-brand-2)); color:#fff; font-weight:800; padding:0 16px; cursor:pointer; box-shadow:0 10px 26px rgba(99,102,241,.25); font-size:14px; }

/* Toast */
.mn-ai .mn-toast { position:absolute; left:50%; transform:translateX(-50%); bottom: 72px; background:#111827; color:#fff; border-radius:10px; padding:8px 12px; font-size:12px; box-shadow:0 10px 24px rgba(0,0,0,.25); display:none; }

/* Responsive */
@media (max-width: 520px){
  .mn-ai .mn-panel { width: 100vw; left: 0; right: 0; }
  .mn-ai .mn-msgs { height: calc(100dvh - 56px - 68px - env(safe-area-inset-bottom, 0px)); }
  .mn-ai .mn-inp { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .mn-ai .mn-inp input { font-size: 16px; }
}

/* İçeriği merkezle ve satır genişliğini kısıtla */
.mn-ai .mn-sugs, .mn-ai .mn-msgs { max-width: 720px; margin-left: auto; margin-right: auto; width: 100%; }