/* LUNAHAN — Zapia tarzı arayüz katmanı (app.css sonrası yüklenir) */
:root{
  --z-bg:#ffffff; --z-soft:#f8f8f7; --z-line:#ececea; --z-text:#1c1917; --z-muted:#78716c;
  --z-accent:#0f766e; --z-accent-soft:#e6f4f1; --z-radius:20px;
}
html.dark{ --z-bg:#0b1220; --z-soft:#101a2b; --z-line:#1e293b; --z-text:#e2e8f0; --z-muted:#94a3b8; --z-accent:#2dd4bf; --z-accent-soft:#0f2f2c; }

#app{background:var(--z-soft)}
#app main{background:var(--z-bg)}

/* ---------------- sidebar ---------------- */
#sidebar{
  width:264px !important; background:var(--z-bg) !important; border-right:1px solid var(--z-line) !important;
  box-shadow:none !important;
}
#sidebar > div:first-child{ padding:18px 16px 12px !important; border-bottom:0 !important; }
#sidebar > div:first-child a{ flex-direction:row !important; justify-content:flex-start !important; gap:10px !important; }
#sidebar > div:first-child img{ height:28px !important; }
#sidebar > div:first-child span{ font-size:15px !important; font-weight:700 !important; letter-spacing:-.01em; }
#sidebar nav{ padding:6px 10px 10px !important; }
#sidebar nav > div:first-child{ display:none !important; }  /* Menü / sırala başlığı */
.s-item{
  gap:10px !important; padding:9px 10px !important; border-radius:10px !important;
  font-size:13.5px !important; font-weight:500 !important; color:var(--z-text) !important;
  border:1px solid transparent;
}
.s-item:hover{ background:var(--z-soft) !important; color:var(--z-text) !important; }
.s-item[class*="bg-primary"]{ background:var(--z-accent-soft) !important; color:var(--z-accent) !important; border-color:transparent !important; }
.s-item .s-handle{ display:none !important; }
.s-item i{ font-size:17px !important; opacity:.8; }
#sidebar > div:last-child{ border-top:1px solid var(--z-line) !important; padding:12px 12px 14px !important; }
#sidebar > div:last-child > div:last-child{ background:var(--z-soft); border:1px solid var(--z-line); border-radius:14px; padding:9px 10px; }

/* ---------------- konuşma sütunu ---------------- */
.chat-wrap{ display:flex; width:100%; height:100%; background:var(--z-bg); gap:0 !important; }
.chat-shell{ border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; overflow:visible !important; height:100%; }
.chat-shell.lh-empty-chat{ justify-content:center; }
.chat-shell.lh-empty-chat #feed{ flex:0 0 auto; overflow:visible; }
.chat-shell.lh-empty-chat .composer{ margin-top:0 !important; }
.conv-col{
  width:236px; flex:0 0 236px; background:var(--z-soft) !important; border-right:1px solid var(--z-line) !important;
  padding:14px 12px !important; gap:8px !important;
}
#convNew{
  background:var(--z-accent) !important; color:#fff !important; border:0 !important; border-radius:999px !important;
  padding:11px 14px !important; font-size:13px !important; font-weight:650 !important; text-align:left;
  box-shadow:0 4px 14px rgba(15,118,110,.22); margin-bottom:12px;
}
#convNew:hover{ filter:brightness(1.06); }
.conv-list{ gap:2px !important; }
.conv-list .conv-item, .conv-list > *{
  border-radius:10px !important; padding:8px 10px !important; font-size:13px !important;
}
.conv-list > *:hover{ background:#ffffff !important; }
.conv-col .conv-title, .conv-col .ct{ font-size:13px !important; }

/* ---------------- sohbet ---------------- */
.chat-shell{
  flex:1; min-width:0; display:flex; flex-direction:column;
  max-width:860px; margin:0 auto; padding:26px 22px 18px !important; width:100%;
}
#feed{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:14px; padding:6px 4px 20px !important; scroll-behavior:smooth; }
.msg{ max-width:78% !important; padding:12px 15px !important; font-size:14.5px !important; line-height:1.62 !important; border-radius:18px !important; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.msg.bot{ align-self:flex-start; background:var(--z-soft) !important; color:var(--z-text) !important; border:1px solid var(--z-line); border-bottom-left-radius:6px !important; }
.msg.me{ align-self:flex-end; background:var(--z-accent) !important; color:#fff !important; border-bottom-right-radius:6px !important; }
.msg .tools{ font-size:11.5px; opacity:.7; margin-top:6px; }

/* karşılama */
#lhGreeting{ text-align:center; margin:10vh auto 22px; max-width:620px; }
#lhGreeting h1{ font-size:31px; line-height:1.22; letter-spacing:-.025em; font-weight:650; color:var(--z-text); margin:0 0 10px; }
#lhGreeting p{ font-size:14px; color:var(--z-muted); margin:0; }

/* composer */
.composer{
  margin-top:auto !important; display:grid !important; grid-template-columns:auto 1fr auto auto;
  grid-template-areas:"text text text text" "attach . mic send"; align-items:end; gap:8px 10px;
  background:var(--z-bg) !important; border:1px solid var(--z-line) !important; border-radius:24px !important;
  padding:14px 14px 12px 18px !important; box-shadow:0 10px 40px rgba(15,23,42,.07) !important;
}
.composer textarea#cmd{
  grid-area:text; border:0 !important; background:transparent !important; resize:none !important;
  font-size:15.5px !important; line-height:1.5 !important; padding:2px 0 6px !important; min-height:46px; color:var(--z-text);
  box-shadow:none !important; outline:none !important;
}
.composer textarea#cmd::placeholder{ color:#a8a29e; }
#attach{grid-area:attach; justify-self:start}
#mic{grid-area:mic; justify-self:end}
#send{grid-area:send; justify-self:end}
.composer .mic{
  width:38px !important; height:38px !important; border-radius:999px !important; border:1px solid var(--z-line) !important;
  background:var(--z-soft) !important; color:var(--z-text) !important; display:inline-flex; align-items:center; justify-content:center;
  padding:0 !important; font-size:16px !important;
}
.composer #mic{ width:42px !important; height:42px !important; background:var(--z-accent) !important; border-color:var(--z-accent) !important; color:#fff !important; }
.composer #send{
  width:42px !important; height:42px !important; border-radius:999px !important; background:var(--z-accent) !important;
  color:#fff !important; border:0 !important; display:inline-flex; align-items:center; justify-content:center;
  font-size:0 !important; padding:0 !important; margin-left:2px;
}
.composer #send::before{ content:none; }
.composer #send .lh-i{ width:20px; height:20px; stroke-width:2.4; }
.composer .mic .lh-i{ width:18px; height:18px; }
.composer #send:hover{ filter:brightness(1.08); }
.hint{ font-size:12px; color:var(--z-muted); }

/* öneriler */
#lhSuggestions{ margin:18px 0 4px; }
#lhSuggestions .z-sugg{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:transparent; border:0;
  border-bottom:1px solid var(--z-line); padding:14px 6px; cursor:pointer; color:var(--z-text);
  font-size:14px; transition:background .12s ease;
}
#lhSuggestions .z-sugg:last-child{ border-bottom:0; }
#lhSuggestions .z-sugg:hover{ background:var(--z-soft); border-radius:10px; }
#lhSuggestions .z-sugg__icon{ width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto; color:var(--z-accent); }
#lhSuggestions .z-sugg__icon .lh-i{ width:19px; height:19px; stroke-width:1.85; }
#lhSuggestions .z-sugg__text{ flex:1; }
#lhSuggestions .z-sugg__hint{ font-size:12px; color:var(--z-muted); }

/* ---------------- mobil ---------------- */
@media (max-width:1023px){
  .chat-wrap{ flex-direction:column; }
  .conv-col{ display:flex !important; width:100%; flex:0 0 auto; max-height:150px; border-right:0 !important; border-bottom:1px solid var(--z-line); padding:8px 12px !important; }
  .conv-col #convNew{ margin:0 0 8px; }
  .conv-list{ display:flex !important; gap:6px; overflow-x:auto; }
  .conv-list > *{ flex:0 0 auto; max-width:240px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .chat-shell{ padding:16px 14px 12px !important; }
  #lhGreeting{ margin:6vh auto 16px; }
  #lhGreeting h1{ font-size:24px; }
  .msg{ max-width:88% !important; }
  .composer{ border-radius:20px !important; padding:12px 12px 10px 14px !important; }
}

/* dark uyumu */
html.dark #convNew{ box-shadow:none; }
html.dark .conv-list > *:hover{ background:#16233a !important; }
html.dark .composer textarea#cmd::placeholder{ color:#64748b; }