/* ==========================================================================
   artifacts.css — Artifact rows/cards + inline preview + live-reasoning text.
   Part of منصة عقاب dashboard styles. Split from the former app.css.
   Cascade order is significant; see docs/flows/INDEX.md.
   ========================================================================== */
/* ══ ARTIFACT ROWS + CARDS ══ */
/* Row wrapper mirrors .msg-row.asst so cards sit in the assistant lane */
.artifact-row {
  display: flex;
  justify-content: flex-end;   /* RTL: visual left — same lane as assistant bubbles */
  margin: 0 auto 8px;
  width: 100%; max-width: var(--content-max);
}
.artifact-row + .artifact-row { margin-top: -2px; } /* tidy gap between stacked cards */

.artifact-card {
  max-width: 80%;              /* matches .bubble.asst */
  border-radius: var(--r3);
  border: 1px solid var(--b1);
  background: var(--s2);
  overflow: hidden;
  cursor: default;
  transition: border-color .15s, box-shadow .15s;
}
.artifact-card:hover {
  border-color: var(--gbs);
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
[data-theme="light"] .artifact-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.09); }

.artifact-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  background: var(--s3);
  border-bottom: 1px solid var(--b1);
  min-width: 0;
}
/* Icon in a subtle gold-tinted pill */
.art-icon {
  font-size: 13px; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: var(--r1);
  background: var(--gd); border: 1px solid var(--gb);
  display: inline-flex; align-items: center; justify-content: center;
}
.art-name {
  flex: 1; font-family: var(--ff); font-size: 12px; font-weight: 600; color: var(--t1);
  direction: ltr; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.art-size { font-size: 10px; color: var(--t3); flex-shrink: 0; white-space: nowrap; }
.art-btns { display: flex; gap: 2px; flex-shrink: 0; }
/* Match .tb-icon-btn exactly */
.art-btn {
  color: var(--t2); padding: 5px; border-radius: var(--r1);
  transition: color .15s, background .15s; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  min-width: 32px; min-height: 32px; text-decoration: none;
}
.art-btn:hover { color: var(--g); background: var(--gd); }
.art-btn svg { width: 14px; height: 14px; display: block; }

.artifact-body {
  width: 100%; position: relative; background: #fff; overflow: hidden;
}
[data-theme="dark"] .artifact-body { background: #1a1a22; }
.artifact-body iframe, .artifact-body object, .artifact-body embed {
  display: block; width: 100%; height: 360px; border: none;
}
.artifact-body img {
  display: block; max-width: 100%; height: auto;
  padding: 8px; box-sizing: border-box;
}
/* Inline text/markdown preview inside an artifact card */
.art-text {
  margin: 0; padding: 12px 14px; max-height: 320px; overflow: auto;
  background: #fbfaf6; color: #1a1a1a;
  font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
  font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  border-bottom: 1px solid var(--gb);
}
[data-theme="dark"] .art-text { background: #14141b; color: #d6d6e0; }
.art-text-modal { max-height: none; height: 100%; border-bottom: none; }

.art-links {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 14px 16px; justify-content: center;
}
.art-link-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--r2); font-size: 12px; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: background .15s;
  font-family: var(--ff);
}
.art-link-open { background: var(--gd); color: var(--g); border: 1px solid var(--gbs); }
.art-link-open:hover { background: var(--gb); }
.art-link-dl { background: var(--s3); color: var(--t1); border: 1px solid var(--b1); }
.art-link-dl:hover { background: var(--s4); }
@media (max-width: 37.5rem) {
  .artifact-card { max-width: 92%; }
  .artifact-body iframe, .artifact-body object, .artifact-body embed { height: 260px; }
}
@media (max-width: 23.75rem) {
  .art-size { display: none; }
  .art-name { font-size: 11px; }
}

/* ══ LIVE REASONING — pure flowing text, no bubble, shown pre-tool during streaming ══ */
.live-rsn {
  color: var(--t3);
  font-size: 13px;
  font-style: italic;
  line-height: 1.65;
  padding: 2px 0 6px 0;
  text-align: start;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  width: 100%; max-width: var(--content-max);
  margin-inline: auto;
}