* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
:root {
  --bg: #12151a; --card: #1b2027; --card2: #232a33;
  --text: #e8e6e2; --mut: #8b949e; --acc: #d97650;
  --ok: #4cc38a; --down: #e5534b; --border: #2c333d;
}
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
}
button:active, .card:active, .rowitem:active { transform: scale(.97); }
button, .card, .rowitem { transition: transform .08s ease, opacity .15s ease; }
#app { max-width: 720px; margin: 0 auto; min-height: 100dvh;
       display: flex; flex-direction: column; }
a { color: var(--acc); text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; border-radius: 10px; }

.topbar { display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: rgba(18,21,26,.82); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); z-index: 5; }
.topbar h1 { font-size: 17px; font-weight: 600; flex: 1; }
.topbar .sub { color: var(--mut); font-size: 12px; font-weight: 400; }
.iconbtn { background: none; color: var(--mut); font-size: 20px;
  padding: 6px 10px; }

.login { margin: auto; width: 100%; max-width: 320px; padding: 24px;
  display: flex; flex-direction: column; gap: 12px; }
.login h1 { font-size: 20px; text-align: center; margin-bottom: 8px; }
input, select, textarea { width: 100%; padding: 12px 14px; font: inherit;
  color: var(--text); background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; outline: none; }
input:focus, textarea:focus { border-color: var(--acc); }
.btn { background: var(--acc); color: #fff; padding: 12px 16px;
  font-weight: 600; }
.btn.sec { background: var(--card2); color: var(--text); }
.err { color: var(--down); font-size: 14px; min-height: 20px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 14px 16px; }
.card { background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px; display: flex;
  flex-direction: column; gap: 4px; min-height: 92px; position: relative; }
.card.wide { grid-column: 1 / -1; border-color: var(--acc); }
.card .nm { font-weight: 600; font-size: 15px; }
.card .ds { color: var(--mut); font-size: 12px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block;
  margin-right: 6px; }
.dot.ok { background: var(--ok); } .dot.down { background: var(--down); }
.card .act { position: absolute; top: 10px; right: 12px; color: var(--mut);
  font-size: 18px; background: none; }
.sect { padding: 12px 16px 4px; color: var(--mut); font-size: 13px;
  text-transform: uppercase; letter-spacing: .5px; }

.list { display: flex; flex-direction: column; }
.rowitem { display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--border); color: var(--text); }
.rowitem .nm { flex: 1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.rowitem .sub { color: var(--mut); font-size: 12px; }
.livedot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok); margin-right: 6px; vertical-align: middle;
  animation: pulse 1.4s ease-in-out infinite; }
.live { color: var(--ok); font-weight: 600; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.msgs { flex: 1; display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; overflow-y: auto; }
.m { max-width: 88%; padding: 10px 14px; border-radius: 14px;
  font-size: 15px; white-space: pre-wrap; word-break: break-word; }
.m.user { align-self: flex-end; background: var(--acc); color: #fff; }
.m.assistant { align-self: flex-start; background: var(--card); }
.m.tool { align-self: flex-start; background: none; color: var(--mut);
  font-family: ui-monospace, monospace; font-size: 12px; padding: 0 6px; }
.m.error { align-self: flex-start; background: #3a2226; color: #f0a8a2; }
.typing { align-self: flex-start; display: flex; gap: 5px; padding: 8px 10px; }
.typing span { width: 7px; height: 7px; border-radius: 50%;
  background: var(--mut); opacity: .4; animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); } }

.composer { display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px; border-top: 1px solid var(--border);
  position: sticky; bottom: 0;
  background: rgba(18,21,26,.9); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.ctrls { display: flex; gap: 8px; align-items: center; }
.inputrow { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { flex: 1; resize: none; min-height: 78px; max-height: 260px;
  border-radius: 22px; padding: 11px 16px; }
.modelbadge { font-size: 12px; font-weight: 600; letter-spacing: .2px;
  color: var(--acc); background: rgba(217,118,80,.14);
  border: 1px solid rgba(217,118,80,.32); border-radius: 999px;
  padding: 5px 12px; white-space: nowrap; }
.pick { width: auto; padding: 6px 28px 6px 12px; font-size: 12px;
  border-radius: 999px; background: var(--card2); color: var(--text);
  border: 1px solid var(--border); -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--mut) 50%),
    linear-gradient(135deg, var(--mut) 50%, transparent 50%);
  background-position: right 13px center, right 8px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.pick:focus { border-color: var(--acc); }
.send { background: var(--acc); color: #fff; width: 44px; height: 44px;
  border-radius: 50%; font-size: 18px; flex-shrink: 0; }
.send:disabled { opacity: .5; }
.attach { background: var(--card2); color: var(--text); width: 40px;
  height: 34px; border-radius: 10px; font-size: 17px; flex-shrink: 0; }
.m.tool .tname { color: var(--acc); font-weight: 600; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 16px 0; }
.chip { background: var(--card2); border-radius: 8px; padding: 4px 10px;
  font-size: 12px; display: flex; gap: 6px; align-items: center; }
.chip b { cursor: pointer; color: var(--mut); font-weight: 400; }
.newchat { padding: 16px; display: flex; flex-direction: column; gap: 10px; }

/* Her label büyük harfle başlasın */
.btn, .iconbtn, .card .nm, .modelbadge, .newchat label,
.stat .statrow span { text-transform: capitalize; }

/* Sesli mesaj / dikte butonu aktif durumu */
.attach.rec { background: var(--down); color: #fff; }

/* Sunucu istatistik paneli */
.sys .stats { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.stat .statrow { display: flex; justify-content: space-between; font-size: 12px;
  color: var(--mut); }
.bar { height: 6px; background: var(--card2); border-radius: 999px;
  overflow: hidden; margin-top: 3px; }
.bar i { display: block; height: 100%; background: var(--ok);
  border-radius: 999px; transition: width .4s ease; }
.bar i.hot { background: var(--down); }