/* Aleem window. Every colour, radius and glow comes from the active style's tokens (the identity package), so
   switching styles restyles everything and changes no function. The only literal colours are the swatches that
   preview each style in the settings. Text sizes never go under 12px and follow the device's own text size. */
/* C-47: the smallest text: 12px, and 14px for Arabic while its switch is on (Naskh needs the extra size) */
:root { --side: clamp(15rem, 19vw, 22rem); --measure: 48rem; --min-text: 12px; --small: max(var(--min-text), .8rem); }
:root.ui-text-14:lang(ar) { --min-text: 14px; }
* { box-sizing: border-box; }
html { font-size: clamp(1rem, .3vw + .82rem, 1.45rem); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: hsl(var(--background)); color: hsl(var(--foreground));
  font-family: var(--font-ui); line-height: var(--leading); transition: background-color .25s, color .25s;
}
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.4; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
/* C-44: a focus ring in every browser; where :focus-visible is known, only for the keyboard */
:focus { outline: 3px solid hsl(var(--ring)); outline-offset: 2px; }
@supports selector(:focus-visible) { :focus:not(:focus-visible) { outline: none; } }
.ic { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; flex: none; }
[dir="rtl"] .mirror { transform: scaleX(-1); }
.hint { color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .88rem); }
.status { min-height: 1.6em; margin: .8rem 0 0; font-size: max(var(--min-text), .9rem); color: hsl(var(--signature-text)); }
.status.is-error { color: hsl(var(--foreground)); font-weight: 700; }

/* -- marks ------------------------------------------------------------------------------- */
.mark { display: inline-block; width: 2.6rem; height: 2.6rem; border-radius: var(--radius-tile); overflow: hidden; flex: none; }
.mark img { width: 100%; height: 100%; display: block; }
.mark.xl { width: clamp(4.6rem, 9vw, 6.4rem); height: clamp(4.6rem, 9vw, 6.4rem); }

/* -- buttons ------------------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 700; cursor: pointer;
  border-radius: calc(var(--radius) * .7); padding: .55rem 1.3rem; border: 1px solid transparent; text-decoration: none;
}
.btn.primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn.outline { background: hsl(var(--card)); color: hsl(var(--card-foreground)); border-color: hsl(var(--border)); }
.btn.small { padding: .3rem .95rem; font-size: max(var(--min-text), .9rem); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .55; cursor: progress; }
.icon-btn { background: transparent; border: 0; color: inherit; cursor: pointer; padding: .35rem; border-radius: .6rem;
  display: inline-grid; place-items: center; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* -- sign-in -------------------------------------------------------------------------------- */
.gate { min-height: 100vh; display: grid; grid-template-rows: 1fr auto; padding: 2rem 1rem .5rem; }
.gate-card {
  align-self: center; justify-self: center; display: grid; justify-items: center; gap: .7rem; text-align: center;
  width: min(100%, 26rem); background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 2.2rem 1.6rem 1.6rem;
  box-shadow: 0 1.6rem 4rem hsl(var(--deep) / .35);
}
.gate-card h1 { font-size: 2.3rem; margin: .2rem 0 0; color: hsl(var(--signature-text)); }
.tagline { margin: 0 0 .8rem; color: hsl(var(--muted-foreground)); }
.gate-note { min-height: 1.6em; margin: .2rem 0 0; font-size: max(var(--min-text), .92rem); }
/* signing in with a login name and a password: the test account, and any account while Google is not set up */
.login-form { display: grid; gap: .45rem; width: 100%; text-align: start; }
.login-form label { font-weight: 700; font-size: max(var(--min-text), .88rem); }
.login-form input {
  width: 100%; border: 1px solid hsl(var(--input)); background: hsl(var(--background)); color: hsl(var(--foreground));
  border-radius: calc(var(--radius) * .5); padding: .5rem .8rem; font: inherit; text-align: left;
}
.login-form .btn { margin-top: .3rem; }
.or { display: flex; align-items: center; gap: .6rem; margin: .5rem 0 .1rem; color: hsl(var(--muted-foreground));
  font-size: max(var(--min-text), .85rem); }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid hsl(var(--border)); }
.gate .foot { margin-inline-start: 0; }

/* -- the app frame ---------------------------------------------------------------------------- */
/* one column bounded by the screen: a long menu option or name never widens the window past it */
.app { height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-columns: minmax(0, 1fr); }
.band {
  display: flex; align-items: center; gap: .8rem; padding: .55rem clamp(.7rem, 2.4vw, 2.4rem);
  background: hsl(var(--header)); color: hsl(var(--header-foreground)); border-bottom: 1px solid hsl(var(--signature) / .5);
}
:root[data-style="dhakaa"] .band .mark { background: hsl(var(--card)); padding: .16rem; border-radius: .6rem; }
.identity { display: flex; align-items: center; gap: .65rem; min-width: 0; flex: 1 1 auto; }
.names { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.names strong { font-size: 1.2rem; }
.names .tag { font-size: var(--small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-badge {
  flex: none; border-radius: 999px; padding: 0 .7rem; font-size: var(--small); font-weight: 700; line-height: 1.8;
  background: hsl(var(--header-foreground)); color: hsl(var(--header));
}
.band-actions { margin-inline-start: auto; display: flex; gap: .4rem; flex: none; }
.band-btn {
  display: inline-flex; align-items: center; gap: .4rem; border: 1px solid hsl(var(--header-foreground) / .4);
  background: transparent; color: inherit; border-radius: 999px; padding: .32rem .9rem; cursor: pointer; white-space: nowrap;
}
.band-btn.round { width: 2.4rem; height: 2.4rem; padding: 0; justify-content: center; }
.band-btn.strong { background: hsl(var(--header-foreground)); color: hsl(var(--header)); border-color: hsl(var(--header-foreground)); font-weight: 700; }
.band-btn:disabled { opacity: .45; cursor: not-allowed; }
:root[data-mode="day"] #toggle-mode .sun, :root:not([data-mode="day"]) #toggle-mode .moon { display: none; }
:root[data-style="dhakaa"] #toggle-mode .moon { display: inline; }
:root[data-style="dhakaa"] #toggle-mode .sun { display: none; }

.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 0; }
.history {
  border-inline-end: 1px solid hsl(var(--border)); padding: 1rem .7rem .8rem; display: flex; flex-direction: column;
  min-height: 0; background: hsl(var(--background));
}
.history h2 { font-size: max(var(--min-text), .85rem); color: hsl(var(--muted-foreground)); margin: 0 0 .4rem; padding-inline: .55rem; }
.history ul { list-style: none; margin: 0; padding: 0; overflow: auto; min-height: 0; flex: 0 1 auto; }
.history li { display: flex; align-items: center; gap: .15rem; border-radius: calc(var(--radius) * .5); }
.history li .open-conv {
  flex: 1; min-width: 0; text-align: start; background: transparent; border: 0; border-radius: calc(var(--radius) * .5);
  padding: .45rem .6rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history li .open-conv:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.history li .open-conv[aria-current="true"] { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-weight: 700; }
.history li .live { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: hsl(var(--signature));
  margin-inline-end: .4rem; vertical-align: .1em; animation: pulse 1.2s ease-in-out infinite; }
.history li .del-conv { opacity: 0; color: hsl(var(--muted-foreground)); }
.history li:hover .del-conv, .history li .del-conv:focus, .history li .del-conv.armed { opacity: 1; }
.history li .del-conv.armed { color: hsl(var(--foreground)); }
.history li .del-conv .ic { width: 1.05rem; height: 1.05rem; }
.spend {
  margin-top: auto; text-align: start; border: 1px solid hsl(var(--border)); background: hsl(var(--card));
  color: hsl(var(--card-foreground)); border-radius: calc(var(--radius) * .6); padding: .55rem .75rem; cursor: pointer;
  font-size: max(var(--min-text), .86rem); line-height: 1.6;
}
.spend b { color: hsl(var(--signature-text)); }
.spend-line { display: block; }
.meter { display: block; height: .35rem; margin-top: .35rem; border-radius: 99px; background: hsl(var(--muted)); overflow: hidden; }
.meter i { display: block; height: 100%; background: hsl(var(--signature)); border-radius: 99px; }
.meter.hot i { background: hsl(var(--primary)); }
.meter.over i { background: hsl(var(--destructive)); }

.stage { overflow: auto; padding: clamp(1rem, 3vw, 2.4rem) clamp(.8rem, 3vw, 2.4rem) 1.2rem; }
.welcome, .thread { width: min(100%, var(--measure)); margin-inline: auto; }
.welcome { display: grid; justify-items: center; text-align: center; gap: .6rem; padding-block: clamp(1.2rem, 7vh, 4.5rem) 1rem; }
.welcome h1 { font-size: clamp(1.6rem, 1.8vw + 1rem, 2.5rem); margin: .3rem 0 0; }
.welcome p { color: hsl(var(--muted-foreground)); margin: 0 0 .8rem; max-width: 42ch; }
.suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.suggestions button {
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border-radius: 999px; padding: .4rem 1rem; cursor: pointer; max-width: 100%; white-space: normal;
}
.suggestions button:hover { border-color: hsl(var(--primary)); }

/* -- before the first question: what is missing, and the one thing to do about it ----------------------- */
.setup-card {
  width: min(100%, 30rem); display: grid; gap: .6rem; text-align: start; margin-top: .4rem; padding: 1.1rem 1.2rem;
  background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border));
  border-inline-start: .3rem solid hsl(var(--signature)); border-radius: calc(var(--radius) * .8);
}
.setup-card h2 { margin: 0; font-size: 1.15rem; color: hsl(var(--signature-text)); }
.setup-card p { margin: 0; color: hsl(var(--muted-foreground)); max-width: none; }
.setup-card .status { margin: 0; }
.key-form { display: grid; gap: .5rem; }
.key-form label { font-weight: 700; font-size: max(var(--min-text), .9rem); }
.key-form input[type="password"], .key-form input[type="text"], .key-form textarea {
  width: 100%; border: 1px solid hsl(var(--input)); background: hsl(var(--background)); color: hsl(var(--foreground));
  border-radius: calc(var(--radius) * .5); padding: .5rem .8rem; text-align: left; font: inherit;
}
.key-form textarea { font-family: var(--font-mono); font-size: max(var(--min-text), .8rem); resize: vertical; word-break: break-all; }
.key-form .field { display: grid; gap: .5rem; }
.key-form .btn { justify-self: start; }
.kind-pick { display: flex; gap: 1rem; flex-wrap: wrap; }
.kind-pick label { font-weight: 400; display: inline-flex; gap: .35rem; align-items: center; cursor: pointer; }

/* -- the conversation: user bubble on the start side, Aleem's sheet with its mark -------------------- */
.thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.request { display: flex; justify-content: flex-start; }
.request-text {
  max-width: 85%; background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  border-radius: 1.4rem 1.4rem 1.4rem .4rem; padding: .55rem 1rem; white-space: pre-wrap; overflow-wrap: anywhere;
}
.request-text bdi { text-decoration: underline; }
.reply { display: flex; gap: .55rem; align-items: flex-start; }
.reply .av { width: 2rem; height: 2rem; border-radius: var(--radius-tile); overflow: hidden; flex: none; margin-top: .25rem; }
.reply .av img { width: 100%; height: 100%; display: block; }
.sheet {
  flex: 1; min-width: 0; display: grid; gap: .65rem; background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border)); border-radius: 1.4rem 1.4rem .4rem 1.4rem; padding: .75rem clamp(.9rem, 2vw, 1.35rem);
}
.sheet.error { border-inline-start: .3rem solid hsl(var(--destructive)); }
.trail { color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .88rem); }
.trail summary { cursor: pointer; font-weight: 700; color: hsl(var(--signature-text)); width: fit-content; }
.steps { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .2rem; }
.steps li { position: relative; padding-inline-start: 1.4rem; }
.steps li::before {
  content: ""; position: absolute; inset-inline-start: .2rem; top: .62em; width: .55rem; height: .55rem; border-radius: 50%;
  background: hsl(var(--border));
}
.steps li.done::before { background: hsl(var(--signature)); }
.steps li.current { color: hsl(var(--card-foreground)); }
.steps li.current::before { background: hsl(var(--signature)); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.typing { display: flex; gap: .35rem; padding: .2rem 0; }
.typing i { width: .5rem; height: .5rem; border-radius: 50%; background: hsl(var(--signature)); display: block; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
.draft { color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
.draft .dh { font-weight: 700; color: hsl(var(--card-foreground)); margin-top: .3rem; }
.draft .gap { height: .4rem; }

.answer { white-space: normal; overflow-wrap: anywhere; }
.answer > :first-child { margin-top: 0; }
.answer > :last-child { margin-bottom: 0; }
.answer p { margin: .5rem 0; }
.answer h2, .answer h3, .answer h4 { margin: .95rem 0 .35rem; color: hsl(var(--signature-text)); }
.answer h2 { font-size: 1.22rem; }
.answer h3 { font-size: 1.08rem; }
.answer h4 { font-size: 1rem; }
.answer ul, .answer ol { padding-inline-start: 1.4rem; margin: .45rem 0; }
.answer li + li { margin-top: .2rem; }
.answer li::marker { color: hsl(var(--signature-text)); }
.answer li.sub { margin-inline-start: 1.2rem; list-style: circle; }
.answer a { color: hsl(var(--signature-text)); }
.answer blockquote {
  margin: .6rem 0; padding: .35rem .9rem; border-inline-start: 3px solid hsl(var(--signature));
  background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); border-radius: .5rem;
}
.answer code {
  font-family: var(--font-mono); font-size: max(var(--min-text), .85em); background: hsl(var(--muted)); border: 1px solid hsl(var(--border));
  border-radius: .35rem; padding: 0 .3em; direction: ltr; unicode-bidi: isolate;
}
.answer pre { direction: ltr; text-align: left; background: hsl(var(--muted)); padding: .8rem; overflow: auto; border-radius: .6rem; }
.answer pre code { border: 0; background: none; padding: 0; }
.answer .tw { overflow-x: auto; border: 1px solid hsl(var(--border)); border-radius: .6rem; margin: .6rem 0; }
.answer table { width: 100%; border-collapse: collapse; }
.answer th { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); text-align: start; padding: .45rem .7rem; }
.answer td { padding: .4rem .7rem; border-top: 1px solid hsl(var(--border)); vertical-align: top; }
.answer hr { border: 0; border-top: 1px solid hsl(var(--border)); margin: .8rem 0; }
.sheet.error .answer { font-weight: 700; }

.sources { border-top: 1px solid hsl(var(--border)); padding-top: .5rem; font-size: max(var(--min-text), .9rem); }
.sources h3, .review-notes h3 { font-size: max(var(--min-text), .88rem); margin: 0 0 .25rem; color: hsl(var(--muted-foreground)); }
.sources ul, .review-notes ul { margin: 0; padding-inline-start: 1.2rem; }
.sources a { color: hsl(var(--signature-text)); overflow-wrap: anywhere; }
.review-notes { font-size: max(var(--min-text), .9rem); color: hsl(var(--muted-foreground)); }
.seal {
  width: 6.4rem; height: 6.4rem; border-radius: 50%; display: grid; place-content: center; text-align: center;
  color: hsl(var(--signature-text)); background: hsl(var(--card)); border: .2rem double hsl(var(--signature));
  transform: rotate(-7deg); padding: .4rem; line-height: 1.3; animation: stamp .45s cubic-bezier(.2, 1.4, .4, 1) both;
}
.seal.flagged { border-color: hsl(var(--destructive)); }
.seal-main { font-weight: 800; font-size: max(var(--min-text), .9rem); }
.seal-sub { font-size: max(var(--min-text), .76rem); color: hsl(var(--card-foreground)); }
@keyframes stamp { from { transform: rotate(-7deg) scale(1.35); opacity: 0; } to { transform: rotate(-7deg) scale(1); opacity: 1; } }
.cost { margin: 0; font-size: max(var(--min-text), .82rem); color: hsl(var(--muted-foreground)); }
.cost b { color: hsl(var(--card-foreground)); }
.rate { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: max(var(--min-text), .9rem); color: hsl(var(--muted-foreground)); }
.rate-btn {
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--card-foreground)); border-radius: 999px;
  padding: .15rem .55rem; cursor: pointer; display: inline-grid; place-items: center;
}
.rate-btn .ic { width: 1.05rem; height: 1.05rem; }
.rate-btn[aria-pressed="true"] { border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / .3); }
.rate-comment { display: flex; gap: .45rem; flex: 1 1 100%; }
.rate-comment input {
  flex: 1; min-width: 0; border: 1px solid hsl(var(--input)); background: hsl(var(--background)); color: hsl(var(--foreground));
  border-radius: calc(var(--radius) * .5); padding: .3rem .7rem;
}
.rate-done { color: hsl(var(--signature-text)); }

/* -- composer -------------------------------------------------------------------------------- */
.composer { margin-inline-start: var(--side); padding: .45rem clamp(.7rem, 3vw, 2.4rem) .2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; }
.composer > * { width: min(100%, var(--measure)); margin-inline: auto; }
.composer-tools { display: flex; align-items: center; gap: .45rem .6rem; flex-wrap: wrap; }
.depths { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.depth {
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--card-foreground)); border-radius: 999px;
  padding: .15rem .85rem; cursor: pointer; font-size: max(var(--min-text), .9rem);
}
.depth[aria-checked="true"] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); font-weight: 700; }
.model-pick { min-width: 0; max-width: 100%; }
.model-pick select {
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border-radius: 999px; padding: .15rem .7rem; font-size: max(var(--min-text), .88rem); max-width: min(100%, 22rem);
  text-overflow: ellipsis;
}
.estimate { margin: 0; margin-inline-start: auto; font-size: max(var(--min-text), .82rem); color: hsl(var(--muted-foreground));
  min-width: 0; overflow-wrap: anywhere; }      /* C-54: a long line wraps instead of running past a phone's edge */
.composer-box {
  display: flex; align-items: flex-end; gap: .45rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card));
  border-radius: 1.7rem; padding: .4rem;
}
.composer-box:focus-within { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
.composer textarea {
  flex: 1; resize: none; border: 0; background: transparent; color: hsl(var(--card-foreground)); max-height: 12rem;
  padding: .45rem .7rem; line-height: 1.6; outline: none;
}
.composer textarea::placeholder { color: hsl(var(--muted-foreground)); }
.send {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  display: grid; place-items: center; cursor: pointer; flex: none;
}
.send:disabled { opacity: .5; cursor: progress; }
.disclaimer { margin: 0; text-align: center; font-size: max(var(--min-text), .78rem); color: hsl(var(--muted-foreground)); }
.foot {
  margin-inline-start: var(--side); text-align: center; color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .78rem);
  line-height: 1.6; padding: .1rem 1rem .5rem; display: flex; flex-direction: column;
}

/* -- side panels ------------------------------------------------------------------------------- */
.panel {
  position: fixed; inset-block: 0; inset-inline-end: 0; width: min(31rem, 94vw); background: hsl(var(--popover));
  color: hsl(var(--popover-foreground)); border-inline-start: .3rem solid hsl(var(--signature)); padding: 1rem 1.3rem 2rem;
  overflow: auto; z-index: 20; box-shadow: 0 0 2.5rem hsl(var(--deep) / .4);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.panel-head h2 { margin: 0; font-size: 1.3rem; color: hsl(var(--signature-text)); }
.panel-lead { color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .9rem); margin: .4rem 0 .8rem; }
.panel h3 { font-size: 1.02rem; margin: 1.1rem 0 .5rem; color: hsl(var(--signature-text)); }
.panel h4 { font-size: .96rem; margin: 1rem 0 .4rem; }
.panel input, .panel select, .panel textarea {
  background: hsl(var(--background)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) * .5); padding: .38rem .7rem; min-width: 0;
}
.panel select { max-width: 100%; }        /* C-25: a list as wide as its longest choice stays inside its panel */
.panel label { font-weight: 700; font-size: max(var(--min-text), .9rem); }
.set-group + .set-group { border-top: 1px solid hsl(var(--border)); margin-top: 1rem; }
.styles { display: grid; gap: .5rem; }
.style-opt {
  display: flex; align-items: center; gap: .6rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card));
  color: hsl(var(--card-foreground)); border-radius: calc(var(--radius) * .6); padding: .5rem .8rem; cursor: pointer; text-align: start;
}
.style-opt[aria-checked="true"] { border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / .35); font-weight: 700; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: .85rem; height: .85rem; border-radius: 50%; border: 1px solid hsl(var(--border)); display: block; }
/* swatches that preview each style, whatever style is active */
.dots .d1 { background: #061427; } .dots .d2 { background: #daa93e; }
.dots .d3 { background: #f2ecde; } .dots .d4 { background: #ae7d29; }
.dots .d5 { background: #ffffff; } .dots .d6 { background: #0f3461; }
/* 2.1.2: C-14 ذكاء العنابي الذهبي, C-15 الذكاء الموثوق */
.dots .d7 { background: #140206; } .dots .d8 { background: #d4af37; }
.dots .d9 { background: #f8f1e4; } .dots .d10 { background: #6b1520; }
.dots .d11 { background: #000c24; } .dots .d12 { background: #feaf14; }
.dots .d13 { background: #f3f7fc; } .dots .d14 { background: #00205b; }

/* C-15: the company's golden Thuluth wordmark (a mask, so each mode colours it); the words stay in Naskh */
.wordmark { display: none; }
:root[data-style="mawthooq"] .wordmark {
  display: block; background: hsl(var(--signature-text)); aspect-ratio: 630 / 208; height: 1.35rem;
  -webkit-mask: url(../identity/assets/wordmark-thuluth.png) center / contain no-repeat;
  mask: url(../identity/assets/wordmark-thuluth.png) center / contain no-repeat;
}
:root[data-style="mawthooq"] .band .wordmark { background: hsl(var(--signature)); height: 1.15rem; justify-self: start; }
:root[data-style="mawthooq"] .names .tag { display: none; }
:root[data-style="mawthooq"] .wordmark.big { height: clamp(2.4rem, 4vw + 1rem, 3.6rem); }
:root[data-style="mawthooq"] .gate-card .wordmark { height: 2.6rem; margin: -.2rem auto .3rem; }
.account { margin: 0 0 .6rem; overflow-wrap: anywhere; }
.account bdi { color: hsl(var(--muted-foreground)); }
.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .6rem 0; padding: .7rem .9rem;
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * .6); background: hsl(var(--card));
}
.switch-row .text { display: flex; flex-direction: column; line-height: 1.5; min-width: 0; }
.switch-row .text .hint { margin-top: .1rem; }
.switch { display: inline-flex; align-items: center; gap: .5rem; flex: none; background: transparent; border: 0; padding: .2rem; cursor: pointer; }
.switch-track { position: relative; width: 2.75rem; height: 1.55rem; border-radius: 999px; background: hsl(var(--muted));
  box-shadow: inset 0 0 0 1px hsl(var(--border)); transition: background .15s ease; }
.switch-knob { position: absolute; top: .18rem; inset-inline-start: .18rem; width: 1.19rem; height: 1.19rem; border-radius: 50%;
  background: hsl(var(--card-foreground)); transition: inset-inline-start .15s ease; }
.switch[aria-checked="true"] .switch-track { background: hsl(var(--primary)); box-shadow: none; }
.switch[aria-checked="true"] .switch-knob { inset-inline-start: calc(100% - 1.37rem); background: hsl(var(--primary-foreground)); }
.switch-state { min-width: 3.4em; font-size: max(var(--min-text), .86rem); color: hsl(var(--muted-foreground)); }
.switch[aria-checked="true"] .switch-state { color: hsl(var(--signature-text)); font-weight: 700; }
.feature-form, .admin-limits { display: grid; gap: .45rem; margin: .8rem 0; }
.feature-form .btn, .admin-limits .btn { justify-self: start; }
.invite-form, .fact-add { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: .4rem 0 .8rem; }
.invite-form input, .fact-add input { flex: 1 1 12rem; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; padding: .5rem 0;
  border-bottom: 1px solid hsl(var(--border)); font-size: max(var(--min-text), .92rem);
}
.plain-list li .who { min-width: 0; overflow-wrap: anywhere; }
.plain-list li .meta { color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .84rem); }

.btn.danger { border-color: hsl(var(--destructive)); }
.btn.danger.armed { border-width: 2px; font-weight: 800; box-shadow: 0 0 0 2px hsl(var(--destructive) / .35); }
.file-btn { position: relative; }
.filters { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem 0 .5rem; }
.chip {
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--card-foreground)); border-radius: 999px;
  padding: .1rem .85rem; cursor: pointer; font-size: max(var(--min-text), .86rem);
}
.chip[aria-checked="true"] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); font-weight: 700; }
.conn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.conn {
  display: grid; gap: .35rem; padding: .7rem .85rem; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * .6);
  background: hsl(var(--card)); color: hsl(var(--card-foreground));
}
.conn-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.tag {
  border: 1px solid hsl(var(--border)); border-radius: 999px; padding: 0 .6rem; font-size: max(var(--min-text), .78rem); line-height: 1.7;
  color: hsl(var(--muted-foreground));
}
.tag.strong { border-color: hsl(var(--signature)); color: hsl(var(--signature-text)); font-weight: 700; }
.conn-meta { font-size: max(var(--min-text), .84rem); color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; unicode-bidi: plaintext; }
.profile-form { display: grid; gap: .4rem; margin: .4rem 0 .6rem; }
.profile-form .row input { flex: 1 1 10rem; }
.code-box { display: grid; gap: .45rem; margin-top: .8rem; padding: .8rem; border: 1px solid hsl(var(--border));
  border-inline-start: .3rem solid hsl(var(--signature)); border-radius: calc(var(--radius) * .6); }
.code-box textarea { width: 100%; font-family: var(--font-mono); font-size: max(var(--min-text), .78rem); word-break: break-all;
  resize: vertical; }
.security-state { margin: .3rem 0 .6rem; font-weight: 700; }
.security-state.is-error { color: hsl(var(--foreground)); border-inline-start: .3rem solid hsl(var(--destructive)); padding-inline-start: .5rem; }
.conn-meta.is-error { color: hsl(var(--foreground)); font-weight: 700; }
.row-more { margin-top: .2rem; }
.row-more summary { cursor: pointer; font-size: max(var(--min-text), .86rem); color: hsl(var(--signature-text)); padding: .2rem 0; }
.row-more[open] summary { margin-bottom: .3rem; }
.row-more .credit-form + .credit-form { margin-top: .4rem; }
.credit-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: end; }
.credit-form label { display: grid; gap: .2rem; font-weight: 400; font-size: max(var(--min-text), .84rem); }
.credit-form input { width: 9rem; }
.conn-add { margin-top: .7rem; }
.conn-add summary { cursor: pointer; font-weight: 700; color: hsl(var(--signature-text)); width: fit-content; }
.conn-form { display: grid; gap: .4rem; margin-top: .5rem; }
.conn-form > .btn { justify-self: start; }
.conn-form input, .conn-form select { width: 100%; }
.conn-form .row input { flex: 1 1 7rem; width: auto; }
/* C-22 skills and C-23 connectors */
.conn-form textarea { width: 100%; resize: vertical; min-height: 8rem; line-height: 1.6; }
.tag.bad { border-color: hsl(var(--destructive)); color: hsl(var(--foreground)); font-weight: 700; }
.tool-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: max(var(--min-text), .84rem);
  color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
.tool-list bdi { font-family: var(--font-mono); color: hsl(var(--foreground)); }
#set-skills .file-btn:focus-within, #set-connectors .file-btn:focus-within { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.skill-pick select { max-width: min(100%, 16rem); }
/* a switch inside a skill's or a connector's card: the card is its frame, so the row takes no frame of its own and
   its words keep the width a phone has */
.conn .switch-row { margin: .1rem 0; padding: .25rem 0; border: 0; background: transparent; gap: .6rem; }
.topup { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1 1 100%; }
.topup input { flex: 0 1 6.5rem; }
.topup input[type="text"] { flex: 1 1 9rem; }
.credit-bars { display: grid; gap: .6rem; margin-bottom: .6rem; }
.credit { display: grid; gap: .25rem; }
.credit-name { font-weight: 700; font-size: max(var(--min-text), .9rem); }
.credit-bar { display: block; height: .6rem; border-radius: 99px; background: hsl(var(--muted)); overflow: hidden; }
.credit-bar i { display: block; height: 100%; background: hsl(var(--signature)); border-radius: 99px; }
.credit-nums { font-size: max(var(--min-text), .8rem); color: hsl(var(--muted-foreground)); }

.fact-group { margin-top: .6rem; }
.fact-group h3 { margin: .9rem 0 .2rem; }
.fact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid hsl(var(--border)); }
.fact.pinned .fact-text { font-weight: 700; }
.fact .pin-mark { color: hsl(var(--signature-text)); margin-inline-end: .3rem; font-size: max(var(--min-text), .82rem); }
.fact-actions { display: flex; gap: .3rem; align-items: start; flex-wrap: wrap; justify-content: flex-end; }
.fact-actions button, .mini-btn {
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border-radius: calc(var(--radius) * .4); padding: .05rem .55rem; cursor: pointer; font-size: max(var(--min-text), .82rem);
}
.fact-actions button.armed { border-color: hsl(var(--destructive)); font-weight: 700; }
.fact-edit { grid-column: 1 / -1; display: flex; gap: .4rem; flex-wrap: wrap; }
.fact-edit input { flex: 1 1 12rem; }

.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .5rem; margin-bottom: .8rem; }
.total { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); border-radius: calc(var(--radius) * .6); padding: .55rem .75rem; }
.total .k { display: block; font-size: max(var(--min-text), .82rem); color: hsl(var(--muted-foreground)); }
.total .v { display: block; font-weight: 700; font-size: 1.1rem; color: hsl(var(--signature-text)); }
.ledger-lines { list-style: none; margin: 0; padding: 0; }
.ledger-lines li { padding: .55rem 0; border-bottom: 1px solid hsl(var(--border)); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .8rem; }
.ledger-lines .what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-lines .amount { font-weight: 700; color: hsl(var(--signature-text)); white-space: nowrap; }
.ledger-lines .when, .ledger-lines .detail { grid-column: 1 / -1; font-size: max(var(--min-text), .8rem); color: hsl(var(--muted-foreground)); }
.ledger-lines .detail { direction: ltr; text-align: left; font-family: var(--font-mono); unicode-bidi: isolate; }
.scrim { position: fixed; inset: 0; background: hsl(var(--deep) / .5); z-index: 15; }

/* -- narrow screens ------------------------------------------------------------------------------ */
.only-narrow { display: none; }
/* -- 2.1.1: every change below has its number (C-N) in common.CHANGES ------------------------------------------------ */
/* C-2 (switch gold_edges): a thin gold edge round the message box and a soft glow while writing; the Dhakaa style
   takes its own signature colour. Switched off, the box is exactly 2.1.0's. C-28 (2.1.4): the parts that take the
   edge are each person's preference (gold-box, gold-depths, gold-pickers, gold-send on <html>); the box alone by default. */
.ui-gold-edges.gold-box .composer-box { border-color: hsl(var(--signature) / .9); }
.ui-gold-edges.gold-box .composer-box:focus-within {
  outline: 1px solid hsl(var(--signature)); outline-offset: 1px; box-shadow: 0 0 .9rem hsl(var(--signature) / .3);
}
/* C-3 (switch steady_dir): the box's direction button, and a suggestion that never moves the box by itself */
.dir-btn {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid hsl(var(--border)); background: transparent;
  color: hsl(var(--muted-foreground)); display: grid; place-items: center; cursor: pointer; flex: none; align-self: center;
}
.dir-btn[data-dir="ltr"] .ic { transform: scaleX(-1); }
.dir-btn:hover, .dir-btn:focus { color: hsl(var(--signature-text)); border-color: hsl(var(--signature)); }
.dir-hint {
  border: 1px dashed hsl(var(--signature)); background: transparent; color: hsl(var(--signature-text));
  border-radius: 999px; padding: .1rem .75rem; font: inherit; font-size: max(var(--min-text), .85rem); cursor: pointer;
}
/* C-1: the interface language, in Settings and on the sign-in page */
.langs { display: flex; gap: .4rem; flex-wrap: wrap; }
.lang-opt {
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border-radius: 999px; padding: .2rem 1rem; cursor: pointer; font: inherit;
}
.lang-opt[aria-checked="true"] {
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); font-weight: 700;
}
.lang-switch {
  justify-self: center; border: 1px solid hsl(var(--border)); background: transparent; color: hsl(var(--foreground));
  border-radius: 999px; padding: .15rem .9rem; cursor: pointer; font: inherit; font-size: max(var(--min-text), .88rem);
}
/* the change registry: a change that cannot be switched off is listed with its number all the same */
.change-tag {
  flex: none; font-size: max(var(--min-text), .8rem); color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border));
  border-radius: 999px; padding: 0 .6rem;
}

/* -- 2.1.2 ------------------------------------------------------------------------------------------------ */
/* C-20: the date and time under a conversation's title */
.history li .open-conv { display: flex; flex-direction: column; align-items: stretch; gap: .05rem; }
.conv-line { display: flex; align-items: center; min-width: 0; }
.history li .open-conv bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.conv-when { font-size: max(var(--min-text), .76rem); color: hsl(var(--muted-foreground)); font-weight: 400; }
.history li .open-conv[aria-current="true"] .conv-when { color: inherit; }

/* C-21 and C-16: one dialog frame for the confirmation and the share sheet */
.confirm {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem;
  background: hsl(var(--deep) / .55);
}
.confirm[hidden] { display: none; }
.confirm-box {
  width: min(100%, 26rem); background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 1.1rem 1.2rem; display: grid; gap: .7rem;
  box-shadow: 0 1rem 3rem hsl(var(--deep) / .45);
}
.confirm-box h2 { margin: 0; font-size: 1.1rem; }
.confirm-box p { margin: 0; color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
.confirm-box .row { justify-content: flex-start; }
.btn.danger:not(.outline) { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); border-color: hsl(var(--destructive)); }
@media (max-width: 640px) {
  .confirm.share { place-items: end stretch; padding: 0; }
  .confirm.share .share-box { width: 100%; border-radius: var(--radius) var(--radius) 0 0; padding-bottom: max(1.1rem, env(safe-area-inset-bottom)); }
}
.parts { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.parts legend { font-size: max(var(--min-text), .85rem); color: hsl(var(--muted-foreground)); margin-bottom: .3rem; }
.parts label { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.parts input { accent-color: hsl(var(--signature)); width: 1.05rem; height: 1.05rem; margin: 0; }
.share-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.share-acts .btn { white-space: nowrap; }
#share-status:empty { display: none; }

/* C-16: the small actions beside the rating */
.acts { display: inline-flex; gap: .3rem; margin-inline-end: .35rem; }
.act-btn {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer;
  border: 1px solid hsl(var(--border)); background: transparent; color: hsl(var(--muted-foreground));
}
.act-btn .ic { width: 1rem; height: 1rem; }
.act-btn:hover { color: hsl(var(--foreground)); border-color: hsl(var(--primary)); }
.act-btn.ok { color: hsl(var(--signature-text)); border-color: hsl(var(--signature)); }
.act-btn.bad { color: hsl(var(--destructive)); border-color: hsl(var(--destructive)); }
.print-frame { position: fixed; inset-inline-start: -9999px; top: 0; width: 1px; height: 1px; border: 0; }

/* C-5: files made for the reply */
.files { border-top: 1px solid hsl(var(--border)); padding-top: .5rem; }
.files h3 { font-size: max(var(--min-text), .88rem); margin: 0 0 .35rem; color: hsl(var(--muted-foreground)); }
.files ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.file-chip {
  display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 999px; text-decoration: none;
  border: 1px solid hsl(var(--signature) / .7); color: hsl(var(--card-foreground)); background: hsl(var(--secondary));
}
.file-chip .ic { width: 1rem; height: 1rem; color: hsl(var(--signature-text)); }
.file-chip small { color: hsl(var(--muted-foreground)); }

/* C-6: the draft the reviewer withheld, folded */
.held { border: 1px dashed hsl(var(--destructive) / .6); border-radius: calc(var(--radius) * .5); padding: .4rem .7rem; }
.held summary { cursor: pointer; font-size: max(var(--min-text), .88rem); color: hsl(var(--muted-foreground)); }
.held-body { color: hsl(var(--muted-foreground)); margin-top: .4rem; }

/* C-17: where the time went */
.clock { margin: 0; font-size: max(var(--min-text), .8rem); color: hsl(var(--muted-foreground)); }

/* C-10: the owner's advanced options. C-52: its edge is the ordinary one, like the model list's; gold only when the
   lists' gold edge is chosen in the preferences (C-28) */
.adv-chip {
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border-radius: 999px; padding: .2rem .85rem; cursor: pointer; font-size: max(var(--min-text), .86rem); white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.adv-chip[aria-expanded="true"] { background: hsl(var(--secondary)); }
.adv {
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); border-radius: calc(var(--radius) * .7);
  padding: .7rem .85rem; margin-bottom: .45rem;
}
.adv-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem .7rem; align-items: center; }
.adv-grid label { font-size: max(var(--min-text), .86rem); color: hsl(var(--muted-foreground)); }
.adv-grid select {
  background: hsl(var(--background)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) * .5); padding: .3rem .6rem; min-width: 0; max-width: 100%; font-size: max(var(--min-text), .88rem);
}
.adv .hint { margin: .45rem 0 0; }

/* C-18: the health tab */
.checks { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .35rem; }
.checks li { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.checks li i { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; flex: none; }
.checks li.ok i { background: hsl(142 60% 42%); }
.checks li.bad i { background: hsl(var(--destructive)); }
.checks li span { color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .86rem); }
.time-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.time-table th, .time-table td { padding: .3rem .4rem; border-bottom: 1px solid hsl(var(--border)); text-align: start; }
.time-table th[scope="row"] { color: hsl(var(--muted-foreground)); font-weight: 400; }
.day-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .25rem; height: 6rem; align-items: end; }
.day-bars .day { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; align-items: end; text-align: center; }
.day-bars .day i { display: block; background: hsl(var(--signature) / .75); border-radius: .25rem .25rem 0 0; min-height: 2px; }
.day-bars .day i.has-failed { background: linear-gradient(hsl(var(--destructive)) 0 25%, hsl(var(--signature) / .75) 25%); }
.day-bars small { font-size: max(var(--min-text), .72rem); color: hsl(var(--muted-foreground)); white-space: nowrap; min-height: 1.4em; }
.eval-results { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; }
.eval-results li { display: grid; gap: .1rem; }
.eval-results li.bad b { color: hsl(var(--destructive)); }
.eval-results li span { color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .82rem); }

@media (max-width: 900px) {
  :root { --side: 0px; }
  .only-narrow { display: inline-grid; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .history {
    position: fixed; inset-block: 0; inset-inline-start: 0; width: min(20rem, 86vw); z-index: 20;
    transform: translateX(100%); transition: transform .2s ease; box-shadow: 0 0 2rem hsl(var(--deep) / .4);
  }
  [dir="ltr"] .history { transform: translateX(-100%); }
  .history.open { transform: none; }
  .history li .del-conv { opacity: 1; }
  .band { gap: .35rem; padding-inline: .5rem; }
  .band-actions { gap: .3rem; }
  .band-btn { width: 2.3rem; height: 2.3rem; padding: 0; justify-content: center; }
  .band-btn .long { display: none; }
  .names .tag { display: none; }
  :root[data-style="mawthooq"] .band .wordmark { display: none; }   /* on a phone the welcome carries it */
  .mark { width: 2.3rem; height: 2.3rem; }
  .request-text { max-width: 92%; }
  .reply .av { display: none; }
  .seal { width: 5.6rem; height: 5.6rem; }
}
@media (max-width: 400px) {
  .plan-badge { display: none; }
  .names strong { font-size: 1.05rem; }
}
/* small phones, or a phone set to a large display size: the header keeps every action and drops the name */
@media (max-width: 360px) {
  .band { gap: .25rem; padding-inline: .4rem; }
  .band-actions { gap: .2rem; }
  .band-btn, .band .mark { width: 2.15rem; height: 2.15rem; }
  .identity { gap: .4rem; }
  .names { display: none; }
  .depth { padding-inline: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .boot-late { animation: boot-late 0s 12s forwards !important; }   /* a line that appears, not a movement */
}
@media print {
  .band, .history, .composer, .foot, .rate, .trail, .panel, .scrim { display: none !important; }
  .app { display: block; height: auto; }
}

/* -- bidirectional text: every run from a person or the model resolves its own direction ------------------ */
.request-text, .draft > div, .fact-text, .review-notes li, .steps li, .rate-done, .ledger-lines .what,
.answer p, .answer li, .answer h2, .answer h3, .answer h4, .answer blockquote { unicode-bidi: plaintext; }
.answer td, .answer th { unicode-bidi: plaintext; text-align: match-parent; }
.answer a, .sources a, .history li bdi { unicode-bidi: plaintext; }
.tech { display: block; margin-top: .4rem; font-size: max(var(--min-text), .78rem); color: hsl(var(--muted-foreground)); direction: ltr;
  unicode-bidi: isolate; text-align: match-parent; overflow-wrap: anywhere; font-weight: 400; }

/* -- 2.1.4 ------------------------------------------------------------------------------------------------ */
/* C-44: the browser's own parts (scroll bars, lists, date fields) take the mode's scheme; night is dark */
:root[data-scheme="dark"] { color-scheme: dark; }
:root[data-scheme="light"] { color-scheme: light; }
/* C-44: the full height of the visible screen where the browser knows it; 100vh before that (older browsers) */
@supports (height: 100dvh) {
  body { min-height: 100dvh; }
  .gate { min-height: 100dvh; }
  .app { height: 100dvh; }
}
/* C-44: room for the system bars when the window is drawn from edge to edge (Android 15, an iPhone's notch) */
.band { padding-top: calc(.55rem + env(safe-area-inset-top, 0px)); }
.foot { padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); }
.gate { padding-top: calc(2rem + env(safe-area-inset-top, 0px)); padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); }
.app { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.gate { padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); }
.panel { padding-top: calc(1rem + env(safe-area-inset-top, 0px)); padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
.history { padding-top: calc(1rem + env(safe-area-inset-top, 0px)); }

/* C-44: what shows until the window starts; never a blank page */
.boot {
  position: fixed; inset: 0; z-index: 70; display: grid; place-content: center; justify-items: center; gap: 1.3rem;
  padding: 2rem 1rem; background: hsl(var(--background)); color: hsl(var(--foreground)); text-align: center;
}
.boot-bar { display: block; width: 7.5rem; height: .3rem; border-radius: 99px; background: hsl(var(--muted)); overflow: hidden; }
.boot-bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: hsl(var(--signature));
  animation: boot-slide 1.1s ease-in-out infinite alternate; }
@keyframes boot-slide { from { transform: translateX(-60%); } to { transform: translateX(210%); } }
.boot-late, .boot-off { margin: 0; max-width: 28rem; line-height: 1.8; color: hsl(var(--muted-foreground)); }
.boot-late { visibility: hidden; animation: boot-late 0s 12s forwards; }
@keyframes boot-late { to { visibility: visible; } }

/* C-45 (switch gate_wide): the sign-in page. On a phone the card is as it was (the two blocks inside it take no box
   of their own); on a tablet it widens and says what Aleem does; on a wide screen it opens into two columns. */
.gate-hero, .gate-form { display: contents; }
.gate-points { display: none; }
@media (min-width: 48rem) {
  :root.ui-gate-wide .gate-card { width: min(100%, 38rem); padding: 2.6rem 2.4rem 2rem; }
  :root.ui-gate-wide .gate-points {
    display: grid; gap: .45rem; list-style: none; margin: 0 0 .9rem; padding: 0; text-align: start; width: 100%;
    color: hsl(var(--card-foreground));
  }
  :root.ui-gate-wide .gate-points li { position: relative; padding-inline-start: 1.5rem; line-height: 1.7; }
  :root.ui-gate-wide .gate-points li::before {
    content: ""; position: absolute; inset-inline-start: .15rem; top: .62em; width: .6rem; height: .6rem; border-radius: 50%;
    background: hsl(var(--signature)); box-shadow: 0 0 .6rem hsl(var(--signature) / .5);
  }
}
@media (min-width: 68rem) {
  :root.ui-gate-wide .gate { padding-inline: max(2rem, env(safe-area-inset-left, 0px)) max(2rem, env(safe-area-inset-right, 0px)); }
  :root.ui-gate-wide .gate-card {
    width: min(92vw, 84rem); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch;
    justify-items: stretch; gap: 0; padding: 0; text-align: start; overflow: hidden;
  }
  :root.ui-gate-wide .gate-hero {
    display: grid; align-content: center; justify-items: start; gap: .8rem; position: relative; isolation: isolate;
    padding: clamp(2.6rem, 4vw, 5rem); min-height: min(38rem, 78vh); border-inline-end: 1px solid hsl(var(--border));
    background: linear-gradient(160deg, hsl(var(--signature) / .12), transparent 55%), hsl(var(--card));
  }
  :root.ui-gate-wide .gate-hero::before {
    content: ""; position: absolute; z-index: -1; inset: 8% 46% 8% 3%; background: hsl(var(--signature) / .16);
    -webkit-mask: url(../identity/assets/brain-lines.png) center / contain no-repeat;
    mask: url(../identity/assets/brain-lines.png) center / contain no-repeat;
  }
  [dir="ltr"]:root.ui-gate-wide .gate-hero::before { inset: 8% 3% 8% 46%; }   /* the art on the side away from the text */
  :root.ui-gate-wide .gate-hero .mark.xl { width: clamp(6rem, 7vw, 8rem); height: clamp(6rem, 7vw, 8rem); }
  :root.ui-gate-wide .gate-hero h1 { font-size: clamp(3rem, 3.6vw, 4.6rem); line-height: 1.2; }
  :root.ui-gate-wide .gate-hero .tagline { font-size: 1.25rem; margin: 0 0 .6rem; }
  :root.ui-gate-wide .gate-card .gate-hero .wordmark { margin: 0; }
  :root.ui-gate-wide .gate-points { max-width: 34rem; font-size: 1.05rem; }
  :root.ui-gate-wide .gate-form {
    display: grid; align-content: center; justify-items: stretch; gap: .75rem; text-align: center;
    padding: clamp(2.2rem, 3.6vw, 4.5rem); width: min(100%, 34rem); justify-self: center;
  }
  :root.ui-gate-wide .gate-form .lang-switch { justify-self: center; }
}

/* C-26: «ذكاء الأخضر الذهبي» in the style list */
.dots .d15 { background: #03110c; } .dots .d16 { background: #d4af35; }
.dots .d17 { background: #f5f2e5; } .dots .d18 { background: #15563e; }

/* C-28: the gold edge on more parts of the composer, each a person's own choice */
.ui-gold-edges.gold-depths .depth { border-color: hsl(var(--signature) / .85); }
.ui-gold-edges.gold-depths .depth[aria-checked="true"] { box-shadow: 0 0 .6rem hsl(var(--signature) / .35); }
.ui-gold-edges.gold-pickers .model-pick select, .ui-gold-edges.gold-pickers .adv-chip { border-color: hsl(var(--signature) / .85); }
.ui-gold-edges.gold-send .send { box-shadow: 0 0 0 2px hsl(var(--signature)), 0 0 .8rem hsl(var(--signature) / .4); }

/* C-29: the line «قد يخطئ الذكاء الاصطناعي» under the box (as before), above it, or hidden */
.composer-box { order: 3; }
.disclaimer, .composer-box ~ * { order: 4; }
.disc-above .disclaimer { order: 2; }
.disc-hidden .disclaimer { display: none; }

/* C-30: the trail of a finished reply can be left out; while Aleem works, its live steps still show */
.no-trail .reply.done .trail { display: none; }

/* C-31 (switch brain_motion): the brain mark moves with what Aleem is doing: thinking, using a tool, writing */
@keyframes brain-tool { 0%, 100% { transform: rotate(-7deg) scale(1.02); } 50% { transform: rotate(7deg) scale(1.06); } }
@keyframes brain-write { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
:root.ui-brain-motion[data-brain="think"] .band .mark, :root.ui-brain-motion .reply[data-phase="think"] .av {
  animation: alm-brain-pulse 1.5s ease-in-out infinite; }
:root.ui-brain-motion[data-brain="tool"] .band .mark, :root.ui-brain-motion .reply[data-phase="tool"] .av {
  animation: brain-tool 1.3s ease-in-out infinite, alm-glow 1.3s ease-in-out infinite; }
:root.ui-brain-motion[data-brain="write"] .band .mark, :root.ui-brain-motion .reply[data-phase="write"] .av {
  animation: brain-write .9s ease-in-out infinite, alm-glow 2s ease-in-out infinite; }

/* C-32 (switch stats_fold): «تفاصيل متقدمة» under every reply, folded under an arrow exactly like the trail, then
   three paragraphs with their titles: the time, the effort, the costs */
.stats { color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .88rem); }
.stats summary { cursor: pointer; font-weight: 700; color: hsl(var(--signature-text)); width: fit-content; }
.stats summary b { color: inherit; }
.stats .stat-lines { display: grid; gap: .35rem; margin: .45rem 0 0; }
.stats .stat { margin: 0; display: grid; grid-template-columns: minmax(4.5rem, max-content) minmax(0, 1fr); gap: .1rem .7rem;
  align-items: baseline; padding-inline-start: .3rem; border-inline-start: 2px solid hsl(var(--signature) / .45); }
.stats .stat-h { font-weight: 700; color: hsl(var(--card-foreground)); }
.stats .stat-v { overflow-wrap: anywhere; }
.stats .stat-v b { color: hsl(var(--card-foreground)); }
@media (max-width: 400px) { .stats .stat { grid-template-columns: minmax(0, 1fr); } }
.no-stats .reply.done .stats, .no-stats .reply.done .cost, .no-stats .reply.done .clock { display: none; }

/* C-33: protected and hidden conversations */
.history li .conv-more { color: hsl(var(--muted-foreground)); opacity: 0; }
.history li:hover .conv-more, .history li .conv-more:focus, .history li .conv-more[aria-expanded="true"] { opacity: 1; }
.history li .conv-more .ic, .conv-lock { width: 1rem; height: 1rem; }
.conv-lock { display: inline-block; vertical-align: -.15em; margin-inline-end: .3rem; color: hsl(var(--signature-text)); flex: none; }
.history li { position: relative; }
.conv-menu {
  position: absolute; z-index: 25; inset-inline-end: .2rem; top: 100%; min-width: 12rem; display: grid; padding: .3rem;
  background: hsl(var(--popover)); color: hsl(var(--popover-foreground)); border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * .6); box-shadow: 0 .8rem 2rem hsl(var(--deep) / .35);
}
.conv-menu button { text-align: start; background: transparent; border: 0; border-radius: .5rem; padding: .45rem .7rem;
  cursor: pointer; font: inherit; color: inherit; }
.conv-menu button:hover, .conv-menu button:focus { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.hidden-toggle {
  margin-top: .5rem; text-align: start; background: transparent; border: 1px dashed hsl(var(--border)); border-radius: .6rem;
  padding: .35rem .7rem; cursor: pointer; color: hsl(var(--muted-foreground)); font: inherit; font-size: max(var(--min-text), .86rem);
}
.hidden-toggle[aria-expanded="true"] { border-style: solid; color: hsl(var(--foreground)); }
#hidden-list { border-inline-start: 2px solid hsl(var(--signature) / .5); margin-top: .3rem; }
.pin-input { font-size: 1.6rem; letter-spacing: .5em; text-align: center; padding: .4rem .6rem; width: 100%;
  border: 1px solid hsl(var(--input)); background: hsl(var(--background)); color: hsl(var(--foreground)); border-radius: .6rem; }

/* C-35: images and files with a message */
.attach-btn {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid hsl(var(--border)); background: transparent;
  color: hsl(var(--muted-foreground)); display: grid; place-items: center; cursor: pointer; flex: none; align-self: center;
}
.attach-btn:hover, .attach-btn:focus { color: hsl(var(--signature-text)); border-color: hsl(var(--signature)); }
.attachments { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.att {
  display: inline-flex; align-items: center; gap: .45rem; max-width: 100%; padding: .25rem .35rem .25rem .6rem;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--card-foreground)); border-radius: .8rem;
  font-size: max(var(--min-text), .85rem);
}
.att img { width: 2.4rem; height: 2.4rem; object-fit: cover; border-radius: .5rem; display: block; flex: none; }
.att .ic { width: 1.2rem; height: 1.2rem; color: hsl(var(--signature-text)); flex: none; }
.att bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12rem; }
.att small { color: hsl(var(--muted-foreground)); white-space: nowrap; }
.att .att-x { border: 0; background: transparent; color: hsl(var(--muted-foreground)); cursor: pointer; border-radius: 50%;
  width: 1.8rem; height: 1.8rem; display: grid; place-items: center; }
.att .att-x:hover, .att .att-x:focus { color: hsl(var(--foreground)); background: hsl(var(--accent)); }
.att.bad { border-color: hsl(var(--destructive)); }
.request { flex-direction: column; align-items: flex-start; gap: .35rem; }
.sent-files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; max-width: 85%; }
.sent-files a, .sent-files span.sent-doc {
  display: inline-flex; align-items: center; gap: .4rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card));
  color: hsl(var(--card-foreground)); border-radius: .7rem; padding: .25rem .6rem; text-decoration: none;
  font-size: max(var(--min-text), .85rem); max-width: 100%;
}
.sent-files a.sent-img { padding: 0; overflow: hidden; }
.sent-files img { width: 6rem; height: 6rem; object-fit: cover; display: block; }
.sent-files .ic { width: 1.1rem; height: 1.1rem; color: hsl(var(--signature-text)); flex: none; }
.sent-files bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
.composer.dragging .composer-box { outline: 2px dashed hsl(var(--signature)); outline-offset: 2px; }

/* C-37 (Ultra): the header's extra rows of icons, folded under an arrow. The frame names its rows, so a folded row
   takes no room and the conversation keeps the rest of the screen. */
.app { grid-template-rows: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "band" "more" "shell" "composer" "foot"; }
.app > .band { grid-area: band; }
.app > .band-more { grid-area: more; }
.app > .shell { grid-area: shell; }
.app > .composer { grid-area: composer; }
.app > .foot { grid-area: foot; }
.band-more {
  display: flex; flex-wrap: wrap; gap: .4rem; padding: .45rem clamp(.7rem, 2.4vw, 2.4rem);
  background: hsl(var(--header)); color: hsl(var(--header-foreground)); border-bottom: 1px solid hsl(var(--signature) / .35);
}
.band-more[hidden] { display: none; }
.band-more .band-btn .ic { flex: none; }
#band-more-btn .ic { transition: transform .2s ease; }
#band-more-btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.toolbar-list { display: grid; gap: .35rem; }
.toolbar-list li { display: flex; align-items: center; gap: .5rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card));
  border-radius: .6rem; padding: .3rem .5rem; }
.toolbar-list label { flex: 1; display: inline-flex; align-items: center; gap: .45rem; min-width: 0; cursor: pointer; font-weight: 400; }
.toolbar-list .ic { width: 1.1rem; height: 1.1rem; color: hsl(var(--signature-text)); flex: none; }
.toolbar-list .move { border: 1px solid hsl(var(--border)); background: transparent; color: inherit; border-radius: .45rem;
  width: 2rem; height: 2rem; display: grid; place-items: center; cursor: pointer; }
.toolbar-list .move:disabled { opacity: .35; cursor: default; }

/* the preferences: plain groups of choices */
.pref-group { border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * .6); padding: .5rem .8rem .7rem; margin: .6rem 0;
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.pref-group legend { font-weight: 700; padding: 0 .3rem; font-size: max(var(--min-text), .9rem); }
.pref-group label { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400; cursor: pointer; }
.pref-group input { accent-color: hsl(var(--signature)); width: 1.05rem; height: 1.05rem; margin: 0; }

/* C-40: reporting a reply */
#report-note { width: 100%; resize: vertical; border: 1px solid hsl(var(--input)); background: hsl(var(--background));
  color: hsl(var(--foreground)); border-radius: .6rem; padding: .45rem .7rem; font: inherit; }
.confirm-box label[for] { font-weight: 700; font-size: max(var(--min-text), .9rem); }
.reports { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.reports li { border: 1px solid hsl(var(--border)); border-radius: .6rem; padding: .45rem .7rem; display: grid; gap: .15rem; }
.reports li span { color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .84rem); overflow-wrap: anywhere; }

/* C-38: about Aleem and its terms */
.legal-links { display: grid; gap: .3rem; }
.legal-links a { color: hsl(var(--signature-text)); }

/* C-43: agent modes; the two still to come stay readable, only marked «قريباً» */
.agent-modes { display: grid; gap: .5rem; }
.agent-mode { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .6rem; align-items: start; cursor: pointer;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border-radius: calc(var(--radius) * .6); padding: .6rem .8rem; font-weight: 400; }
.agent-mode > input { grid-row: 1 / span 3; margin-top: .45rem; accent-color: hsl(var(--signature)); }
.agent-mode.picked { border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / .3); }
.agent-mode.soon { cursor: default; border-style: dashed; }
.agent-name { font-weight: 700; display: inline-flex; align-items: center; gap: .45rem; }
.agent-name .tag { font-size: max(var(--min-text), .78rem); font-weight: 700; border-radius: 999px; padding: 0 .55rem;
  background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border: 1px solid hsl(var(--signature) / .6); }
.agent-opts { display: flex; flex-wrap: wrap; gap: .3rem .9rem; color: hsl(var(--muted-foreground)); }
.agent-opts label { font-weight: 400; display: inline-flex; align-items: center; gap: .35rem;
  flex-wrap: wrap; min-width: 0; max-width: 100%; }
/* a long option (such as the provider's name) narrows its box on a small phone instead of spilling past the card */
.agent-opts select { min-width: 0; max-width: 100%; }

/* C-49 to C-51: the privacy section, and the encrypted copy's password */
.privacy-copy { margin-top: .6rem; }
.pref-group > .hint { flex-basis: 100%; margin: .2rem 0 0; }
#copy-dialog input { width: 100%; border: 1px solid hsl(var(--input)); background: hsl(var(--background));
  color: hsl(var(--foreground)); border-radius: calc(var(--radius) * .5); padding: .5rem .8rem; font: inherit; }

/* C-54 (switch estimate_fold): the estimate folded under an arrow like the trail; C-54 too: a person may hide it */
.estimate-fold { flex-basis: 100%; min-width: 0; font-size: max(var(--min-text), .82rem); color: hsl(var(--muted-foreground)); }
.estimate-fold summary { cursor: pointer; font-weight: 700; color: hsl(var(--signature-text)); width: fit-content; }
.estimate-fold p { margin: .2rem 0 0; overflow-wrap: anywhere; }
.no-estimate .estimate, .no-estimate .estimate-fold { display: none; }

/* C-55, C-56: while Aleem works, its brain (or the three dots) and a word for what it is doing now */
.typing { align-items: center; gap: .55rem; }
.typing-dots { display: none; gap: .35rem; }
.typing-brain { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .55rem;
  overflow: hidden; flex: none; }
.typing-brain img { width: 100%; height: 100%; display: block; }
.wait-dots .typing-brain { display: none; }
.wait-dots .typing-dots { display: flex; }
.typing-word { display: none; font-size: max(var(--min-text), .86rem); color: hsl(var(--muted-foreground)); }
.ui-wait-word .typing-word:not(:empty) { display: inline; }
.reply[data-phase="think"] .typing-brain { animation: alm-brain-pulse 1.5s ease-in-out infinite; }
.reply[data-phase="tool"] .typing-brain { animation: brain-tool 1.3s ease-in-out infinite, alm-glow 1.3s ease-in-out infinite; }
.reply[data-phase="write"] .typing-brain { animation: brain-write .9s ease-in-out infinite, alm-glow 2s ease-in-out infinite; }


/* C-58: the Saudi Islamic touch: a small reminder under the brain and its word after a long wait */
.typing { flex-wrap: wrap; }
.typing-touch { flex-basis: 100%; font-size: max(var(--min-text), .8rem); color: hsl(var(--signature-text)); }
.typing-touch[hidden] { display: none; }

/* C-60: while a task of this conversation runs, the send button gives its place to a stop button */
.send.stop .ic rect { fill: currentColor; stroke: none; }
.send.stop:disabled { opacity: .55; cursor: progress; }
.send[hidden] { display: none; }
.sheet.stopped { border-inline-start: .3rem solid hsl(var(--muted-foreground) / .55); }

/* C-62 (switch detail_rows): «تفاصيل متقدمة» line by line: the name in a calm colour, the value in the colour of its
   meaning (spending red, positive green, neutral in the text's own colour). The tones are lighter on night cards and
   darker on day cards, so each keeps 4.5:1 or more on its card. */
:root { --tone-neg: 0 78% 74%; --tone-pos: 142 52% 64%; }
:root[data-mode="day"], :root[data-style="dhakaa"] { --tone-neg: 0 72% 38%; --tone-pos: 145 70% 24%; }
.stats .stat.rows { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
.stats .stat-rows { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .2rem .9rem;
  align-items: baseline; }
.stats .stat-row { display: contents; }
.stats .stat-k { color: hsl(var(--muted-foreground)); display: inline-flex; align-items: center; gap: .35rem; }
.stats .stat-val { margin: 0; color: hsl(var(--card-foreground)); font-weight: 600; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.stats .stat-val.neg { color: hsl(var(--tone-neg)); }
.stats .stat-val.pos { color: hsl(var(--tone-pos)); }
.stats .stat-hint { grid-column: 1 / -1; margin: 0 0 .25rem; padding: .25rem .6rem; border-radius: .45rem;
  background: hsl(var(--muted) / .6); color: hsl(var(--card-foreground)); font-weight: 400;
  font-size: max(var(--min-text), .82rem); }
.stats .stat-hint[hidden] { display: none; }
.stats .ref-id { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .02em; }
.stats .stat-copy { border: 1px solid hsl(var(--border)); background: transparent; color: hsl(var(--signature-text));
  border-radius: .45rem; padding: .05rem .4rem; display: inline-flex; align-items: center; gap: .25rem; cursor: pointer;
  font: inherit; font-size: .85em; font-weight: 400; }
.stats .stat-copy .ic { width: .95rem; height: .95rem; }

/* C-66 (switch detail_icons): an icon before each line; tapped, it opens the line that says what the figure means */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.stats .stat-ic { border: 0; background: transparent; padding: .1rem; margin: 0; color: hsl(var(--signature-text));
  display: inline-grid; place-items: center; cursor: pointer; border-radius: .35rem; flex: none; }
.stats .stat-ic .ic { width: 1rem; height: 1rem; transition: transform .15s ease; }
.stats .stat-ic[aria-expanded="true"] { background: hsl(var(--signature) / .18); }
.stats .stat-ic:hover .ic, .stats .stat-ic:focus-visible .ic { transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) { .stats .stat-ic .ic { transition: none; } }

/* C-67 (switch estimate_in_ledger): the estimate of the next reply at the top of «السجل», not above the box */
#ledger-estimate h3 { margin-bottom: .2rem; }
.ledger-estimate { margin: 0 0 .6rem; color: hsl(var(--card-foreground)); overflow-wrap: anywhere; }
.no-estimate #ledger-estimate { display: none; }

/* C-68 (switch sum_tones): a fold's name in the gold, and what follows it in a lighter cream (sukari); white stays
   for the reply's own text. The lines of «تفاصيل متقدمة» (C-62) follow the same rule: the name gold, the value cream,
   spending red, positive green. Day cards take their dark text for the cream's place. */
:root { --value-soft: 40 58% 79%; }
:root[data-mode="day"], :root[data-style="dhakaa"] { --value-soft: var(--foreground); }
.ui-sum-tones .sum-v { color: hsl(var(--value-soft)); }
.ui-sum-tones .stats .stat-k { color: hsl(var(--signature-text)); }
.ui-sum-tones .stats .stat-val:not(.neg):not(.pos) { color: hsl(var(--value-soft)); }

/* ===================================================================================================================
   2.1.6: Faisal's requests of 20 October, each under its own number and switch (ت-N in the window, C-N here)
   =================================================================================================================== */

/* C-65 (switch rate_line): «هل أفادك هذا؟» and its two buttons start a line of their own under the reply's buttons,
   always together; switched off the group takes no box of its own and the row is 2.1.5's */
.rate-ask { display: contents; }
.ui-rate-line .rate-ask { display: flex; align-items: center; gap: .45rem; flex: 1 1 100%; flex-wrap: nowrap; }

/* C-73 (switch wait_gold): the waiting word in the style's gold, the brain beside it a little smaller (its size is a
   preference), and three gold dots after the word that grow and shrink one after another, in the reading direction
   (right to left in Arabic) */
.typing-tail { display: none; gap: .3rem; align-items: center; padding-inline-start: .05rem; }
.typing-tail i { width: .42rem; height: .42rem; border-radius: 50%; background: hsl(var(--signature)); display: block;
  animation: wait-tail 1.2s ease-in-out infinite; }
.typing-tail i:nth-child(2) { animation-delay: .2s; }
.typing-tail i:nth-child(3) { animation-delay: .4s; }
@keyframes wait-tail { 0%, 70%, 100% { transform: scale(.55); opacity: .45; } 35% { transform: scale(1.15); opacity: 1; } }
.ui-wait-gold .typing-word { color: hsl(var(--signature-text)); font-weight: 700; }
.ui-wait-word.ui-wait-gold.wait-tail:not(.wait-dots) .typing-word:not(:empty) + .typing-tail { display: inline-flex; }
.ui-wait-gold:not(.wait-dots)[data-brain-size="small"] .typing-brain { width: 1.45rem; height: 1.45rem; border-radius: .4rem; }
.ui-wait-gold:not(.wait-dots)[data-brain-size="medium"] .typing-brain { width: 1.75rem; height: 1.75rem; border-radius: .48rem; }
.ui-wait-gold .typing { gap: .45rem; }
@media (prefers-reduced-motion: reduce) { .typing-tail i { animation: none; transform: none; opacity: .8; } }

/* C-70 (Ultra «row_tones», switched in «المظهر»): the conversation rows alternate in two tones of the style, tuned for
   each style by night and by day; the current one stands out with a gold bar, a stronger tone and a gold title */
:root { --row-a: 216 69% 11.1%; --row-b: 216 66% 14.8%; --row-cur: 216 62% 19%; --row-bar: var(--signature);
  --row-title: var(--signature-text); }
:root[data-style="aleem-mukhtalif"][data-mode="day"] { --row-a: 44 50% 95.5%; --row-b: 42 42% 89.5%; --row-cur: 41 48% 83%;
  --row-bar: 38 70% 25%; --row-title: 38 70% 25%; }
:root[data-style="dhakaa"] { --row-a: 210 25% 97.5%; --row-b: 212 25% 93.5%; --row-cur: 213 38% 89%;
  --row-bar: 26 90% 29%; --row-title: 26 90% 29%; }
:root[data-style="annabi-dhahabi"] { --row-a: 348 71% 6.9%; --row-b: 349 64% 11.6%; --row-cur: 349 60% 16.2%;
  --row-bar: var(--signature); --row-title: var(--signature-text); }
:root[data-style="annabi-dhahabi"][data-mode="day"] { --row-a: 40 80% 96.5%; --row-b: 38 48% 89.5%; --row-cur: 352 32% 88%;
  --row-bar: 42 79% 22%; --row-title: 42 79% 22%; }
:root[data-style="mawthooq"] { --row-a: 219 94% 9.3%; --row-b: 219 86% 13.4%; --row-cur: 219 80% 17.8%;
  --row-bar: var(--signature); --row-title: var(--signature-text); }
:root[data-style="mawthooq"][data-mode="day"] { --row-a: 213 60% 98.5%; --row-b: 214 55% 94.5%; --row-cur: 215 52% 88.5%;
  --row-bar: 40 100% 20%; --row-title: 40 100% 20%; }
:root[data-style="akhdar-dhahabi"] { --row-a: 158 63% 6.5%; --row-b: 157 56% 10.6%; --row-cur: 157 52% 14.6%;
  --row-bar: var(--signature); --row-title: var(--signature-text); }
:root[data-style="akhdar-dhahabi"][data-mode="day"] { --row-a: 48 70% 96.5%; --row-b: 48 38% 89.5%; --row-cur: 150 22% 87%;
  --row-bar: 42 79% 22%; --row-title: 42 79% 22%; }
.feat-row-tones .history ul { border-radius: calc(var(--radius) * .5); }
.feat-row-tones .history li { border-radius: 0; background: hsl(var(--row-a)); }
.feat-row-tones .history li:nth-child(even) { background: hsl(var(--row-b)); }
.feat-row-tones .history li:first-child { border-start-start-radius: .5rem; border-start-end-radius: .5rem; }
.feat-row-tones .history li:last-child { border-end-start-radius: .5rem; border-end-end-radius: .5rem; }
.feat-row-tones .history li:has(> .open-conv[aria-current="true"]) { background: hsl(var(--row-cur)); }
.feat-row-tones .history li:has(> .open-conv[aria-current="true"])::before {
  content: ""; position: absolute; inset-block: .2rem; inset-inline-start: 0; width: .25rem; border-radius: 99px;
  background: hsl(var(--row-bar));
}
.feat-row-tones .history li .open-conv[aria-current="true"] { background: transparent; color: hsl(var(--foreground)); }
.feat-row-tones .history li .open-conv[aria-current="true"] bdi { color: hsl(var(--row-title)); }
.feat-row-tones .history li .open-conv:hover { background: hsl(var(--foreground) / .07); color: inherit; }

/* C-74 (switch set_sections): the settings in sections that fold, each opened by an arrow like the work trail's */
.set-sec { border: 1px solid hsl(var(--border)); border-radius: var(--radius); margin-block: .7rem; background: hsl(var(--card)); }
/* the summary keeps the browser's own disclosure arrow, exactly the work trail's: it points along the reading
   direction while folded and down while open, mirrored for Arabic by the browser itself */
.set-sec > summary { cursor: pointer; padding: .75rem 1rem; font-weight: 700; font-size: 1.05rem;
  color: hsl(var(--signature-text)); }
.set-sec[open] > summary { border-bottom: 1px solid hsl(var(--border)); }
.set-sec-count { margin-inline-start: .55rem; font-weight: 400; font-size: max(var(--min-text), .8rem);
  color: hsl(var(--muted-foreground)); }
.set-sec-body { padding: 0 .9rem .3rem; }
.set-sec-body > .set-group:first-child { border-top: 0; }

/* C-71 (Ultra «ref_numbers»): the lasting numbers beside the sections (ق-N) and the settings (إ-N) */
.ref-badge { display: none; }
.feat-ref-numbers .ref-badge {
  display: inline-block; margin-inline-start: .45rem; padding: 0 .45rem; border-radius: 99px; font-weight: 700;
  border: 1px solid hsl(var(--signature) / .6); color: hsl(var(--signature-text)); background: hsl(var(--card));
  font-size: max(var(--min-text), .75rem); line-height: 1.6; vertical-align: .08em; white-space: nowrap;
}

/* C-72 (switch band_grip, with the Ultra top bar): a grip under the header opens and folds the extra rows, and drags
   them larger (with names) or smaller; every settings group can put itself there, like a desktop shortcut */
.app { grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "band" "more" "grip" "shell" "composer" "foot"; }
.app > .band-grip { grid-area: grip; }
.ui-band-grip #band-more-btn { display: none; }
.band-grip {
  display: block; width: 100%; height: 1.1rem; padding: .3rem 0; margin: 0; border: 0; cursor: grab; touch-action: none;
  background: hsl(var(--header)); border-bottom: 1px solid hsl(var(--signature) / .25);
}
.band-grip:active { cursor: grabbing; }
.band-grip span { display: block; width: 2.8rem; height: .32rem; margin: 0 auto; border-radius: 99px; background: hsl(var(--signature) / .75); }
.band-grip:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
.band-grip.dragging span { background: hsl(var(--signature)); width: 3.6rem; }
.band-more[data-size="compact"] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.band-more[data-size="full"] { flex-wrap: wrap; }
.band-more[data-size="full"] .band-btn {
  flex-direction: column; justify-content: center; width: auto; height: auto; min-width: 4.6rem; padding: .45rem .55rem;
  border-radius: .9rem; gap: .25rem;
}
.band-more[data-size="full"] .band-btn .ic { width: 1.35rem; height: 1.35rem; }
.band-more[data-size="full"] .band-btn .long { display: block; font-size: max(var(--min-text), .78rem); white-space: nowrap; }
.pin-btn {
  display: none; margin-inline-start: auto; width: 1.9rem; height: 1.9rem; border-radius: 50%; place-items: center;
  border: 1px solid hsl(var(--border)); background: transparent; color: hsl(var(--muted-foreground)); cursor: pointer; flex: none;
}
.pin-btn .ic { width: .95rem; height: .95rem; }
.pin-btn[aria-pressed="true"] { color: hsl(var(--signature-text)); border-color: hsl(var(--signature) / .7); }
.pins-on .pin-btn { display: inline-grid; }
.set-group.has-pin { position: relative; display: flow-root; }
.set-group.has-pin > h3 { padding-inline-end: 2.4rem; }
.set-group > .pin-btn { position: absolute; inset-inline-end: 0; top: .85rem; }
.panel-head.has-pin { gap: .4rem; }

/* C-75 (switch install_hint): how to put Aleem on this device, said for the device that opens the page */
.install-hint {
  display: grid; gap: .5rem; text-align: start; padding: .75rem .9rem; border-radius: var(--radius);
  border: 1px solid hsl(var(--signature) / .5); background: hsl(var(--card)); color: hsl(var(--card-foreground));
  font-size: max(var(--min-text), .92rem); line-height: 1.7; margin-block: .4rem;
}
.install-hint strong { color: hsl(var(--signature-text)); }
.install-hint p { margin: 0; }
.install-hint .row { display: flex; flex-wrap: wrap; gap: .5rem; }
.welcome .install-hint { max-width: 34rem; margin-inline: auto; }

/* C-76 (switch slogan): the new slogan under the name; C-77 (switch gate_born): «وُلد في العربية، وتفرّد فيها» on the
   sign-in page, and what shows it, beside what Aleem does (wide screens) */
:root:not(.ui-slogan) .slogan-new, :root.ui-slogan .slogan-old { display: none !important; }
.born, .gate-proof { display: none; }
:root.ui-gate-born .born { display: block; margin: 0 0 .7rem; font-weight: 700; font-size: 1.08rem; color: hsl(var(--signature-text)); }
@media (min-width: 48rem) {
  :root.ui-gate-wide.ui-gate-born .gate-proof {
    display: grid; gap: .4rem; list-style: none; margin: 0 0 .9rem; padding: 0; text-align: start; width: 100%;
    color: hsl(var(--card-foreground));
  }
  :root.ui-gate-wide.ui-gate-born .gate-proof li { position: relative; padding-inline-start: 1.5rem; line-height: 1.7; }
  :root.ui-gate-wide.ui-gate-born .gate-proof li::before {
    content: "✓"; position: absolute; inset-inline-start: .1rem; top: 0; color: hsl(var(--signature-text)); font-weight: 700;
  }
  :root.ui-gate-wide .gate-hero .born { font-size: 1.3rem; }
}

/* C-78 (switch share_aleem): the share button in «عن عليم والشروط» */
.share-aleem-row { align-items: center; }

/* C-84 (switch sources_chip): the sources as stacked site icons beside the reply's buttons, and their sheet */
.src-chip {
  display: inline-flex; align-items: center; gap: .45rem; height: 2rem; padding-block: 0; padding-inline: .3rem .7rem;
  border-radius: 99px; border: 1px solid hsl(var(--border)); background: transparent; color: hsl(var(--muted-foreground));
  cursor: pointer; font: inherit; font-size: max(var(--min-text), .85rem); white-space: nowrap;
}
.src-chip:hover { color: hsl(var(--foreground)); border-color: hsl(var(--primary)); }
.src-chip:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.src-icons { display: inline-flex; align-items: center; }
.src-icons .src-ic + .src-ic { margin-inline-start: -.5rem; }
.src-ic {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  overflow: hidden; background: hsl(var(--hue, 210) 50% 32%); color: #fff; font-family: var(--font-ui);
  font-weight: 700; font-size: max(var(--min-text), .8rem); line-height: 1;
  box-shadow: 0 0 0 2px hsl(var(--card));
}
.src-ic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: .12rem; background: #fff; }
.src-ic:not(.has-img) img { visibility: hidden; }
.sources-box { gap: .55rem; }
.src-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; max-height: min(62vh, 30rem); overflow: auto; }
.src-list a {
  display: flex; align-items: center; gap: .7rem; padding: .5rem .45rem; border-radius: .6rem; color: inherit; text-decoration: none;
}
.src-list a:hover, .src-list a:focus-visible { background: hsl(var(--foreground) / .07); }
.src-list a:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
.src-list .src-ic { width: 2rem; height: 2rem; font-size: max(var(--min-text), .95rem); box-shadow: none; }
.src-text { display: grid; gap: .05rem; min-width: 0; flex: 1; }
.src-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-site { font-size: max(var(--min-text), .8rem); color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }

/* C-87: «تفاصيل متقدمة» line by line, each name and its value on one line. The name's box took its baseline from the
   icon's lower edge (an svg has no text line), so the value sat a little below its name; the icon now sits centred
   and the name's own text gives the line. A fix, without a switch. */
.stats .stat-k { align-items: baseline; }
.stats .stat-k .stat-ic { align-self: center; }

/* C-88: the icons that point a way follow the language: in Arabic the tokens' arrows run leftwards, into the bracket
   and out of it, and the trail's dots stand on the right as an Arabic list's do; the English window keeps them as
   drawn. The hover's growth keeps the turn. A fix, without a switch. */
[dir="rtl"] .stats .stat-ic .ic.mirror { transform: scaleX(-1); }
[dir="rtl"] .stats .stat-ic:hover .ic.mirror,
[dir="rtl"] .stats .stat-ic:focus-visible .ic.mirror { transform: scale(-1.15, 1.15); }

/* 2.1.7 ----------------------------------------------------------------------------------------------------
   C-95: the owner's audit log, under his security options: each line its action, then what it concerns, then
   when and from where (Riyadh time and the visitor's address), on one wrapping row. */
.audit-box { margin-top: 1rem; display: grid; gap: .45rem; }
.audit-box h4 { margin: 0; }
.audit-list { max-height: 22rem; overflow-y: auto; }
.audit-list li.audit-row { justify-content: flex-start; gap: .2rem .6rem; }
.audit-row .audit-when { margin-inline-start: auto; color: hsl(var(--muted-foreground));
  font-size: max(var(--min-text), .84rem); }
/* C-97: free routing (its own section); C-98: the purity part of the privacy section */
.model-pick { display: inline-flex; align-items: center; gap: .35rem; }
.model-icon { display: inline-flex; flex: none; }
.model-icon .src-ic { width: 1.35rem; height: 1.35rem; box-shadow: none; }
.free-route .conn-head .src-ic { width: 1.5rem; height: 1.5rem; box-shadow: none; }
.free-order { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid hsl(var(--signature)); color: hsl(var(--signature-text)); font-weight: 700;
  font-size: max(var(--min-text), .8rem); }
.free-use, .free-quota, .free-rest { margin: 0; }
.free-rest { color: hsl(var(--foreground)); }
.free-pick select { flex: 1 1 12rem; min-width: 0; }
.hint.warn { border-inline-start: .25rem solid hsl(var(--signature)); padding-inline-start: .6rem; color: hsl(var(--foreground)); }
.panel h4.part { font-size: 1.02rem; margin: 1.2rem 0 .5rem; padding-bottom: .25rem; color: hsl(var(--signature-text));
  border-bottom: 1px solid hsl(var(--signature) / .5); }
.tag.purity { font-weight: 700; color: hsl(var(--foreground)); }
.tag.purity.low { border-color: hsl(var(--destructive)); }
.purity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.purity-row { display: grid; gap: .3rem; padding: .6rem .8rem; border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * .6); background: hsl(var(--card)); }
.purity-points { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: .1rem; font-size: max(var(--min-text), .86rem); }
.purity-row .hint { margin: 0; overflow-wrap: anywhere; }
.purity-own input { width: 6rem; }