:root {
  --bg: #0e0f13;
  --panel: #171920;
  --panel-2: #1e212a;
  --line: #2a2e3a;
  --text: #eceef3;
  --muted: #8d93a3;
  --accent: #f2b544;
  --accent-ink: #1a1304;
  --danger: #ff7a7a;
  --radius: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Vazirmatn, "Vazir", "IRANSans", "Segoe UI", Tahoma, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
}
[hidden] { display: none !important; }
h1 { font-size: 22px; margin: 6px 0 2px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
.error { color: var(--danger); margin: 8px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 13.5px; }
.error:empty { display: none; }
.mark { color: var(--accent); font-size: 30px; line-height: 1; }
.mark.small { font-size: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }

/* buttons & inputs */
button, .btn { font: inherit; cursor: pointer; border-radius: 10px; border: 1px solid transparent; text-decoration: none; display: inline-block; }
.primary { background: var(--accent); color: var(--accent-ink); font-weight: 700; padding: 9px 20px; }
.primary:hover { filter: brightness(1.07); }
.primary:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.ghost { background: transparent; color: var(--muted); border-color: var(--line); padding: 6px 14px; }
.ghost:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
textarea, input[type=password] {
  width: 100%; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px;
  font: inherit; outline: none; resize: none;
}
textarea:focus, input:focus { border-color: var(--accent); }

/* login */
.center { min-height: 100%; display: grid; place-items: center; padding: 20px; }
.login-card { width: min(380px, 100%); text-align: center; display: grid; gap: 10px; padding: 24px; }

/* layout */
.app { display: grid; grid-template-columns: 270px minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; }
.side { border-inline-end: 1px solid var(--line); background: #121319; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.brand { font-weight: 700; display: flex; align-items: center; gap: 8px; padding: 2px 4px 6px; }
.chats { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.chat-item { display: flex; align-items: stretch; border-radius: 10px; border: 1px solid transparent; }
.chat-item:hover { background: var(--panel); }
.chat-item.active { background: var(--panel-2); border-color: var(--line); }
.chat-open { flex: 1; min-width: 0; text-align: start; background: none; color: var(--text); padding: 8px 10px; border: 0; }
.chat-open .t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.chat-open .s { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-del { background: none; color: var(--muted); border: 0; padding: 0 10px; font-size: 12px; opacity: 0; }
.chat-item:hover .chat-del, .chat-del:focus-visible, .chat-del.armed { opacity: 1; }
.chat-del:hover, .chat-del.armed { color: var(--danger); }
.retention { margin: 0; padding: 8px 6px 0; border-top: 1px solid var(--line); }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.thread { flex: 1; overflow-y: auto; padding: 26px 20px 10px; }
.thread > * { max-width: 860px; margin-inline: auto; }
.hello { text-align: center; padding: 12vh 10px 0; max-width: 520px; }

/* one turn = the request + the picture */
.turn { margin-bottom: 26px; }
.bubble {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px;
  padding: 9px 14px; width: fit-content; max-width: 85%; white-space: pre-wrap; word-break: break-word; margin-bottom: 10px;
}
.shot { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.shot img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; border-radius: 9px; background: #000; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 6px 3px; flex-wrap: wrap; }
.meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 8px; }
.pending { display: flex; align-items: center; gap: 14px; padding: 18px; }
.pending .txt { flex: 1; }
.pending .txt b { display: block; font-weight: 600; }
.failed { border-color: #5a2b2b; padding: 14px 16px; }
.failed .error { margin: 0 0 10px; }
.spinner {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

/* composer */
.composer { padding: 8px 20px 18px; }
.composer .card { max-width: 860px; margin-inline: auto; padding: 12px; }
.controls { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 10px; }
.controls .primary { margin-inline-start: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 11px; font-size: 12.5px; direction: ltr;
}
.chip:hover { border-color: #444a5c; }
.chip[aria-checked=true] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }

@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .side { min-width: 0; flex-direction: row; align-items: center; flex-wrap: wrap; padding: 10px 12px; gap: 8px; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0; flex: 1; }
  .side .primary { padding: 6px 12px; font-size: 13px; }
  .chats { order: 5; flex: 0 0 100%; max-width: 100%; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .chat-item { flex: 0 0 170px; }
  .chat-del { opacity: 1; }
  .retention { display: none; }
  #logout { padding: 5px 10px; font-size: 13px; }
  .thread { padding: 16px 12px 6px; }
  .composer { padding: 6px 10px 12px; }
  #sizeHint { display: none; }
  .bubble { max-width: 100%; }
}