/* C-108: Hadhiq's save icon on each message (hadhiq.js). C-167: in the style's colour or, by default, in the state's
   colour (green sealed, red rejected or lost). Remove this file with hadhiq.js. */
.request:has(> .hq-mark), .request-bubble:has(> .hq-mark), .sheet:has(> .hq-mark) { position: relative; }   /* only where a mark is: nothing moves else */
.hq-mark {
  display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  color: hsl(var(--signature)); background: hsl(var(--card)); border: 1px solid hsl(var(--signature) / .55);
  text-decoration: none; cursor: pointer;
}
.hq-mark svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
  stroke-linejoin: round; }
.hq-mark .hq-tick, .hq-mark .hq-bang { display: none; }
/* C-167 (HSB-0086), «لون النمط»: the signature colour in every state; the sign inside tells the state */
.hq-mark[data-state="sealed"] { background: hsl(var(--signature)); color: hsl(var(--card)); border-color: transparent; }
.hq-mark[data-state="sealed"] .hq-tick { display: inline; }
.hq-mark[data-state="rejected"] .hq-bang, .hq-mark[data-state="lost"] .hq-bang { display: inline; }
.hq-mark[data-state="saving"] { animation: hq-saving 1.1s ease-in-out infinite; }
/* «لون الحالة» (the default): like a browser's padlock, green when sealed, red when rejected or lost, grey while it saves */
:root.hq-status .hq-mark[data-state="sealed"] { background: hsl(142 64% 34%); color: #fff; }
:root.hq-status .hq-mark[data-state="rejected"], :root.hq-status .hq-mark[data-state="lost"] {
  background: hsl(0 70% 46%); color: #fff; border-color: transparent; }
:root.hq-status .hq-mark[data-state="saving"] { color: hsl(var(--muted-foreground)); border-color: hsl(var(--muted-foreground) / .6); }
/* C-191 (HSB-0263): «حالة الرد» «بالقفل» in «لون الحالة»: a reply's lock green when the reply succeeded, red when it
   failed, whatever Hadhiq's seal; the sign inside and the lock's name still tell the seal. Off, or in «لون النمط», as above */
:root.hq-status:not(.no-st-lock) .reply.done > .sheet:not(.stopped):not(.error) > .hq-mark {
  background: hsl(142 64% 34%); color: #fff; border-color: transparent; }
:root.hq-status:not(.no-st-lock) .sheet.error > .hq-mark {
  background: hsl(0 70% 46%); color: #fff; border-color: transparent; }
.hq-mark:focus-visible { outline: 2px solid hsl(var(--signature)); outline-offset: 2px; }
@keyframes hq-saving { 50% { opacity: .45; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { .hq-mark[data-state="saving"] { animation: none; opacity: .7; } }

/* the request: a small badge at the bubble's outer corner; the reply: at the sheet's top corner */
/* C-134: on the bubble's top corner, since 2.1.12 put the message's time and copy under it (M11, M20), where the
   badge covered the time */
.request > .hq-mark { position: absolute; top: -.55rem; inset-inline-start: -.45rem; }
.sheet > .hq-mark { position: absolute; top: .5rem; inset-inline-end: .5rem; }
/* C-197 (HSB-0326): inside the bubble, not on its edge: the top corner at the end of its first line, like the reply's;
   the bubble keeps that corner free so the text never runs under the lock */
.request-bubble > .hq-mark { position: absolute; top: .5rem; inset-inline-end: .5rem; }
.request-bubble:has(> .hq-mark) { padding-inline-end: 2.45rem; min-height: 2.45rem; }

/* C-167: the three states shown in «أقفال حاذق», in whichever colours are chosen */
.hq-preview { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; margin: .1rem 0 .4rem;
  color: hsl(var(--muted-foreground)); font-size: max(var(--min-text), .85rem); }
.hq-preview .hq-mark { cursor: default; }
.hq-preview span + .hq-mark { margin-inline-start: .5rem; }
#pref-hq-lock { display: grid; gap: .45rem; }
#pref-hq-lock label { align-items: flex-start; }
#pref-hq-lock label input { margin-top: .35rem; flex: none; }
#pref-hq-lock label span { min-width: 0; }