/*
 * CILTIN — Устаз (sohbet) sayfası stili
 * Ortak bloklar (renkler, header/nav, sidebar/mini-card, footer)
 * artık shared.css'te - bu dosya sadece bu sayfaya özgü.
 */

/* --- Sohbet kutusu --- */
.chat-wrap{padding:20px 0 50px}
.chat-layout{display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:start}
#chat-container{
  width:100%;border:2px solid var(--ink);background:var(--surface);
  display:flex;flex-direction:column;height:68vh;overflow:hidden;
}

#chat-header{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-shrink:0}
#chat-header .avatar{width:40px;height:40px;border-radius:50%;background:var(--copper-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--copper)}
#chat-header .avatar svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
#chat-header .info .title{font-family:'Oswald',sans-serif;font-size:.95rem;letter-spacing:.03em;color:var(--ink);text-transform:none}
#chat-header .info .sub{font-family:'Source Serif 4',serif;font-style:italic;font-size:.78rem;color:var(--ink-dim);display:flex;align-items:center;gap:6px}
#chat-header .info .sub .dot{width:6px;height:6px;border-radius:50%;background:var(--pine)}
#chat-header .info{flex:1;min-width:0}
.chat-banner{
  width:96px;height:44px;flex-shrink:0;margin-left:auto;
  background-size:cover;background-position:center;background-color:var(--copper-soft);
  border:1px solid var(--line);transition:background-image .2s;
}

/* --- Rol menüsü --- */
#role-menu{display:flex;gap:8px;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--line);overflow-x:auto;flex-shrink:0;scrollbar-width:none}
#role-menu::-webkit-scrollbar{display:none}
.role-box{
  flex:0 0 76px;height:70px;background:var(--bg);border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  cursor:pointer;text-align:center;font-family:'Oswald',sans-serif;font-size:.66rem;
  font-weight:600;letter-spacing:.02em;color:var(--ink-dim);transition:.18s;
}
.role-box:hover{border-color:var(--copper);color:var(--copper)}
.role-box.active{border-color:var(--copper);background:var(--copper-soft);color:var(--copper)}
.role-box svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5}

.system-notice{
  align-self:center;text-align:center;color:var(--ink-dim);font-family:'Oswald',sans-serif;
  font-size:.66rem;letter-spacing:.04em;margin:4px 0;background:var(--surface);
  border:1px solid var(--line);padding:4px 14px;
}

#messages{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px;background:var(--bg)}

.msg-row{display:flex;gap:8px;align-items:flex-end}
.msg-row.user{flex-direction:row-reverse}
.bubble-avatar{width:26px;height:26px;border-radius:50%;background:var(--copper-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--copper)}
.bubble-avatar svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}
.bubble-avatar.user-av{background:var(--line);color:var(--ink-dim)}
.msg-col{display:flex;flex-direction:column;max-width:80%}
.msg-row.user .msg-col{align-items:flex-end}

.bubble{padding:10px 14px;font-family:'Source Serif 4',serif;font-size:.92rem;line-height:1.55;word-break:break-word;white-space:pre-wrap}
.bubble.bot{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.bubble.user{background:var(--pine);color:#fff}
.bubble.error{background:#f6e6e2;color:#8a3a24;border:1px solid #e0b7a6}

.bubble-meta{font-family:'Oswald',sans-serif;font-size:.66rem;letter-spacing:.04em;color:var(--ink-dim);margin-top:3px;padding:0 3px;text-transform:uppercase}
.bubble-meta .alt-link{color:var(--copper);text-decoration:none}
.bubble-meta .alt-link:hover{text-decoration:underline}

.typing-bubble{display:flex;align-items:center;gap:5px;padding:12px 16px}
.typing-bubble span{width:6px;height:6px;border-radius:50%;background:var(--ink-dim);display:inline-block;animation:blink 1.2s infinite}
.typing-bubble span:nth-child(2){animation-delay:.2s}
.typing-bubble span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

#quick-btns{padding:8px 16px 12px;display:flex;gap:7px;flex-wrap:wrap;background:var(--bg);border-top:1px solid var(--line);flex-shrink:0}
.quick-btn{font-family:'Oswald',sans-serif;font-size:.68rem;letter-spacing:.03em;color:var(--pine);background:var(--copper-soft);border:1px solid var(--line);padding:6px 12px;cursor:pointer}
.quick-btn:hover{border-color:var(--copper)}

#input-area{padding:13px 16px;background:var(--surface);border-top:1px solid var(--line);display:flex;gap:9px;align-items:center;flex-shrink:0}
#input-wrap{flex:1;display:flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--line);padding:0 14px}
#input-wrap:focus-within{border-color:var(--copper)}
#userInput{flex:1;border:none;background:transparent;outline:none;font-family:'Source Serif 4',serif;font-size:.9rem;color:var(--ink);padding:10px 0}
#userInput::placeholder{color:var(--ink-dim)}
#sendBtn{width:36px;height:36px;background:var(--pine);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#sendBtn:hover{background:#25493a}
#sendBtn svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8}

#ai-notice{padding:8px 16px;background:var(--copper-soft);border-top:1px solid var(--line);text-align:center;font-family:'Source Serif 4',serif;font-style:italic;font-size:.74rem;color:var(--ink-dim);line-height:1.5;flex-shrink:0}

@media(max-width:900px){
  .chat-layout{grid-template-columns:1fr}
}
@media(max-width:600px){
  #chat-container{height:80vh}
}
@media(max-width:480px){
  .wrap{padding:0 12px}
  .msg-col{max-width:92%}
  #chat-container{height:84vh}
  #messages{padding:12px}
  #chat-header{padding:12px 14px}
  #role-menu{padding:8px 10px;gap:6px}
  .role-box{flex:0 0 64px;height:60px}
}

/* --- Yatay (landscape) telefon: viewport YÜKSEKLİĞİ çok kısa oluyor.
   Önceki hallerde #chat-container'ın etrafındaki sabit yükseklikli
   kısımlar (rol menüsü, hızlı butonlar, giriş kutusu, AI notu - hepsi
   flex-shrink:0) TOPLAMDA container'ın kendi yüksekliğinden (80vh) daha
   fazla yer kaplayabiliyordu; esnek olan TEK kısım (#messages, flex:1)
   bu durumda neredeyse sıfıra sıkışıyordu - kullanıcının bildirdiği
   "message kısmı neredeyse gözükmüyor" tam olarak buydu. Burada hem
   çevredeki sabit alanları küçültüyoruz hem de container yüksekliğini
   düz bir vh yerine gerçek viewport yüksekliğine göre hesaplıyoruz. */
@media(max-height:480px) and (orientation:landscape){
  .page-head{padding-top:6px;padding-bottom:2px}
  .page-head .eyebrow{display:none}
  .page-head h1{font-size:1.1rem}
  #chat-container{height:calc(100vh - 60px)}
  #role-menu{padding:5px 10px;gap:5px}
  .role-box{flex:0 0 56px;height:44px;gap:2px}
  .role-box svg{width:15px;height:15px}
  #quick-btns{padding:4px 12px 6px}
  #ai-notice{display:none}
  #input-area{padding:8px 16px}
}