/* ==========================================================================
   chat.css — Chat bubbles, markdown, chip strip, auth card.
   Part of منصة عقاب dashboard styles. Split from the former app.css.
   Cascade order is significant; see docs/flows/INDEX.md.
   ========================================================================== */
/* ══════════════════════════════════════════════════════
   CHAT BUBBLES
══════════════════════════════════════════════════════ */
.msg-row { display: flex; margin: 0 auto 14px; width: 100%; max-width: var(--content-max); position: relative; }
.msg-row.user { justify-content: flex-start; }
.msg-row.asst { justify-content: flex-end; }
.bubble {
  max-width: 74%; padding: 11px 15px;
  font-size: 14.5px; line-height: 1.7; word-break: break-word;
}
.bubble.user {
  background: var(--g); color: var(--ubbl-text);
  border-radius: var(--r3) var(--r3) var(--r2) var(--r3); font-weight: 500;
}
.bubble.asst {
  background: var(--s2); color: var(--t1);
  border-radius: var(--r3) var(--r3) var(--r3) var(--r2);
  border: 1px solid var(--b1); max-width: 80%;
}
.bubble.err {
  background: rgba(232,96,96,.07); border: 1px solid rgba(232,96,96,.22);
  color: var(--red); font-size: 13px; border-radius: var(--r2);
}
.bubble.info {
  background: var(--gd); border: 1px solid var(--gb);
  color: var(--t1); font-size: 12.5px; border-radius: var(--r2); font-style: italic;
}

/* Quote bar on replied bubbles */
.bubble-quote {
  border-inline-start: 2px solid var(--g); padding: 4px 10px; margin-bottom: 7px;
  font-size: 12px; color: var(--t2); opacity: .85;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.bubble.user .bubble-quote { color: rgba(255,255,255,.7); border-inline-start-color: rgba(255,255,255,.5); }
[data-theme="light"] .bubble.user .bubble-quote { color: rgba(0,0,0,.5); border-inline-start-color: rgba(0,0,0,.3); }

/* Message action buttons.
   Desktop: hover-reveal chips that PEEK from UNDER the bubble (bottom edge),
   sitting inside the row's 14px bottom margin. Anchored to `bottom` — never
   `top` — so they are never clipped by #messages' top edge (overflow-y:auto)
   when a message sits at the top of the scroll area, and never cover the
   first line of the reply. Touch devices switch to an in-flow strip below
   the bubble (see responsive.css). */
.msg-actions { position: absolute; bottom: -10px; display: none; gap: 3px; z-index: 5; }
.msg-row:hover .msg-actions { display: flex; }
.msg-row.user .msg-actions { right: 0; }
.msg-row.asst .msg-actions { left: 0; }
.mac {
  background: var(--s3); border: 1px solid var(--b2);
  color: var(--t2); font-size: 10.5px; padding: 3px 9px;
  border-radius: var(--rf); white-space: nowrap;
  transition: color .15s, background .15s, border-color .15s;
}
.mac:hover { color: var(--g); background: var(--gd); border-color: var(--gb); }
.mac.restart:hover { color: var(--amber); background: rgba(232,168,58,.08); border-color: rgba(232,168,58,.3); }

/* ══ MARKDOWN ══ */
.mc h1, .mc h2, .mc h3 { font-family: var(--fh); font-weight: 700; margin: .7em 0 .3em; }
.mc h1 { font-size: 1.12em; color: var(--gl); }
.mc h2 { font-size: 1.02em; color: var(--g); border-bottom: 1px solid var(--gb); padding-bottom: 3px; }
.mc h3 { font-size: .96em; color: var(--t1); }
.mc p { margin: .35em 0; }
.mc ul, .mc ol { padding-inline-start: 1.5em; margin: .35em 0; }
.mc li { margin: .15em 0; }
.mc strong { color: var(--gl); font-weight: 700; }
.mc em { color: var(--t2); }
.mc a { color: #5fa4e8; }
.mc hr { border: none; border-top: 1px solid var(--b1); margin: .7em 0; }
.mc code {
  font-family: 'Cascadia Code','Fira Code','Courier New',monospace;
  font-size: .82em; background: var(--s3); color: #85e89d;
  padding: 2px 6px; border-radius: 4px; direction: ltr; display: inline-block;
}
[data-theme="light"] .mc code { color: #196b2e; background: var(--s3); }
.mc pre {
  direction: ltr; text-align: left;
  background: var(--s3); border: 1px solid var(--b1);
  border-left: 3px solid var(--gb); border-radius: var(--r2);
  padding: 11px 13px; overflow-x: auto; margin: .6em 0; position: relative;
}
.mc pre code { background: none; padding: 0; font-size: .81em; color: var(--t1); }
.mc table { width: 100%; border-collapse: collapse; font-size: .88em; margin: .6em 0; display: block; overflow-x: auto; }
.mc th { background: var(--gd); color: var(--g); font-weight: 700; padding: 7px 11px; border: 1px solid var(--gb); text-align: start; }
.mc td { padding: 6px 11px; border: 1px solid var(--b1); vertical-align: top; color: var(--t1); }
.mc tr:nth-child(even) td { background: var(--s2); }
.mc blockquote { border-inline-start: 3px solid var(--g); padding: 5px 13px; margin: .5em 0; color: var(--t2); background: var(--gd); border-radius: 0 var(--r1) var(--r1) 0; }
.bubble.user .mc strong { color: inherit; opacity: .85; }
.bubble.user .mc code { background: rgba(0,0,0,.18); color: inherit; }
.cpbtn {
  position: absolute; top: 7px; left: 7px;
  background: var(--s4); border: 1px solid var(--b2);
  color: var(--t2); font-size: 10px; padding: 2px 8px;
  border-radius: var(--r1); cursor: pointer;
  transition: color .1s, background .1s;
}
.cpbtn:hover { color: var(--t1); background: var(--b2); }
.code-lang-label { position: absolute; top: 7px; right: 9px; font-size: 9px; font-family: monospace; color: var(--t3); text-transform: uppercase; letter-spacing: .5px; user-select: none; }
.cpbtn2 { position: absolute; top: 7px; left: 56px; font-size: 10.5px; font-family: var(--fh); color: var(--t2); background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r1); cursor: pointer; transition: color .1s, background .1s; }
.cpbtn2:hover { color: var(--t1); background: var(--b2); }

/* Typing */
.typing-wrap { display: flex; gap: 5px; padding: 4px 0; align-items: center; }
.tdot { width: 7px; height: 7px; border-radius: var(--rf); background: var(--g); }

/* ── Chip strip — question chips above the input ── */
#chip-strip {
  display: none;
  flex-direction: column;
  background: var(--s2);
  border: 1px solid var(--b2);
  border-bottom: none;
  border-radius: var(--r3) var(--r3) 0 0;
  margin-bottom: -1px;
  /* No overflow:hidden — height grows with content */
  width: 100%; max-width: var(--content-max);
  margin-left: auto; margin-right: auto;
}
#chip-strip.visible { display: flex; }
#chip-strip.visible + .input-wrap {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.chip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  flex-wrap: wrap;
}
.q-chip {
  background: var(--gd);
  border: 1px solid var(--gb);
  color: var(--g);
  font-family: var(--fh);
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--rf);
  cursor: pointer;
  min-height: 32px;
  min-width: 4ch;
  white-space: normal;
  word-break: break-word;
  height: auto;
  transition: background .12s;
}
.q-chip:hover { background: var(--gb); }
/* List-style option for long sentence choices that don't fit a chip */
.q-list-item {
  display: block;
  width: 100%;
  background: none;
  border: 1px solid var(--b2);
  border-radius: var(--r1);
  color: var(--t1);
  font-family: var(--fh);
  font-size: 12.5px;
  text-align: start;
  padding: 7px 12px;
  margin: 1px 0;
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
  transition: background .12s, border-color .12s;
}
.q-list-item:hover { background: var(--s3); border-color: var(--gb); }
.q-step { font-size: 11px; color: var(--t3); flex-shrink: 0; white-space: nowrap; }
.q-override {
  background: none; border: none; color: var(--t3);
  font-size: 11px; font-family: var(--fh); cursor: pointer;
  padding: 4px 6px; border-radius: var(--r1);
  display: flex; align-items: center; gap: 3px;
  flex-shrink: 0; margin-inline-end: auto;
  transition: color .12s; white-space: nowrap;
}
.q-override:hover { color: var(--t2); }
.q-indicator { font-size: 11px; color: var(--t3); padding: 0 14px 6px; display: none; }
.q-indicator.visible { display: block; }
.html-bbl { background: #fff; color: #222; border-radius: var(--r2); overflow: hidden; max-height: 68vh; }
.html-bbl iframe { border: none; width: 100%; display: block; }

/* Auth card */
.auth-card {
  background: var(--s2); border: 1px solid var(--gb);
  border-radius: var(--r2); padding: 13px 15px; margin: 6px 0;
  display: flex; flex-direction: column; gap: 9px;
}
.auth-card-header { display: flex; align-items: center; gap: 9px; }
.auth-card-dot { width: 8px; height: 8px; border-radius: var(--rf); background: var(--amber); animation: dotPulse 1.4s ease infinite; flex-shrink: 0; }
.auth-card-title { font-family: var(--fh); font-size: 13px; font-weight: 700; color: var(--t1); }
.auth-card-sub { font-size: 12px; color: var(--t2); line-height: 1.5; }
.auth-open-btn {
  background: var(--gd); border: 1px solid var(--gb); color: var(--g);
  font-family: var(--fh); font-size: 12.5px; font-weight: 700;
  padding: 8px 16px; border-radius: var(--r2); transition: background .15s;
  cursor: pointer; align-self: flex-start;
}
.auth-open-btn:hover { background: var(--gb); }