/* «اسأل OSM» widget — Design v3 public tokens only (/promo/tokens.css). No colour literal here (check:tokens). */
.ask { display: grid; gap: var(--space-base); color: var(--ink); background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius-panel); padding: var(--space-card); min-width: 0; }
.ask-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-base); }
.ask-title { margin: 0; font-size: var(--type-h3); line-height: var(--lh-h3-ar); color: var(--ink); }
:lang(en) .ask-title { line-height: var(--lh-h3-en); }
.ask-sub, .ask-notice { margin: 0; color: var(--grey); font-size: var(--type-small); }
.ask-notice { border-inline-start: 2px solid var(--gold); padding-inline-start: var(--space-snug); }
.ask-chips, .ask-choices, .ask-next, .ask-badges { display: flex; flex-wrap: wrap; gap: var(--space-snug); }
.ask-chip, .ask-ghost { font: inherit; font-size: var(--type-small); min-height: 44px; padding: 0 var(--space-cell);
  border-radius: var(--radius-pill); border: 1px solid var(--field-border); background: var(--subtle-fill); color: var(--ink); cursor: pointer; text-align: start; }
.ask-chip:hover, .ask-ghost:hover { border-color: var(--gold); }
.ask-chip-fit { border-color: var(--gold); }
.ask-ghost { background: transparent; }
.ask-log { display: grid; gap: var(--space-snug); max-height: min(52vh, 460px); overflow-y: auto; overscroll-behavior: contain; padding-inline-end: 2px; }
.ask-log:empty { display: none; }
.ask-msg { display: grid; gap: 4px; padding: var(--space-snug) var(--space-cell); border-radius: var(--radius-card); max-width: 92%; }
.ask-you { justify-self: end; background: var(--card); border: 1px solid var(--field-border); }
.ask-osm { justify-self: start; background: var(--subtle-fill); border: 1px solid var(--card-border); }
.ask-who { font-size: var(--type-small); color: var(--grey); font-weight: 600; }
.ask-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-wait .ask-text { color: var(--grey); }
.ask-badge { font-size: var(--type-small); padding: 2px var(--space-snug); border-radius: var(--radius-chip); border: 1px solid var(--warning-border); background: var(--warning-bg); color: var(--warning-text); }
.ask-badge-not_supported { border-color: var(--neutral-border); background: var(--neutral-bg); color: var(--ink); }
.ask-src { font-size: var(--type-small); color: var(--grey); }
.ask-form { display: grid; gap: var(--space-snug); }
.ask-input { font: inherit; width: 100%; resize: vertical; min-height: 56px; padding: var(--space-snug) var(--space-cell);
  border-radius: var(--radius-field); border: 1px solid var(--field-border); background: var(--bg); color: var(--ink); }
.ask-input::placeholder { color: var(--placeholder); }
.ask-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-snug); }
.ask-count { color: var(--grey); font-size: var(--type-small); }
.ask-card { display: grid; gap: var(--space-snug); padding: var(--space-cell); border-radius: var(--radius-card); border: 1px solid var(--card-border); background: var(--subtle-fill); }
.ask-strong { margin: 0; font-weight: 600; }
.ask-summary { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--space-cell); margin: 0; font-size: var(--type-small); }
.ask-summary dt { color: var(--grey); }
.ask-summary dd { margin: 0; overflow-wrap: anywhere; }
.ask-consent { display: flex; gap: var(--space-snug); align-items: flex-start; font-size: var(--type-small); }
.ask-consent input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--gold); }
.ask-err { margin: 0; color: var(--critical-text); font-size: var(--type-small); min-height: 1em; }
.ask-err:empty { display: none; }
.ask-hp { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; opacity: 0; }
.ask .num { font-family: 'IBM Plex Mono', ui-monospace, monospace; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

/* floating entry (landing) */
.ask-launcher { position: fixed; inset-block-end: 16px; inset-inline-end: 16px; z-index: 60; min-height: 48px;
  box-shadow: var(--shadow-raised); }
.ask-panel { position: fixed; inset-block-end: 76px; inset-inline-end: 16px; z-index: 61; width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 100px); overflow-y: auto; box-shadow: var(--shadow-overlay); border-radius: var(--radius-panel); }
.ask-panel .ask-close { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; z-index: 1; }
@media (max-width: 480px) { .ask-panel { inset-inline: 16px; inset-block-end: 72px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .ask * { transition: none !important; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ask-sec { display: grid; gap: var(--space-base); max-width: 860px; }
body:has(.ask-launcher) footer { padding-block-end: 72px; }