/* ChatPing sandbox: the page model-written widgets and artifacts are drawn in.
   The tokens mirror src/app/globals.css (Claude-style light and dark); the parent switches
   them with a `theme` message (html[data-theme]). Then a small base stylesheet in the manner
   of Claude's visuals, and a fixed subset of Tailwind-like utilities (no runtime Tailwind). */

:root {
  color-scheme: light;
  --radius: 0.75rem;
  --background: #f9f9f7;
  --foreground: #1a1a19;
  --card: #ffffff;
  --card-foreground: #1a1a19;
  --primary: #1a1a19;
  --primary-foreground: #ffffff;
  --secondary: #efeeea;
  --secondary-foreground: #1a1a19;
  --muted: #f0efeb;
  --muted-foreground: #6d6c68;
  --faint: #8f8e89;
  --accent: #f3f2ee;
  --destructive: #c4412f;
  --border: #e3e2de;
  --input: #dcdbd6;
  --field: #ffffff;
  --info: #2c84db;
  --brand: #d97757;
  --brand-foreground: #ffffff;
  --success: #3f8f6b;
  --warning: #b8860b;
  --chart-1: #d97757;
  --chart-2: #2c84db;
  --chart-3: #3f9d78;
  --chart-4: #c9a227;
  --chart-5: #8b6fd1;
  --code: #1f1f1e;
  --font-sans: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --background: #171717;
  --foreground: #ececec;
  --card: #1f1f1f;
  --card-foreground: #ececec;
  --primary: #ececec;
  --primary-foreground: #171717;
  --secondary: #2a2a2a;
  --secondary-foreground: #ececec;
  --muted: #262626;
  --muted-foreground: #9b9b9b;
  --faint: #6f6f6f;
  --accent: #2a2a2a;
  --destructive: #dc5a4f;
  --border: #303030;
  --input: #3a3a3a;
  --field: #2a2a2a;
  --info: #4a90e2;
  --brand: #d97757;
  --success: #5bb58f;
  --warning: #d9b44a;
  --chart-1: #d97757;
  --chart-2: #4a90e2;
  --chart-3: #5bb58f;
  --chart-4: #d9b44a;
  --chart-5: #9d85d9;
  --code: #111111;
}

/* ---------- Base ---------- */

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

html {
  direction: rtl;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  /* The answer's own background shows through */
  background: transparent;
}

body {
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.75;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

#root {
  padding: 2px;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  font-weight: 600;
  line-height: 1.4;
}
h1 { font-size: 1.35rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
h4 { font-size: 0.95rem; }

p { margin: 0 0 0.75em; }
p:last-child { margin-bottom: 0; }

a { color: var(--info); text-decoration: none; }

small, .caption { color: var(--muted-foreground); font-size: 0.8125rem; }

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
  direction: ltr;
  unicode-bidi: isolate;
}
pre {
  margin: 0;
  padding: 0.75rem 1rem;
  overflow: auto;
  border-radius: calc(var(--radius) - 2px);
  background: var(--muted);
  text-align: left;
}

hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }

img, svg, canvas, video { max-width: 100%; }
img, video { height: auto; }
svg { overflow: visible; }
svg text { fill: currentColor; font-family: var(--font-sans); }

table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th, td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); text-align: start; }
th { color: var(--muted-foreground); font-weight: 500; }

button {
  font: inherit;
  color: var(--secondary-foreground);
  background: var(--secondary);
  border: 0;
  border-radius: calc(var(--radius) - 4px);
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: background-color 0.15s;
}
button:hover { background: var(--accent); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 1px;
}
button.primary, .btn-primary { background: var(--primary); color: var(--primary-foreground); }
button:disabled { opacity: 0.5; cursor: default; }

input, select, textarea {
  font: inherit;
  color: var(--foreground);
  background: var(--field);
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 4px);
  padding: 0.35rem 0.6rem;
}
input[type="range"] { padding: 0; border: 0; background: transparent; accent-color: var(--brand); width: 100%; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--info); }
input[type="number"], input[inputmode="numeric"] { direction: ltr; text-align: right; }
label { font-size: 0.875rem; color: var(--muted-foreground); }

/* A card in the manner of Claude's visuals: flat, hairline border */
.card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}

/* Numbers, formulas and code stay left-to-right inside Persian text */
.ltr, bdi.num { direction: ltr; unicode-bidi: isolate; }

/* ---------- The bootstrap's own UI ---------- */

.sandbox-error {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  background: var(--card);
  font-size: 0.875rem;
}
.sandbox-error strong { display: block; margin-bottom: 0.25rem; color: var(--destructive); font-weight: 600; }
.sandbox-error p { color: var(--muted-foreground); margin: 0 0 0.5rem; direction: ltr; text-align: right; unicode-bidi: plaintext; }
.sandbox-error details summary { cursor: pointer; color: var(--muted-foreground); }
.sandbox-error pre { max-height: 240px; margin-top: 0.5rem; font-size: 0.75rem; white-space: pre-wrap; }

/* ---------- Utilities (a fixed subset; logical properties for right-to-left) ---------- */

.block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; }
.hidden { display: none; }
.flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; }
.flex-row { flex-direction: row; } .flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1 1 0%; } .flex-none { flex: none; } .shrink-0 { flex-shrink: 0; }
.items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-start { justify-content: flex-start; } .justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; }
.self-center { align-self: center; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2 / span 2; } .col-span-full { grid-column: 1 / -1; }

.gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; }
.gap-x-2 { column-gap: 0.5rem; } .gap-x-4 { column-gap: 1rem; } .gap-y-2 { row-gap: 0.5rem; } .gap-y-4 { row-gap: 1rem; }
.space-y-1 > * + * { margin-top: 0.25rem; } .space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; } .space-y-4 > * + * { margin-top: 1rem; }

.p-0 { padding: 0; } .p-1 { padding: 0.25rem; } .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; }
.px-2 { padding-inline: 0.5rem; } .px-3 { padding-inline: 0.75rem; } .px-4 { padding-inline: 1rem; }
.py-1 { padding-block: 0.25rem; } .py-2 { padding-block: 0.5rem; } .py-3 { padding-block: 0.75rem; } .py-4 { padding-block: 1rem; }
.pt-2 { padding-top: 0.5rem; } .pb-2 { padding-bottom: 0.5rem; }
.ps-2 { padding-inline-start: 0.5rem; } .pe-2 { padding-inline-end: 0.5rem; }
.m-0 { margin: 0; } .mx-auto { margin-inline: auto; }
.mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; }
.ms-auto { margin-inline-start: auto; } .me-auto { margin-inline-end: auto; }
.ms-2 { margin-inline-start: 0.5rem; } .me-2 { margin-inline-end: 0.5rem; }

.w-full { width: 100%; } .w-auto { width: auto; } .h-full { height: 100%; } .h-auto { height: auto; }
.min-w-0 { min-width: 0; } .max-w-full { max-width: 100%; }
.max-w-sm { max-width: 24rem; } .max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; }
.h-2 { height: 0.5rem; } .h-4 { height: 1rem; } .h-8 { height: 2rem; } .h-32 { height: 8rem; }
.h-48 { height: 12rem; } .h-64 { height: 16rem; } .h-80 { height: 20rem; }
.w-4 { width: 1rem; } .w-8 { width: 2rem; } .aspect-square { aspect-ratio: 1 / 1; } .aspect-video { aspect-ratio: 16 / 9; }
.overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-x-auto { overflow-x: auto; }
.relative { position: relative; } .absolute { position: absolute; } .inset-0 { inset: 0; }
.sticky { position: sticky; } .top-0 { top: 0; }

.text-xs { font-size: 0.75rem; line-height: 1.6; } .text-sm { font-size: 0.875rem; line-height: 1.7; }
.text-base { font-size: 1rem; } .text-lg { font-size: 1.125rem; line-height: 1.6; }
.text-xl { font-size: 1.25rem; line-height: 1.5; } .text-2xl { font-size: 1.5rem; line-height: 1.4; }
.text-3xl { font-size: 1.875rem; line-height: 1.3; }
.font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; }
.font-mono { font-family: var(--font-mono); }
.text-start { text-align: start; } .text-center { text-align: center; } .text-end { text-align: end; }
.leading-tight { line-height: 1.3; } .leading-relaxed { line-height: 1.9; }
.tabular-nums { font-variant-numeric: tabular-nums; } .whitespace-nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uppercase { text-transform: uppercase; }

.text-foreground { color: var(--foreground); } .text-muted, .text-muted-foreground { color: var(--muted-foreground); }
.text-faint { color: var(--faint); } .text-brand { color: var(--brand); } .text-info { color: var(--info); }
.text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-destructive { color: var(--destructive); }
.bg-background { background: var(--background); } .bg-card { background: var(--card); } .bg-muted { background: var(--muted); }
.bg-secondary { background: var(--secondary); } .bg-accent { background: var(--accent); } .bg-brand { background: var(--brand); color: var(--brand-foreground); }
.bg-info { background: var(--info); color: #fff; } .bg-transparent { background: transparent; }

.border { border: 1px solid var(--border); } .border-0 { border: 0; }
.border-t { border-top: 1px solid var(--border); } .border-b { border-bottom: 1px solid var(--border); }
.border-s { border-inline-start: 1px solid var(--border); } .border-e { border-inline-end: 1px solid var(--border); }
.rounded { border-radius: calc(var(--radius) - 4px); } .rounded-md { border-radius: calc(var(--radius) - 2px); }
.rounded-lg { border-radius: var(--radius); } .rounded-xl { border-radius: calc(var(--radius) + 4px); }
.rounded-full { border-radius: 9999px; }
.shadow-sm { box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }
.opacity-50 { opacity: 0.5; } .opacity-75 { opacity: 0.75; }
.cursor-pointer { cursor: pointer; } .select-none { user-select: none; }
.transition { transition: all 0.15s ease; }