:root{
  --bg:#0b1020;
  --panel:#0f1730;
  --card:#111b38;
  --border:rgba(255,255,255,.08);
  --text:rgba(233,238,252,.92);
  --muted:rgba(233,238,252,.62);
  --muted2:rgba(233,238,252,.48);
  --ok:rgba(34,197,94,.18);
  --warn:rgba(245,158,11,.18);
  --bad:rgba(239,68,68,.18);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --r:16px;
  --r2:22px;
}

.comment_imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

/* Firefox */
html{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) rgba(255,255,255,.06);
}

/* Chrome/Edge/Safari */
*::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track{
  background: rgba(255,255,255,.05);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(96,165,250,.55), rgba(167,139,250,.55));
  border-radius: 999px;
  border: 2px solid rgba(11,18,32,.85);
}

*::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(96,165,250,.75), rgba(167,139,250,.75));
}

*::-webkit-scrollbar-corner{
  background: transparent;
}
.textarea_response{
  width:100%;
  min-height:44px;
  resize:none;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:rgba(233,238,252,.92);
  padding:12px 12px;
  outline:none;
  line-height:1.45;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
}

.textarea_response:focus{
  border-color:rgba(157,178,191,.55);
  background:rgba(255,255,255,.06);
}

.rowBtns{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
  align-items:center;
}

.blockText{
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.55;
  color:rgba(233,238,252,.88);
}

@media (max-width: 920px){
  .rowBtns{
    gap:8px;
  }
  .textarea_response{
    padding:11px 11px;
  }
}

.comment_img_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(233,238,252,.9);
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
}

.comment_img_link:hover {
  border-color: rgba(255,255,255,.22);
}


*{box-sizing:border-box}
body{
  margin:0;
  background:radial-gradient(1200px 600px at 20% -10%, rgba(99,102,241,.22), transparent 60%),
             radial-gradient(900px 600px at 80% 10%, rgba(16,185,129,.14), transparent 55%),
             var(--bg);
  color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* ===== Ayarlar Paneli (Yeni Eklenen Alan) ===== */

.panel-section .panel-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

#aiPrompt {
  background: linear-gradient(180deg, #0f172a, #0b1220);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 10px 12px;
  color: #e9ecf1;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  min-height: 200px;
  transition: border .15s ease, box-shadow .15s ease, background .15s ease;
}

#aiPrompt::placeholder {
  color: rgba(233,236,241,.35);
}

#aiPrompt:focus {
  background: #0f172a;
  border-color: #5b8dff;
  box-shadow: 0 0 0 2px rgba(91,141,255,.25);
}

/* Save / Logout button spacing */
.panel-section .grid2 {
  margin-top: 10px;
}

/* Divider */
.panel-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.15),
    rgba(255,255,255,0)
  );
  margin: 14px 0;
}

/* Token stats */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stat {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px 12px;
}

.stat-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(233,236,241,.6);
  margin-bottom: 4px;
}

.stat-value {
  font-size: 16px;
  font-weight: 900;
  color: #e9ecf1;
  letter-spacing: .02em;
}

/* Logout button visual distinction */
#logout {
  border-color: rgba(255,255,255,.2);
  color: rgba(233,236,241,.85);
}

#logout:hover {
  background: rgba(255,255,255,.06);
}

/* Save button emphasis */
#savePrompt {
  background: linear-gradient(180deg, #4f8cff, #3b6eea);
  border: none;
}

#savePrompt:hover {
  filter: brightness(1.05);
}


.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid var(--border);
  background:rgba(10,14,28,.72);
  backdrop-filter:blur(10px);
  position:sticky;
  top:0;
  z-index:5;
}

.brand{display:flex;gap:12px;align-items:center}
.logo{
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(99,102,241,.75), rgba(16,185,129,.55));
  font-weight:900;
}
.title{font-size:14px;font-weight:900;letter-spacing:.2px}
.subtitle{font-size:12px;color:var(--muted);margin-top:2px}

.stats{display:flex;gap:10px}
.stat{
  padding:10px 12px;border:1px solid var(--border);
  border-radius:14px;background:rgba(255,255,255,.03);
  min-width:112px;
}
.stat-k{font-size:11px;color:var(--muted2);font-weight:800}
.stat-v{font-size:16px;font-weight:900;margin-top:4px}

.layout{display:grid;grid-template-columns:320px 1fr;min-height:calc(100vh - 72px)}
.panel{
  padding:16px;
  border-right:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 35%);
}
.panel-section{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:14px;
  box-shadow:var(--shadow);
}
.panel-section + .panel-section{margin-top:14px}
.panel-title{font-size:12px;font-weight:900;color:var(--muted);margin-bottom:10px}

.field{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.field span{font-size:11px;color:var(--muted2);font-weight:800}
.field input,.field select{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}
.field.inline{flex-direction:row;align-items:center;gap:10px;margin-top:0}
.field.inline span{margin:0}
.field.inline select{width:200px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check{display:flex;align-items:center;gap:10px;margin-top:12px;color:var(--muted);font-size:12px;font-weight:700}
.check input{width:16px;height:16px}

.btn{
  margin-top:12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(99,102,241,.18);
  color:var(--text);
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
}
.btn:hover{filter:brightness(1.1)}
.btn-ghost{background:rgba(255,255,255,.04)}
.hint{margin-top:10px;font-size:12px;color:var(--muted)}

.main{padding:16px}
.toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:12px;
}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  font-size:12px;font-weight:900;color:var(--muted);
}
.list{display:flex;flex-direction:column;gap:12px}

.card{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:var(--r2);
  padding:14px;
  box-shadow:var(--shadow);
}
.row{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tag{
  font-size:11px;font-weight:900;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  background:rgba(255,255,255,.03);
}
.tag.bad{background:var(--bad);color:rgba(255,255,255,.92)}
.tag.warn{background:var(--warn);color:rgba(255,255,255,.92)}
.tag.ok{background:var(--ok);color:rgba(255,255,255,.92)}

.actions{display:flex;gap:8px;align-items:center}
.smallbtn{
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:8px 10px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}
.smallbtn:hover{filter:brightness(1.1)}
.smallbtn.primary{background:rgba(16,185,129,.18)}
.smallbtn.danger{background:rgba(239,68,68,.16)}
.text{
  margin-top:10px;
  white-space:pre-wrap;
  color:var(--text);
  font-size:13px;
  line-height:1.45;
}
.reply{
  margin-top:10px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(99,102,241,.10);
  padding:10px 12px;
}
.reply .h{font-size:11px;color:var(--muted2);font-weight:900;margin-bottom:6px}
.reply .b{white-space:pre-wrap;font-size:13px;line-height:1.45}
.footer{
  margin-top:10px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:var(--muted2);font-size:11px;font-weight:800;
}
a{color:rgba(99,102,241,.95);text-decoration:none}
a:hover{text-decoration:underline}

option {
    background-color: #0b1020;
    color: white;
}

.atx-brandMark {
  height: 30px;
  width: 30px;
}

.panel-contact .contact-box{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px 14px;
}

.panel-contact .contact-text{
  font-size: 12px;
  line-height: 1.45;
  color: rgba(233,238,252,.75);
  margin-bottom: 10px;
}

.panel-contact .contact-mail{
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #8ab4ff;
  text-decoration: none;
}

.panel-contact .contact-mail:hover{
  text-decoration: underline;
}


.textarea_response{
  width:100%;
  display:block;
  box-sizing:border-box;

  min-height:84px;
  height:auto;
  overflow:hidden;
  resize:none;

  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;

  background:rgba(12,16,28,.85);
  color:rgba(233,238,252,.92);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:12px 14px;
  line-height:1.55;
  font:inherit;

  outline:none;
  -webkit-text-fill-color:rgba(233,238,252,.92);
}

.textarea_response:focus{
  border-color:rgba(255,255,255,.22);
  box-shadow:0 0 0 3px rgba(255,255,255,.08);
}

.textarea_response::selection{
  background:rgba(255,255,255,.18);
}