/* What the web adds to the offline studio's stylesheet (ui/studio.css): a Persian font a browser
   may not have, the page height on phones, and the account card in the sidebar. */

html[lang="fa"] { --font: Vazirmatn, "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif; }
.app { height: 100dvh; }

.side-foot .engine .avatar { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; object-fit: cover;
  display: grid; place-items: center; background: var(--panel-2); color: var(--muted); font-size: 12px; font-weight: 600; }
.state.online { color: var(--ok, #1a7f37); }

.usage { margin-top: 6px; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.usage i { display: block; height: 100%; background: var(--accent); }

/* Phones: the sidebar floats over a dimmed page that closes it when tapped; the composer's tools
   fit one row; "Enter sends" is not true on a touch keyboard. */
.side-scrim { display: none; }
@media (max-width: 980px) {
  .app.side-open .side-scrim { display: block; position: fixed; inset: 0; z-index: 149; background: rgba(0, 0, 0, .4); }
}
@media (max-width: 480px) {
  .bar { gap: 2px; padding: 6px 6px 8px; }
  .bar .tool { padding: 0 7px; gap: 4px; }

}
@media (pointer: coarse) {
  #foot .ltr { display: none; }
}

/* An attached image, as a small picture in its chip. */
.file-chip .thumb { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; flex: none; border: 1px solid var(--line); }

.boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); color: var(--muted); z-index: 400; }
.boot .spinner { width: 22px; height: 22px; }