/* TEsla Chatbox – Tesla Assist tarzı minimal UI */
:root {
  --bg: #0a0a0a;
  --surface: #1a1a1a;
  --surface-2: #242424;
  --text: #f5f5f5;
  --text-dim: #b4b4b4;
  --muted: #707070;
  --border: #2a2a2a;
  --bubble: #2a2a2a;
  --brand: #10a37f;
  --danger: #ef4444;
}
body.light {
  --bg: #ffffff;
  --surface: #f7f7f8;
  --surface-2: #ececec;
  --text: #111;
  --text-dim: #444;
  --muted: #888;
  --border: #e5e5e5;
  --bubble: #f1f1f1;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---- LAYOUT ---- */
.app{
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;
  max-width:720px;margin:0 auto;
  position:relative;
}

/* ---- HEADER ---- */
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;position:relative;
  min-height:56px;
}
.header .title{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:17px;font-weight:600;display:flex;align-items:center;gap:4px;
  white-space:nowrap;
}
.header .title .spark{font-size:12px;line-height:1;color:var(--brand)}
.icon-btn{
  background:none;border:0;color:var(--text-dim);cursor:pointer;
  width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.icon-btn:hover{background:var(--surface)}

/* ---- MESSAGES ---- */
.messages{
  flex:1;overflow-y:auto;padding:8px 20px 20px;
  display:flex;flex-direction:column;gap:4px;
  scrollbar-width:thin;
}
.messages::-webkit-scrollbar{width:6px}
.messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* Bot mesajı (sol, baloncusuz) */
.msg.bot{align-self:flex-start;max-width:92%;padding:6px 0 10px}
.msg.bot .body{font-size:15px;line-height:1.5;color:var(--text);white-space:pre-wrap;word-wrap:break-word}
.msg.bot .actions{
  display:flex;gap:4px;margin-top:8px;opacity:.85;
}
.msg.bot .actions .icon-btn{width:28px;height:28px}
.msg.bot .actions .icon-btn svg{width:16px;height:16px}

/* Kullanıcı mesajı (sağ, gri baloncuk) */
.msg.user{align-self:flex-end;max-width:85%;padding:2px 0}
.msg.user .bubble{
  background:var(--bubble);color:var(--text);
  padding:10px 16px;border-radius:18px;font-size:15px;line-height:1.45;
  white-space:pre-wrap;word-wrap:break-word;
}

/* Chip (akış seçimi) — kullanıcı mesajı gibi sağa yaslı, tıklanabilir */
.chip{
  align-self:flex-end;max-width:85%;margin:2px 0;
  background:transparent;border:1px solid var(--border);
  color:var(--text);padding:10px 16px;border-radius:18px;
  font-size:14.5px;text-align:left;cursor:pointer;
  transition:background .15s, border-color .15s;
  font-family:inherit;line-height:1.35;
}
.chip:hover{background:var(--surface);border-color:var(--muted)}
.chip:active{background:var(--surface-2)}
.chip-group{display:flex;flex-direction:column;gap:6px;align-items:flex-end;padding:6px 0 12px}

/* Typing */
.typing{display:inline-flex;gap:4px;align-items:center;height:22px;padding-top:4px}
.typing span{
  width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:bounce 1.2s infinite ease-in-out;
}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{transform:scale(.55);opacity:.4}40%{transform:scale(1);opacity:1}}

/* Greeting (boş durum) */
.greeting{
  padding:8px 0 12px;font-size:15px;color:var(--text);line-height:1.5;
}

/* ---- COMPOSER ---- */
.composer{
  padding:8px 14px 14px;
  padding-bottom:max(14px, env(safe-area-inset-bottom));
}
.composer-inner{
  background:var(--surface);border:1px solid var(--border);
  border-radius:22px;padding:6px;
  display:flex;align-items:flex-end;gap:6px;
  transition:border-color .15s;
}
.composer-inner:focus-within{border-color:var(--muted)}
.composer textarea{
  flex:1;resize:none;border:0;outline:0;background:transparent;color:var(--text);
  font-family:inherit;font-size:15px;line-height:1.45;max-height:160px;
  padding:10px 8px 10px 12px;
}
.composer textarea::placeholder{color:var(--muted)}
.round-btn{
  width:36px;height:36px;border-radius:50%;
  border:0;cursor:pointer;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--text-dim);
  transition:background .15s, color .15s;
}
.round-btn:hover:not(:disabled){background:var(--bubble);color:var(--text)}
.send-btn{background:var(--brand);color:#fff}
.send-btn:hover:not(:disabled){background:#0d8a6b;color:#fff}
.round-btn:disabled{opacity:.5;cursor:not-allowed}

/* Modal (login/kayıt) */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100;
  display:none;align-items:center;justify-content:center;padding:16px;
}
.modal-backdrop.open{display:flex}
.modal{
  background:var(--bg);border:1px solid var(--border);border-radius:16px;
  padding:24px;width:100%;max-width:400px;
}
.modal h3{margin:0 0 16px;font-size:17px}
.modal label{display:block;font-size:13px;color:var(--muted);margin:10px 0 6px}
.modal input{
  width:100%;padding:10px 12px;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:14px;
}
.modal .actions{display:flex;gap:8px;margin-top:18px;justify-content:flex-end}
.btn{padding:9px 14px;border-radius:10px;border:0;cursor:pointer;font-size:14px;font-weight:500;font-family:inherit}
.btn.primary{background:var(--brand);color:#fff}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.tab-switch{display:flex;gap:6px;margin-bottom:16px}
.tab-switch button{flex:1;background:transparent;border:1px solid var(--border);color:var(--text);padding:8px;border-radius:10px;cursor:pointer;font-size:13px;font-family:inherit}
.tab-switch button.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.modal .err{color:var(--danger);font-size:13px;margin-top:8px;min-height:18px}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:80px;transform:translateX(-50%);
  background:var(--surface-2);color:var(--text);padding:10px 18px;border-radius:24px;
  font-size:13px;border:1px solid var(--border);
  opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;
  z-index:200;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

@media (max-width:420px){
  .messages{padding:4px 14px 16px}
  .header{padding:14px 14px}
  .composer{padding:6px 10px 12px}
}