/* الأساس: إعادة ضبط، خطوط، ومكوّنات صغيرة مشتركة (سطح عايم، زرار أيقونة، علامة بومو، علم) */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }

body {
  overflow: hidden;
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--transition-slow), color var(--transition-slow);
}

button, input, textarea, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; cursor: pointer; }
a { color: inherit; }
svg { display: block; }

::selection { background: var(--accent-soft); color: var(--text-primary); }

* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
textarea:focus-visible, input:focus-visible { outline: none; }

/* ── سطح عايم: القوايم والنوافذ اللي فوق الصفحة ── */
.float {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

/* ── الأيقونات: شبكة 24 وسُمك واحد ── */
.icon { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 14px; height: 14px; }

.icon-btn {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn.done { color: var(--success); }

/* ── علامة بومو: فقاعة كلام بنجمة ثمانية مفرّغة على بلاطة بلون الدولة ── */
.orb {
  --size: 26px;
  display: inline-grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  flex: 0 0 var(--size);
  border-radius: 28%;
  color: #fff;
  background: var(--accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18);
}
.orb[data-size="xs"] { --size: 20px; border-radius: 27%; }
.orb[data-size="md"] { --size: 40px; }
.orb[data-size="lg"] { --size: 56px; }

.mark-glyph { width: 64%; height: 64%; transition: transform var(--transition-normal); }
.mark-bubble { fill: currentColor; }

/* بومو شغّال: البلاطة بتتنفّس بهدوء (زي نجمة Claude) */
.orb:is([data-state="thinking"], [data-state="generating"]) .mark-glyph { animation: mark-breathe 1.8s var(--ease-soft) infinite; }
.orb[data-state="generating"] .mark-glyph { animation-duration: 1.1s; }
@keyframes mark-breathe { 50% { transform: scale(0.82) rotate(-8deg); } }
.orb[data-state="done"] { animation: mark-pop 520ms var(--ease) 1; }
@keyframes mark-pop { 40% { transform: scale(1.1); } }
.orb[data-state="error"] { background: var(--danger); }

/* ── علم مصغّر ── */
.flag {
  width: 18px;
  height: 12px;
  flex: 0 0 18px;
  border-radius: 3px;
  overflow: hidden;
  display: grid;
  grid-auto-rows: 1fr;
  box-shadow: 0 0 0 1px var(--border-strong);
}
.flag i { display: block; }
.flag.auto { background: conic-gradient(from 210deg, var(--accent), var(--accent-ink), var(--accent)); }

/* ── نص بلمعة بتعدّي عليه: «بومو شغّال» ── */
.shimmer {
  background: linear-gradient(100deg, var(--text-muted) 35%, var(--text-primary) 50%, var(--text-muted) 65%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2.4s linear infinite;
}
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

@keyframes fade-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(4px) scale(0.985); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}