/* 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; }
/* C-199 (HSB-0296): no text box has a corner that drags it bigger or smaller */
textarea { resize: none; }
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; }
/* C-214 (HSB-0052): the password and its eye (C-168's, the icon alone) on one line */
.login-form .pw-row { display: flex; align-items: center; gap: .4rem; }
.login-form .pw-row input { flex: 1 1 auto; min-width: 0; }
.login-form .pw-row .eye-btn { padding: .4rem .55rem; }
.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; }
/* C-209 (M9): the drawer's title and, on a phone, its own close at the other end of the same line */
.history-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin: 0 0 .4rem; }
.history-head h2 { margin: 0; }
.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: none; 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; }
/* C-168: the bubble holds the request's text and its date; the text alone is what is copied, shared and quoted */
.request-bubble {
  max-width: 85%; background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  border-radius: 1.4rem 1.4rem 1.4rem .4rem; padding: .55rem 1rem; display: grid; gap: .1rem; min-width: 0;
}
.request-text { 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)); }
/* C-191 (HSB-0263): «حالة الرد» «بالشريط»: green on a reply that succeeded, red on one that failed (as before); a stopped
   reply keeps its grey. Switched off, neither: the sheet's own edge */
.reply.done > .sheet:not(.stopped):not(.error) { border-inline-start: .3rem solid hsl(var(--tone-pos)); }
:root.no-st-bar .reply.done > .sheet:not(.stopped), :root.no-st-bar .sheet.error { border-inline-start: 1px solid hsl(var(--border)); }
.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; }
/* C-110: an Arabic word in a cell never splits mid-letter («الخ/طو/ة»): headers stay whole, cells wrap between words,
   and a table too wide for the phone scrolls inside its frame */
.answer th, .answer td { overflow-wrap: normal; word-break: normal; }
.answer th { white-space: nowrap; }
.answer td { overflow-wrap: break-word; }
.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-start: 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: none; }
.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: none; 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-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; }

.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)); }
.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; white-space: pre-line; }
.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-bubble { 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, .rec-table .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; }
.dots .d19 { background: #060a18; } .dots .d20 { background: #25cbe4; }                       /* C-175 */
.dots .d21 { background: #edf3f8; } .dots .d22 { background: #1a889e; }

/* 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 { 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: none; 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); }

/* C-38: about Aleem and its terms */
.legal-links { display: grid; gap: .3rem; }
.legal-links a { color: hsl(var(--signature-text)); }
/* C-170 (HSB-0129): «الدعم» first, above the terms, its address beside it */
#support-link { font-weight: 700; }

/* 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; }
/* C-191: «حالة الرد»: its two switches across the group, one under the other, without a box of their own */
#reply-state-switches { flex-basis: 100%; display: grid; gap: .2rem; }
#reply-state-switches .switch-row { margin: 0; padding: .3rem 0; border: 0; background: transparent; }
#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: minmax(0, 1fr); gap: .2rem; align-items: baseline; }
/* C-153 (HSB-0054): a row is its key, a colon and the value right after it, never a column of values far from short
   keys; a long value wraps under its own row */
.stats .stat-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .45rem; row-gap: .15rem; min-width: 0; }
.stats .stat-row > .stat-k { flex: none; }
.stats .stat-row > .stat-val { min-width: 0; flex: 0 1 auto; }
.stats .stat-row > .stat-hint { flex: 1 0 100%; }
.stats .stat-row > .stat-val:has(.ref-id) { flex: 1 1 0; }
.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);
  /* C-131: the note wraps inside the card on a phone, never cut or spilling past its box */
  min-width: 0; max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; line-height: 1.7; }
.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%; }
/* C-207 (a fix): «عليم العصبوني» (C-175) had no row tones of its own, so by day its tables took the navy night rows
   under its dark ink and their text could not be read; its own tones now, deep ink by night, pearl and teal by day */
:root[data-style="aleem-asabouni"] { --row-a: 228 52% 8.6%; --row-b: 227 46% 12.2%; --row-cur: 224 44% 16.4%;
  --row-bar: var(--signature); --row-title: var(--signature-text); }
:root[data-style="aleem-asabouni"][data-mode="day"] { --row-a: 205 60% 98%; --row-b: 206 40% 91%; --row-cur: 196 42% 85.5%;
  --row-bar: 192 75% 28%; --row-title: 192 75% 26%; }
.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)); }
/* C-103: the count is a box of its own, shaped apart from the title (never joined to its last letter), kept whole
   on one line and moved under the title as a whole when the line is too short */
.set-sec-count { display: inline-block; margin-inline-start: .4rem; font-weight: 400; white-space: nowrap;
  unicode-bidi: isolate; 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; }
/* C-176: «توحيد لون القوائم مع النمط»: the bar (and, when chosen, its extra row) takes the style's own colour: its deep
   tone on a light style, its lifted tone on a dark one; everything on the bar reads its colours from these two */
:root[data-bar-tone="bar"][data-scheme="light"] .band, :root[data-bar-tone="bar_menu"][data-scheme="light"] .band,
:root[data-bar-tone="bar_menu"][data-scheme="light"] .band-more,
:root[data-bar-tone="bar_menu"][data-scheme="light"] .band-grip {
  --header: var(--deep); --header-foreground: var(--background); }
:root[data-bar-tone="bar"][data-scheme="dark"] .band, :root[data-bar-tone="bar_menu"][data-scheme="dark"] .band,
:root[data-bar-tone="bar_menu"][data-scheme="dark"] .band-more,
:root[data-bar-tone="bar_menu"][data-scheme="dark"] .band-grip {
  --header: var(--secondary); --header-foreground: var(--secondary-foreground); }
.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; }
/* 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; }

/* -- 2.1.12 (C-118): Faisal's notes of 23 October -------------------------------------------------------------- */
/* M3: windows open from the start side (the right in Arabic), like the conversations list */
.panel { border-inline-start: 0; border-inline-end: .3rem solid hsl(var(--signature)); }
/* M9: a window's head and its close stay in reach however far it scrolls */
.panel-head { position: sticky; top: calc(-1rem - env(safe-area-inset-top, 0px)); z-index: 2; background: hsl(var(--popover));
  margin-inline: -1.3rem; padding: .6rem 1.3rem; border-bottom: 1px solid hsl(var(--border)); }
.adv { position: relative; }
.adv-close { position: absolute; inset-block-start: .3rem; inset-inline-end: .3rem; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid hsl(var(--border)); background: hsl(var(--popover)); color: hsl(var(--muted-foreground)); cursor: pointer; }
.adv-close .ic { width: 1rem; height: 1rem; }
/* M1: code in high contrast, in both modes, with a bar and a copy button */
.answer .codebox { margin: .6rem 0; border-radius: .6rem; overflow: hidden; border: 1px solid hsl(220 15% 28%); direction: ltr; }
.answer .codebar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem .6rem;
  background: hsl(220 18% 20%); color: hsl(220 15% 80%); font-family: var(--font-mono); font-size: max(var(--min-text), .8rem); }
.answer .code-copy { font: inherit; color: hsl(45 90% 70%); background: transparent; border: 1px solid hsl(45 60% 45%);
  border-radius: .4rem; padding: .1rem .6rem; cursor: pointer; }
.answer .codebox pre { margin: 0; border-radius: 0; background: hsl(220 22% 12%); color: hsl(210 20% 92%); }
.answer .codebox pre code { color: inherit; }
/* M20: every message's time; C-168 (HSB-0087, HSB-0088): inside the message itself, the request's bubble or the reply's
   sheet, at its end (the end side, where reading ends) or its start; no copy button beside it */
.request { flex-direction: column; align-items: flex-start; gap: .3rem; }
/* C-202 (HSB-0332): the date and time at the start of the line (the right in Arabic), in the request and the reply */
.msg-when { margin: 0; font-size: max(var(--min-text), .78rem); line-height: 1.5; text-align: start; }
.msg-when.at-start { text-align: start; }
/* in the request's bubble it keeps the bubble's own ink: the default day style's gold leaves no room for a lighter one */
.sheet .msg-when { color: hsl(var(--muted-foreground)); }
/* M26 (C-132): more than one size, as the owner asked: tables a size smaller so long cells and keys fit without a new line */
html { text-size-adjust: 100%; }
.answer li, .answer blockquote { font-size: 1em; }
.answer table { font-size: .86em; }
.answer th, .answer td { font-size: 1em; }
/* M28: list numbers in Arabic-Indic digits in the Arabic window */
:root:not([lang="en"]) .answer ol { list-style-type: arabic-indic; }
/* M27 (the inverted «تفاصيل متقدمة» box) removed in 2.1.13 at the owner's request: the box is back to the card's own colours */

/* C-121: وضعية الطرفية — the conversation as a terminal; five themes on the same tokens */
:root.term { --term-bg: #050805; --term-fg: #39ff6a; --term-dim: #1f9a3d; --term-acc: #9dffb4; }
:root.term[data-term="retro"] { --term-bg: #120b00; --term-fg: #ffb000; --term-dim: #a86f00; --term-acc: #ffd780; }
:root.term[data-term="kali"] { --term-bg: #0b1220; --term-fg: #d6e2ff; --term-dim: #4c7ad9; --term-acc: #6ec1ff; }
:root.term[data-term="agnoster"] { --term-bg: #1c1f26; --term-fg: #e6e6e6; --term-dim: #7f8c98; --term-acc: #f2b705; }
:root.term[data-term="aleem"] { --term-bg: #0f2e4a; --term-fg: #f6e7c1; --term-dim: #b7953f; --term-acc: #f2b705; }
:root.term .shell main, :root.term .thread, :root.term .composer, :root.term .composer-box, :root.term #message { background: var(--term-bg) !important; color: var(--term-fg) !important; }
:root.term .thread, :root.term #message, :root.term .term-line { font-family: var(--font-mono), "Noto Naskh Arabic", monospace !important; }
:root.term .request-bubble { background: transparent !important; color: var(--term-acc) !important; border-radius: 0; padding: 0; }
:root.term .request-text::before { content: "$ "; color: var(--term-dim); }
:root.term .sheet { background: transparent !important; color: var(--term-fg) !important; border: 0 !important; box-shadow: none !important; }
:root.term .reply .av { display: none; }
:root.term .answer, :root.term .answer * { color: var(--term-fg) !important; }
.term-line { list-style: none; white-space: pre-wrap; unicode-bidi: plaintext; color: var(--term-fg, inherit); font-size: max(var(--min-text), .92rem); }
.term-line.term-cmd { color: var(--term-acc, inherit); }
.term-line.term-err { color: #ff6b6b; }
#term-btn[aria-pressed="true"] { color: var(--term-acc); border-color: var(--term-acc); }

/* M18: a new chat shows itself: the welcome comes in afresh */
@keyframes aleem-fresh { from { opacity: .25; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }
#welcome.fresh { animation: aleem-fresh .35s ease-out; }
@media (prefers-reduced-motion: reduce) { #welcome.fresh { animation: none; } }

/* M24: the direction each block was given wins over «plaintext» */
.answer p[dir], .answer li[dir], .answer h2[dir], .answer h3[dir], .answer h4[dir], .answer blockquote[dir],
.answer td[dir], .answer th[dir] { unicode-bidi: isolate; text-align: start; }

/* C-123 (M15): the owner's board */
.board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .6rem; }
.board-card { display: grid; gap: .25rem; padding: .8rem .9rem; border-radius: .8rem; background: hsl(var(--muted) / .6); border: 1px solid hsl(var(--border)); min-width: 0; }
.board-card .board-h { color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .82rem); }
.board-card .board-v { font-size: 1.35rem; color: hsl(var(--signature-text)); }
.board-card small { color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
.board-card.ok { border-color: hsl(145 55% 40% / .6); }
.board-card.warn { border-color: hsl(40 90% 50% / .7); }
.board-card.bad { border-color: hsl(0 70% 50% / .7); }
/* C-194 (HSB-0271): «صحة الأجزاء» across the whole board, its parts in a table, one a row */
.board-card.board-wide { grid-column: 1 / -1; }
.board-card .board-parts { margin-top: .35rem; }
.board-parts td.pstate { white-space: nowrap; width: 1%; font-weight: 700; }
.board-parts td.pstate.ok { color: hsl(var(--tone-pos)); }
.board-parts td.pstate.bad { color: hsl(var(--tone-neg)); white-space: normal; }

/* C-124: the settings as tabs: a row that scrolls sideways under the window's head, one section at a time */
.set-tabs { position: sticky; top: calc(2.9rem - env(safe-area-inset-top, 0px)); z-index: 1; display: flex; gap: .35rem; overflow-x: auto;
  scrollbar-width: none; margin-inline: -1.3rem; padding: .45rem 1.3rem; background: hsl(var(--popover)); border-bottom: 1px solid hsl(var(--border)); }
.set-tabs::-webkit-scrollbar { display: none; }
.set-tab { flex: none; border: 1px solid hsl(var(--border)); background: transparent; color: hsl(var(--muted-foreground));
  border-radius: 999px; padding: .3rem .85rem; font: inherit; font-size: max(var(--min-text), .88rem); cursor: pointer; white-space: nowrap; }
.set-tab[aria-selected="true"] { background: hsl(var(--signature) / .16); color: hsl(var(--signature-text)); border-color: hsl(var(--signature)); font-weight: 700; }
#settings.tabbed > .set-sec > summary { display: none; }
#settings.tabbed > .set-sec { border: 0; }

/* C-125 (M19): the clip's menu, photos first */
.composer-box { position: relative; }
.attach-menu { position: absolute; inset-block-end: calc(100% + .4rem); inset-inline-start: 0; z-index: 5; display: grid; gap: .15rem;
  min-width: 13rem; padding: .35rem; border-radius: .9rem; background: hsl(var(--popover)); border: 1px solid hsl(var(--border));
  box-shadow: 0 .6rem 2rem hsl(var(--deep) / .25); }
.attach-menu button { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border: 0; border-radius: .6rem; background: transparent;
  color: hsl(var(--popover-foreground)); font: inherit; cursor: pointer; text-align: start; }
.attach-menu button:hover, .attach-menu button:focus-visible { background: hsl(var(--accent)); }
.attach-menu .ic { width: 1.2rem; height: 1.2rem; color: hsl(var(--signature-text)); }
/* C-201 (HSB-0331): the menu stands off the page in every style: a surface lifted a step and tinted with the style's
   own colour, a light along its top edge, a rim in that colour, a line between its items, each icon on its tile, and a
   press that answers. Night lifts it toward the colour; day keeps it white and lets the shadow and the rim set it apart */
.attach-menu { gap: 0; padding: .3rem; min-width: 14rem; border-radius: 1.05rem; overflow: hidden;
  border: 1px solid hsl(var(--signature) / .55);
  background: linear-gradient(180deg, hsl(var(--signature) / .16), hsl(var(--signature) / 0) 3.2rem), hsl(var(--popover));
  box-shadow: 0 1.1rem 2.6rem hsl(var(--deep) / .5), 0 .2rem .5rem hsl(var(--deep) / .3), inset 0 1px 0 hsl(var(--signature) / .4); }
:root[data-scheme="dark"] .attach-menu {
  background: linear-gradient(180deg, hsl(var(--signature) / .18), hsl(var(--signature) / 0) 3.2rem),
    color-mix(in srgb, hsl(var(--popover)) 86%, hsl(var(--signature)) 14%); }
:root[data-scheme="light"] .attach-menu {
  box-shadow: 0 1rem 2.4rem hsl(var(--deep) / .2), 0 .15rem .45rem hsl(var(--deep) / .14), inset 0 1px 0 hsl(0 0% 100% / .9); }
.attach-menu button { position: relative; padding: .7rem .75rem; border-radius: .75rem; font-weight: 600;
  transition: background-color .15s ease, transform .1s ease; }
.attach-menu button + button::before { content: ""; position: absolute; top: 0; inset-inline: .7rem; height: 1px;
  background: hsl(var(--signature) / .32); }
.attach-menu button:hover, .attach-menu button:focus-visible { background: hsl(var(--signature) / .14); }
.attach-menu button:active { background: hsl(var(--signature) / .26); transform: scale(.985); }
.attach-menu button:hover + button::before, .attach-menu button:focus-visible + button::before,
.attach-menu button:active + button::before { opacity: 0; }
.attach-menu .ic { box-sizing: content-box; flex: none; padding: .42rem; border-radius: .65rem;
  background: hsl(var(--signature) / .17); box-shadow: inset 0 0 0 1px hsl(var(--signature) / .3); }
@media (prefers-reduced-motion: reduce) { .attach-menu button { transition: none; } .attach-menu button:active { transform: none; } }
/* C-126 (M12): the row's small arrow turns with it */
#band-more-btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
#band-more-btn .ic { transition: transform .2s ease; }
/* C-126 (M2): one brain, not two: while Aleem works, its own fixed icon beside the reply is the one that moves, in step
   with what it is doing (thinking, using a tool, writing); the second small brain in the waiting line steps aside */
.reply[data-phase="think"] .typing-brain, .reply[data-phase="tool"] .typing-brain, .reply[data-phase="write"] .typing-brain { display: none; }
.reply[data-phase="think"] .av { animation: alm-brain-pulse 1.5s ease-in-out infinite; }
.reply[data-phase="tool"] .av { animation: brain-tool 1.3s ease-in-out infinite, alm-glow 1.3s ease-in-out infinite; }
.reply[data-phase="write"] .av { animation: alm-glow 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .reply[data-phase] .av { animation: none; } }

/* C-127: the brain moves while Aleem works even when the phone asks for less motion, because the owner chose it
   (switch brain_motion); and a small brain sits beside «يعمل عليم منذ …» and moves with the same phase */
@media (prefers-reduced-motion: reduce) {
  :root.ui-brain-motion[data-brain="think"] .band .mark, :root.ui-brain-motion .reply[data-phase="think"] .av,
  :root.ui-brain-motion .reply[data-phase="think"] .clock-brain { animation: alm-brain-pulse 1.5s ease-in-out infinite !important; }
  :root.ui-brain-motion[data-brain="tool"] .band .mark, :root.ui-brain-motion .reply[data-phase="tool"] .av,
  :root.ui-brain-motion .reply[data-phase="tool"] .clock-brain { animation: brain-tool 1.3s ease-in-out infinite, alm-glow 1.3s ease-in-out infinite !important; }
  :root.ui-brain-motion[data-brain="write"] .band .mark, :root.ui-brain-motion .reply[data-phase="write"] .av,
  :root.ui-brain-motion .reply[data-phase="write"] .clock-brain { animation: brain-write .9s ease-in-out infinite, alm-glow 2s ease-in-out infinite !important; }
}
.clock { display: flex; align-items: center; gap: .4rem; }
.clock-brain { width: 1.4rem; height: 1.4rem; border-radius: .4rem; flex: none; display: inline-block; }
.clock-brain img { width: 100%; height: 100%; border-radius: inherit; display: block; }
.reply.done .clock-brain { display: none; }
:root.ui-brain-motion .reply[data-phase="think"] .clock-brain { animation: alm-brain-pulse 1.5s ease-in-out infinite; }
:root.ui-brain-motion .reply[data-phase="tool"] .clock-brain { animation: brain-tool 1.3s ease-in-out infinite, alm-glow 1.3s ease-in-out infinite; }
:root.ui-brain-motion .reply[data-phase="write"] .clock-brain { animation: brain-write .9s ease-in-out infinite, alm-glow 2s ease-in-out infinite; }

/* 2.1.13: view mode (phone or desktop), chosen in settings; auto by screen width. C-164 (HSB-0081): the brand mark keeps
   its own rounded square (.mark, --radius-tile); 2.1.13 had made it round, a change Faisal never asked for */
html.m-phone { font-size: 15px; }
html.m-phone .band { gap: .2rem; padding-inline: .35rem; }
html.m-phone .band-actions { gap: .2rem; }
html.m-phone .band-btn, html.m-phone .band .mark { width: 2.05rem; height: 2.05rem; padding: 0; justify-content: center; }
html.m-phone .band-btn .long, html.m-phone .names .tag, html.m-phone .plan-badge { display: none; }
html.m-phone .band-btn .ic { width: 1.05rem; height: 1.05rem; }
html.m-desk { font-size: clamp(1.05rem, .3vw + .85rem, 1.5rem); }
/* 2.1.13: the work-path steps are notes about the reply, smaller than the reply itself */
.trail .steps, .stats .trail-stat .steps { font-size: max(var(--min-text), .8rem); line-height: 1.55; gap: .1rem; }
.trail .steps li, .stats .trail-stat .steps li { padding-inline-start: 1.1rem; }
.trail .steps li::before, .stats .trail-stat .steps li::before { width: .45rem; height: .45rem; }
.trail summary { font-size: .86rem; }
/* 2.1.13 (٨): the reference number and its copy button share one line; a long number is shortened on screen and copied whole */
.stats .stat-val:has(.ref-id) { display: flex; align-items: center; gap: .45rem; flex-wrap: nowrap; min-width: 0; }
.stats .stat-val .ref-id { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats .stat-val .stat-copy { flex: none; }

/* C-130: «لوحتي» on a phone — two compact tiles a row, not one giant card each */
html.m-phone .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
html.m-phone .board-card { padding: .55rem .65rem; border-radius: .6rem; gap: .1rem; }
html.m-phone .board-card .board-h { font-size: max(var(--min-text), .78rem); }
html.m-phone .board-card .board-v { font-size: 1.05rem; }
html.m-phone .board-card small { font-size: max(var(--min-text), .74rem); line-height: 1.5; }
/* C-136: a wide table or a long code line scrolls inside its own box; the reply never grows past the screen. A grid
   track and a flex item keep their content's widest line by default (min-width: auto), so a table pushed the whole
   reply 46px past a phone's edge, where it was cut off */
.thread { grid-template-columns: minmax(0, 1fr); }
.thread > li, .reply, .reply .sheet, .request, .answer, .reply details { min-width: 0; }
.answer .codebox pre { overflow-x: auto; }
/* C-141 (M1): the code bar's Arabic words («انسخ»، «كود») in the window's own font and direction; in the monospace
   font of the code the alef stood apart («ا نسخ») */
.answer .codebar > span:not(:empty), .answer .code-copy { font-family: var(--font-ui); }
.answer .code-copy { direction: rtl; unicode-bidi: isolate; }
.answer .codebar > span { unicode-bidi: plaintext; }
/* C-142: terminal mode on a day theme: everything under a reply takes the terminal's colours. The work trail's count,
   the «تفاصيل متقدمة» line and its values kept the day theme's dark ink, nearly invisible on the terminal's black */
:root.term .sheet summary, :root.term .sheet summary *, :root.term .sheet details, :root.term .sheet details *,
:root.term .sheet .stat-val, :root.term .sheet .stat-k, :root.term .sheet .rate, :root.term .sheet .rate * { color: var(--term-fg) !important; }
:root.term .msg-when, :root.term .sheet .stat-k, :root.term .sheet summary .k { color: var(--term-dim) !important; }
:root.term .sheet .stat-hint { background: transparent !important; border: 1px solid var(--term-dim); }

/* C-146 (HSB-0039): the conversations as a log, on the model of Raqib's «سجل الأدوار»: one line per conversation, its
   title on the right and its time on the left, a hairline between rows, and two alternating grounds for contrast */
.history #conversations { border: 1px solid hsl(var(--border)); border-radius: .7rem; }
.history li.lg-row { gap: 0; border-radius: 0; background: hsl(var(--row-a)); border-bottom: 1px solid hsl(var(--border) / .6); }
.history li.lg-row:nth-child(even) { background: hsl(var(--row-b)); }
.history li.lg-row:first-child { border-start-start-radius: .7rem; border-start-end-radius: .7rem; }
.history li.lg-row:last-child { border-bottom: 0; border-end-start-radius: .7rem; border-end-end-radius: .7rem; }
.history li.lg-row .open-conv { flex-direction: row; align-items: baseline; justify-content: space-between; gap: .75rem;
  border-radius: inherit; padding: .55rem .75rem; color: hsl(var(--foreground)); }
.history li.lg-row .conv-line { flex: 1; min-width: 0; }
.history li.lg-row .conv-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history li.lg-row .conv-when { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* C-160 (HSB-0074): the time carries its date now (٢٨-أكتوبر-٢٠٢٦ ١٠:١١ م); where the row is too narrow for both, it
   goes under the title, still at the row's end */
.history li.lg-row .open-conv { flex-wrap: wrap; row-gap: .1rem; }
.history li.lg-row .conv-line { flex: 1 1 10rem; }
.history li.lg-row .conv-when { margin-inline-start: auto; }
.history li.lg-row .open-conv:hover { background: hsl(var(--foreground) / .06); color: hsl(var(--foreground)); }
.history li.lg-row:has(> .open-conv[aria-current="true"]) { background: hsl(var(--row-cur)); }
.history li.lg-row:has(> .open-conv[aria-current="true"])::before {
  content: ""; position: absolute; inset-block: .3rem; inset-inline-start: 0; width: .22rem; border-radius: 99px;
  background: hsl(var(--row-bar)); }
.history li.lg-row .open-conv[aria-current="true"] { background: transparent; color: hsl(var(--foreground)); font-weight: 700; }
.history li.lg-row .open-conv[aria-current="true"] .conv-title { color: hsl(var(--row-title)); }
.history li.lg-row .conv-more { flex: none; opacity: .7; margin-inline-end: .15rem; }
.history li.lg-row .conv-more:hover, .history li.lg-row .conv-more:focus,
.history li.lg-row .conv-more[aria-expanded="true"] { opacity: 1; }
.conv-menu button.danger { color: hsl(var(--destructive)); }
/* C-147: the list's own state: fetching, or why it could not, with a retry */
#history-empty { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
#history-empty[hidden] { display: none; }
.hist-retry { border: 1px solid 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-145 (HSB-0033), C-155 (HSB-0059): the work trail inside «تفاصيل متقدمة» is the same list as above the reply
   (its rules sit with .trail .steps) */

/* C-152 (HSB-0046): the Claude account's balance as a sum: original, spent since the charge day, left */
.sc-rows { margin: .2rem 0 .5rem; display: grid; gap: 0; border: 1px solid hsl(var(--border)); border-radius: .7rem; overflow: hidden; }
.sc-row { display: block; padding: .5rem .75rem; line-height: 1.8;
  background: hsl(var(--row-a)); border-bottom: 1px solid hsl(var(--border) / .6); }
.sc-row:nth-child(even) { background: hsl(var(--row-b)); }
.sc-row:last-child { border-bottom: 0; }
/* C-153: the key, its colon, then the value on the same line, a long value wrapping on under it as running text */
.sc-row dt { display: inline; color: hsl(var(--muted-foreground)); font-weight: 700; }
.sc-row dd { display: inline; margin: 0; margin-inline-start: .4rem; overflow-wrap: anywhere; }
.sc-row b { color: hsl(var(--signature-text)); font-variant-numeric: tabular-nums; }
.sc-row.neg b { color: hsl(var(--tone-neg, var(--destructive))); }
.sc-row.pos b { color: hsl(var(--tone-pos, var(--signature-text))); }
.sc-form { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .4rem .6rem; align-items: center; margin-top: .4rem; }
.sc-form input { min-width: 0; }
.sc-form button { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 30rem) { .sc-form { grid-template-columns: minmax(0, 1fr); } }
.board-card.board-link { cursor: pointer; }
.board-card.board-link:hover, .board-card.board-link:focus-visible { border-color: hsl(var(--signature)); outline: none; }

/* C-166 (HSB-0079): the agent's panel, under the header's extra row and above the messages, about six lines high on a
   phone. Its colours are the window's own (the card ground, the signature gold, the tones of the figures), so it
   follows every style, by day and by night; its heart is red as a heart is. No text under the window's least size. */
.app { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "band" "more" "grip" "agent" "shell" "composer" "foot"; }
.app > .agent-panel { grid-area: agent; }
.agent-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; margin: .4rem .6rem 0;
  padding: .4rem .6rem; border: 1px solid hsl(var(--border)); border-radius: .9rem; background: hsl(var(--card));
  color: hsl(var(--card-foreground)); font-size: max(var(--min-text), .84rem); line-height: 1.38; max-height: 10.2rem;
  overflow: hidden; }
.agent-panel.with-pulse { max-height: 11.6rem; }                   /* C-180: one line more, only when chosen */
.agent-panel.folded { grid-template-columns: minmax(0, 1fr); max-height: none; padding-block: .3rem; }
.agent-panel.folded .ap-body, .agent-panel.folded .ap-caps, .agent-panel.folded .ap-say { display: none; }
.ap-main { min-width: 0; display: grid; gap: .2rem; align-content: start; position: relative; }
.ap-id { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.ap-pic, .ap-brain, .ap-heart, .ap-fold { flex: none; border: 0; padding: 0; background: transparent; cursor: pointer;
  color: inherit; display: inline-grid; place-items: center; }
.ap-pic { width: 2rem; height: 2rem; border-radius: var(--radius-tile); overflow: hidden; }
.ap-pic img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ap-who { min-width: 0; display: grid; line-height: 1.2; margin-inline-end: auto; }
.ap-who b { font-size: max(var(--min-text), .95rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-who small { color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .74rem); }
/* C-172: the three states: a state met in the signature's ink, one not met dimmed */
.ap-states [data-st] { color: hsl(var(--signature-text)); font-weight: 700; transition: opacity .4s ease; }
.ap-states [data-st].off { color: hsl(var(--muted-foreground)); font-weight: 400; opacity: .45; }
.ap-heart { width: 1.9rem; height: 1.9rem; border-radius: 50%; }
.ap-heart .ic { width: 1.25rem; height: 1.25rem; fill: currentColor; stroke: none; color: #d64550;
  animation: ap-beat 1.2s ease-in-out infinite; transform-origin: 50% 55%; }
.ap-heart.bad .ic { color: hsl(var(--tone-neg)); animation-duration: .55s; }
@keyframes ap-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(.96); }
  45% { transform: scale(1.12); } 60% { transform: scale(1); } }
/* C-196 (HSB-0291): the brain beside the heart, effect 1 «سريان الإشارة العصبية»: the vector brain on the style's tile
   (C-27), its gold lines still; at the heart's two moments signals run along the folds, their glow held to the lines,
   and a light follows the heart's curve (app.js, apBrainFx). Resting, thinking (busier, brighter) and troubled (the
   heart's .55 s, coral) colour it here */
.ap-brain { width: 1.9rem; height: 1.9rem; border-radius: var(--radius-tile); }
.ap-mark { display: block; width: 1.6rem; height: 1.6rem; }
.apb { display: block; width: 100%; height: 100%; overflow: visible; }
.apb-tile { fill: #061a34; }
.apb[data-tile="akhdar"] .apb-tile { fill: #062e20; }
.apb[data-tile="annabi"] .apb-tile { fill: #3c0912; }
.apb-ln, .apb-sw, .apb-mk, .apb-fx path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.apb-ln { stroke: #d0a149; stroke-width: 2.9; }
.apb-mk { stroke: #fff; stroke-width: 6.96; }
.apb-sw { stroke: #ffe6a0; stroke-width: 2.9; opacity: 0; }
.apb-halo { stroke: #ffd56a; stroke-width: 7.54; opacity: .75; }
.apb-core { stroke: #fffaf0; stroke-width: 3.05; }
.apb[data-st="think"] .apb-sw { stroke: #fff1c6; }
.apb[data-st="think"] .apb-halo { stroke: #ffe28e; opacity: .95; }
.apb[data-st="think"] .apb-core { stroke: #fff; }
.apb[data-st="ill"] .apb-sw { stroke: #ff9a7e; }
.apb[data-st="ill"] .apb-halo { stroke: #ff7a5e; opacity: .9; }
.apb[data-st="ill"] .apb-core { stroke: #fff0ea; }
.apb .apb-lit .apb-halo { stroke: #fff1c6; opacity: 1; }                /* a reply's arrival: one brighter flow */
.apb .apb-lit .apb-core, .apb .apb-sw.apb-lit { stroke: #fff; }
/* C-204 (HSB-0338), switch brain_hollow «الدماغ المفرغ»: the panel's brain alone, without its tile, like the heart
   beside it. Night keeps its gold and its light; day draws it in the style's deeper colour so it reads on a light card */
:root.ui-brain-hollow .apb-tile { display: none; }
:root.ui-brain-hollow[data-scheme="light"] .apb-ln { stroke: hsl(var(--signature-text)); }
:root.ui-brain-hollow[data-scheme="light"] .apb-sw { stroke: hsl(var(--signature)); }
:root.ui-brain-hollow[data-scheme="light"] .apb-halo { stroke: hsl(var(--signature)); opacity: .4; }
:root.ui-brain-hollow[data-scheme="light"] .apb-core,
:root.ui-brain-hollow[data-scheme="light"] .apb .apb-lit .apb-core { stroke: hsl(var(--signature-text)); }
:root.ui-brain-hollow[data-scheme="light"] .apb[data-st="ill"] .apb-sw,
:root.ui-brain-hollow[data-scheme="light"] .apb[data-st="ill"] .apb-halo { stroke: hsl(0 70% 46%); }
:root.ui-brain-hollow[data-scheme="light"] .apb[data-st="ill"] .apb-core { stroke: hsl(0 72% 34%); }
/* C-205 (HSB-0248), switch brain_matrix: عليم المنطقي: while Aleem thinks or works, the brain's inner folds fade (its
   outline stays) and the work's symbols take turns inside it; عليم الشعوري: a feeling turns the whole brain into its
   symbols for a moment, in that feeling's colour; then the brain comes back */
#apb-p path { transition: opacity .4s ease; }
.apb[data-mx="logic"] #apb-p path.in { opacity: .16; }
.apb[data-mx="feel"] #apb-p path { opacity: .1; transition-duration: .5s; }
.apb-sym { fill: none; stroke: #e8c06a; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0;
  transform-origin: 50px 50px; transform: scale(.82); transition: opacity .35s ease, transform .35s ease; }
.apb-sym .f { fill: #e8c06a; stroke: none; }
.apb-sym.on { opacity: 1; transform: scale(1); }
.apb[data-mx="feel"] .apb-sym { --mx: #e8c06a; stroke: var(--mx); }
.apb[data-mx="feel"] .apb-sym .f { fill: var(--mx); }
.apb[data-feel="love"] .apb-sym { --mx: #e45a62; }
.apb[data-feel="sad"] .apb-sym { --mx: #72a9dc; }
.apb[data-feel="calm"] .apb-sym { --mx: #6cc59c; }
:root.ui-brain-hollow[data-scheme="light"] .apb[data-mx="logic"] .apb-sym { stroke: hsl(var(--signature-text)); }
:root.ui-brain-hollow[data-scheme="light"] .apb[data-mx="logic"] .apb-sym .f { fill: hsl(var(--signature-text)); }
:root.ui-brain-hollow[data-scheme="light"] .apb[data-feel="joy"] .apb-sym,
:root.ui-brain-hollow[data-scheme="light"] .apb[data-feel="win"] .apb-sym { --mx: hsl(var(--signature-text)); }
@media (prefers-reduced-motion: reduce) { #apb-p path, .apb-sym { transition: none; } .apb-sym { transform: none; } }
.ap-fold { width: 1.7rem; height: 1.7rem; border-radius: 50%; }
.ap-fold .ic { width: 1.1rem; height: 1.1rem; transition: transform .2s ease; }
.agent-panel.folded .ap-fold .ic { transform: rotate(180deg); }
.ap-pic:focus-visible, .ap-brain:focus-visible, .ap-heart:focus-visible, .ap-fold:focus-visible, .ap-stat:focus-visible,
.ap-caps:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
/* what a touch on a part says: over the figures, so nothing below moves; a touch on it closes it.
   C-193 (HSB-0269): each part at its own size (the title line a step above the lines, the lines at the capabilities'
   size, the time a step under), colours that tell the parts apart, and the style's colour on its edge and its title */
.ap-say { position: absolute; inset-inline: 0; top: 2.3rem; z-index: 2; margin: 0; padding: .3rem .55rem .35rem;
  border-radius: .6rem; border: 1px solid hsl(var(--signature) / .45); border-inline-start: .22rem solid hsl(var(--signature));
  background: hsl(var(--card)); background: color-mix(in srgb, hsl(var(--signature)) 8%, hsl(var(--card)));
  box-shadow: 0 6px 18px hsl(0 0% 0% / .22); color: hsl(var(--card-foreground)); overflow: hidden;
  font-size: max(var(--min-text), .74rem); line-height: 1.5; cursor: pointer; }
.ap-det-h { display: flex; align-items: center; gap: .3rem; margin: -.3rem -.55rem .2rem; padding: .28rem .55rem;
  background: linear-gradient(to left, hsl(var(--signature) / .2), hsl(var(--signature) / .05));
  border-bottom: 1px solid hsl(var(--signature) / .35); }
[dir="ltr"] .ap-det-h { background: linear-gradient(to right, hsl(var(--signature) / .2), hsl(var(--signature) / .05)); }
.ap-det-h .ic { width: .95rem; height: .95rem; flex: none; color: hsl(var(--signature-text)); }
.ap-det-h b { color: hsl(var(--signature-text)); font-size: max(var(--min-text), .8rem); white-space: nowrap; }
.ap-det-v { margin-inline-start: auto; font-weight: 700; font-size: max(var(--min-text), .78rem); text-align: end;
  color: hsl(var(--card-foreground)); }
/* C-203 (HSB-0337): the value follows its name on the title line, at the start, and wraps under it when long */
.ap-det-h { flex-wrap: wrap; column-gap: .35rem; }
.ap-det-h .ap-det-v { margin-inline-start: 0; text-align: start; min-width: 0; }
/* C-192 (HSB-0265): the lines of the details, a table: a name, a mark when it has one, what it is */
.ap-rows { border-collapse: collapse; inline-size: 100%; line-height: 1.45; }
.ap-rows th, .ap-rows td { padding: .08rem .25rem; text-align: start; vertical-align: baseline;
  font-size: max(var(--min-text), .7rem); }
/* while it speaks, a short panel (few parts chosen) lets it show whole rather than cut its last line */
.agent-panel.saying { overflow: visible; }
.ap-rows th { width: 1%; font-weight: 700; white-space: nowrap; color: hsl(var(--signature-text)); }
.ap-rows td { color: hsl(var(--card-foreground)); }
.ap-rows .ap-tick { width: 1.3em; text-align: center; font-weight: 700; color: hsl(var(--tone-pos)); }
.ap-rows tr[data-on="0"] > * { color: hsl(var(--muted-foreground)); }
.ap-rows tr + tr > * { border-top: 1px solid hsl(var(--signature) / .18); }
.ap-det-at { display: block; margin-top: .15rem; text-align: end; color: hsl(var(--muted-foreground));
  font-size: max(var(--min-text), .64rem); }
.ap-body { display: grid; gap: .1rem; min-width: 0; }
/* C-180: you and Aleem side by side, each heart at its own pulse */
.ap-pulse { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; border: 0; padding: .1rem 0; margin: 0;
  background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; min-width: 0; }
.ap-pulse[hidden] { display: none; }
.ap-p { display: flex; align-items: center; gap: .3rem; min-width: 0; white-space: nowrap; overflow: hidden; }
.ap-p .ic { width: 1rem; height: 1rem; flex: none; fill: currentColor; stroke: none; color: #d64550;
  animation: ap-beat 1.2s ease-in-out infinite; transform-origin: 50% 55%; }
.ap-p .ic.still { animation: none; opacity: .5; }
.ap-p .ap-k { overflow: hidden; text-overflow: ellipsis; }
.ap-stats { display: grid; gap: .05rem; min-width: 0; }
.ap-stat { display: flex; align-items: center; gap: .3rem; min-width: 0; white-space: nowrap; overflow: hidden;
  border: 0; padding: 0; margin: 0; background: transparent; color: inherit; font: inherit; text-align: start;
  cursor: pointer; inline-size: 100%; }
.ap-stat .ic { width: .95rem; height: .95rem; flex: none; color: hsl(var(--signature-text)); }
.ap-k { color: hsl(var(--muted-foreground)); flex: none; }
.ap-v { font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ap-stat .ap-bar { flex: 1 1 2.5rem; max-width: 5rem; min-width: 1.5rem; }
.ap-when { color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .7rem); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ap-bar { display: inline-block; height: .38rem; border-radius: 99px; background: hsl(var(--muted)); overflow: hidden; }
.ap-bar b { display: block; height: 100%; border-radius: inherit; background: hsl(var(--signature)); }
.ap-bar.warn b { background: #c99a2e; }
.ap-bar.bad b, .ap-bar.low b { background: hsl(var(--tone-neg)); }
/* the tall column of what it can do now: a label and its bar on one row each */
.ap-caps { display: grid; grid-template-columns: max-content minmax(2.4rem, 3.2rem); align-content: start;
  align-items: center; gap: .14rem .4rem; padding: 0; padding-inline-start: .5rem; margin: 0;
  border: 0; border-inline-start: 1px solid hsl(var(--border)); border-radius: 0; background: transparent;
  color: inherit; font: inherit; text-align: start; cursor: pointer; line-height: 1.25; min-width: 0; }
.ap-caps-h { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.ap-caps-h b { font-size: max(var(--min-text), .78rem); }
.ap-caps-h small { color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .66rem); }
.ap-cap-k { color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .7rem); white-space: nowrap; }
.ap-caps .ap-bar { inline-size: 100%; height: .32rem; }
html.m-phone .agent-panel { margin-inline: .4rem; }
@media (prefers-reduced-motion: reduce) {
  .ap-heart .ic, .ap-p .ic { animation: none !important; }      /* C-196: the brain, a still frame (app.js) */
}
/* the panel's settings: its name and picture */
#agent-identity { display: grid; gap: .45rem; }
#agent-identity .ai-k { font-weight: 700; font-size: max(var(--min-text), .9rem); }
#agent-identity .row input[type="text"] { flex: 1 1 10rem; width: auto; height: auto; min-width: 0; margin: 0;
  border: 1px solid hsl(var(--input)); background: hsl(var(--background)); color: hsl(var(--foreground));
  border-radius: calc(var(--radius) * .5); padding: .45rem .7rem; font: inherit; }
#agent-identity label.btn { font-weight: 700; cursor: pointer; }
#agent-identity > .hint { margin: 0; }
/* C-174: Aleem's picture: its preview beside its buttons; a picture fills the mark's rounded square */
.pic-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pic-row label.btn { font-weight: 700; cursor: pointer; }
.pic-preview { width: 2.6rem; height: 2.6rem; border-radius: var(--radius-tile); overflow: hidden; flex: none;
  border: 1px solid hsl(var(--border)); }
.pic-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.mark.pic img { object-fit: cover; }

/* C-168 (HSB-0088): «التاريخ في الرسائل»: showing and hiding is an eye (HSB-0052), open while the date shows and struck
   through while it is hidden; its place and position follow it, and stand aside when they do not apply */
.eye-btn { display: inline-flex; align-items: center; gap: .45rem; flex: none; cursor: pointer; font: inherit;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--muted-foreground));
  border-radius: 999px; padding: .3rem .8rem .3rem .65rem; }
.eye-btn .ic { width: 1.35rem; height: 1.35rem; }
.eye-btn[aria-pressed="true"] { color: hsl(var(--signature-text)); border-color: hsl(var(--signature) / .6); }
.eye-btn[aria-pressed="true"] .eye-shut, .eye-btn[aria-pressed="false"] .eye-open { display: none; }
.eye-state { min-width: 2.6em; font-size: max(var(--min-text), .86rem); }
.eye-btn[aria-pressed="true"] .eye-state { font-weight: 700; }
.eye-btn:focus-visible { outline: 2px solid hsl(var(--signature)); outline-offset: 2px; }
#pref-msgdate-place:disabled, #pref-msgdate-pos:disabled { opacity: .55; }

/* C-175: «عليم العصبوني»: the network behind the window (drawn by neural() in app.js), in the style's synapse colour;
   it never takes a touch. A few links carry light along them; it glows more while Aleem is «مركز» (C-172) */
#neural { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none;
  color: hsl(var(--signature)); opacity: .5; transition: opacity .8s ease; }
#neural[hidden] { display: none; }
:root[data-mode="day"] #neural { opacity: .38; }
#neural .ax { fill: none; stroke: currentColor; stroke-opacity: .28; stroke-width: .6; }
#neural .n { fill: currentColor; fill-opacity: .5; }
#neural .n.hub { fill-opacity: .8; }
#neural .sp { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-opacity: .85;
  stroke-dasharray: 7 100; stroke-dashoffset: 107; animation: synapse 7s linear infinite; }
@keyframes synapse { to { stroke-dashoffset: 0; } }
#neural .s1 { animation-delay: -1.7s; } #neural .s2 { animation-delay: -3.4s; } #neural .s3 { animation-delay: -5.1s; }
#neural .s4 { animation-delay: -.9s; } #neural .s5 { animation-delay: -2.6s; } #neural .s6 { animation-delay: -4.3s; }
:root.aleem-focused #neural { opacity: .85; }
:root.aleem-focused[data-mode="day"] #neural { opacity: .62; }
:root.aleem-focused #neural .sp { stroke-width: 2; animation-duration: 4s; filter: drop-shadow(0 0 2px currentColor); }
:root.aleem-focused #neural .n.hub { fill-opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #neural .sp { animation: none; stroke-dasharray: none; stroke-opacity: .45; }
}
/* C-181 (ERR-DSG-002): every record list is a real table, on the health panel's «أوقات الردود»: a header row in the
   style's secondary ground, then the rows in the two alternating tones of the conversation log (--row-a, --row-b).
   Numbers, badges and time stamps keep one line; only a record's own text wraps. It fits a 360 px phone. */
.rec-wrap { min-width: 0; max-width: 100%; }
.rec-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: max(var(--min-text), .86rem);
  font-variant-numeric: tabular-nums; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * .6); }
.rec-table th { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-weight: 700; text-align: start;
  padding: .4rem .35rem; white-space: nowrap; word-break: keep-all; vertical-align: bottom; }
.rec-table th:first-child { border-start-start-radius: calc(var(--radius) * .6 - 1px); }
.rec-table th:last-child { border-start-end-radius: calc(var(--radius) * .6 - 1px); }
.rec-table td { padding: .4rem .35rem; text-align: start; vertical-align: top; border-top: 1px solid hsl(var(--border) / .6);
  background: hsl(var(--row-a)); color: hsl(var(--foreground)); overflow-wrap: break-word; }
.rec-table > tbody > tr:nth-child(even) > td { background: hsl(var(--row-b)); }
.rec-table.groups > tbody > tr > td { background: hsl(var(--row-a)); }
.rec-table.groups > tbody:nth-of-type(even) > tr > td { background: hsl(var(--row-b)); }
.rec-table.groups > tbody > tr + tr > td { border-top: 0; padding-top: 0; }
.rec-table > tbody:last-child > tr:last-child > td:first-child { border-end-start-radius: calc(var(--radius) * .6 - 1px); }
.rec-table > tbody:last-child > tr:last-child > td:last-child { border-end-end-radius: calc(var(--radius) * .6 - 1px); }
.rec-table .what { min-width: 3.5rem; }
.rec-table .email { overflow-wrap: anywhere; }   /* an address is one long token: it breaks where it must */
.rec-table .what b, .rec-table .what strong { font-weight: 700; }
.rec-table .sub { display: block; color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .8rem); overflow-wrap: anywhere; }
.rec-table .num, .rec-table .at, .rec-table .tight, .rec-table .act { white-space: nowrap; width: 1%; }
.rec-table .num { font-weight: 700; }
.rec-table .at { color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .78rem); }
.rec-table .at > * { display: block; }
.rec-table .act { text-align: end; }
.rec-table .act > * + * { margin-inline-start: .25rem; }
.rec-table .badge { display: inline-block; white-space: nowrap; border: 1px solid hsl(var(--border)); border-radius: 999px;
  padding: 0 .5rem; line-height: 1.7; font-size: max(var(--min-text), .78rem); color: hsl(var(--foreground)); }
.rec-table .badge.strong { border-color: hsl(var(--signature)); color: hsl(var(--signature-text)); font-weight: 700; }
.rec-table .badge.bad { border-color: hsl(var(--destructive)); font-weight: 700; }
.rec-table .badges { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .15rem; }
.rec-table tr.empty td { color: hsl(var(--muted-foreground)); text-align: center; }
.rec-table .mini-btn, .rec-table .act button { min-height: 2rem; min-width: 2rem; }
.rec-table .row-acts { padding-bottom: .5rem; }
.rec-table .row-acts > * { margin-block: .15rem; }
.rec-table .row-acts select { max-width: 100%; }
.rec-table .row-acts .topup { display: flex; flex-wrap: wrap; gap: .3rem; }
.rec-table .row-acts .topup input { flex: 1 1 5rem; min-width: 0; }
.rec-table .fact-edit { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .3rem; }
.rec-table .fact-edit input { flex: 1 1 8rem; min-width: 0; }
.rec-table .pin-mark { color: hsl(var(--signature-text)); }
.rec-table tr.pinned .fact-text { font-weight: 700; }
/* C-200 (HSB-0330): a fact is a paragraph of its own: inline inside a «plaintext» cell it was an isolate, the cell saw
   no letter of its own and set its lines from the left; as a block it takes its direction from its first letter */
.rec-table .fact-text { display: block; }
.rec-table .fact-text .lw { white-space: nowrap; }
.rec-table .fact-cat { font-size: max(var(--min-text), .74rem); color: hsl(var(--muted-foreground)); }
.rec-table th.num, .rec-table td.num { text-align: center; }
.rec-table .uid-cell { width: 1%; }
.rec-table .uid { display: inline-block; min-width: 4.4em; max-width: 6.4em; font-family: var(--font-mono); line-height: 1.35;
  font-size: max(var(--min-text), .7rem); color: hsl(var(--muted-foreground)); cursor: copy; overflow-wrap: anywhere; }
.rec-table .uid.copied { color: hsl(var(--signature-text)); }
.rec-table .fact-edit select { flex: 0 1 8rem; min-width: 0; }
.rec-table .open-conv { all: unset; cursor: pointer; display: block; overflow-wrap: anywhere; }
.rec-table .open-conv:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.rec-table .detail { display: block; unicode-bidi: plaintext; color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .78rem); }
.rec-table caption { caption-side: top; text-align: start; font-weight: 700; color: hsl(var(--signature-text)); padding: .5rem 0 .25rem; }
.audit-list { max-height: 22rem; overflow-y: auto; }
.audit-list .rec-table th { position: sticky; top: 0; z-index: 1; }
.rec-table td.fact-actions { white-space: normal; }
.rec-table td.fact-actions button { display: block; margin: 0 0 .25rem; margin-inline-start: auto; white-space: nowrap; min-height: 2rem; }
.rec-table td.conv-acts { position: relative; padding-block: .15rem; }
.rec-table td.conv-acts .conv-menu { top: 100%; }
#hidden-list { overflow-y: auto; min-height: 0; flex: 0 1 auto; }
#hidden-list .rec-table .open-conv[aria-current="true"] { color: hsl(var(--row-title)); font-weight: 700; }
:root:not([lang="en"]) .rec-table bdi.sub { text-align: right; }   /* an address under an Arabic name keeps the cell's side */