/* L2-2 chat cards: code, citations, sources, images and files in agent replies.
   Grayscale surfaces from the design tokens (--raise, --line, --panel) and
   the density scale (--text-*, --space-*, --control-h-sm); no brand or status
   color. Light and dark come from the tokens. */

/* ---------- code ---------- */
.cc-code {
  width: 100%; max-width: 100%; min-width: 0; margin: 4px 0 12px;
  border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--sidebar);
}
.bubble.md > .cc-code:last-child { margin-bottom: 2px; }
.cc-code-head {
  display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 6px 0 var(--space-3);
  border-bottom: 1px solid var(--line); background: var(--raise);
  font-family: var(--font); font-size: var(--text-xs); line-height: 1; color: var(--ink-3);
}
.cc-code-lang { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; color: var(--ink-2); }
.cc-code-copy {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: var(--control-h-sm); padding: 0 var(--space-2);
  border: 0; border-radius: 7px; background: transparent; color: var(--ink-2);
  font-weight: 550; font-family: var(--font); font-size: var(--text-xs); line-height: 1; cursor: pointer;
}
.cc-code-copy svg { width: 14px; height: 14px; flex: none; }
.cc-code-copy:hover { background: var(--line-2); color: var(--ink); }
.cc-code-copy:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.cc-code-copy.is-copied { color: var(--ink); }
.cc-code-copy.is-failed { color: var(--red); }
:root .msg .bubble.md .cc-code pre.codeblock,
.cc-code pre.codeblock {
  margin: 0; padding: var(--space-3); border: 0; border-radius: 0; background: transparent;
  max-width: 100%; overflow-x: auto; overflow-y: hidden; white-space: pre; overscroll-behavior-x: contain;
  font-family: var(--mono); font-size: var(--text-sm); line-height: 1.6; color: var(--ink); tab-size: 2;
}
.cc-code pre.codeblock:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.cc-code pre.codeblock code { font-family: inherit; white-space: inherit; }

/* ---------- citation chips ---------- */
.bubble.md a.cc-cite, a.cc-cite {
  display: inline-flex; align-items: center; max-width: min(220px, 100%); height: 20px; margin: 0 1px; padding: 0 8px;
  vertical-align: 1px; border-radius: 999px; background: var(--raise); color: var(--ink-2);
  font-weight: 550; font-family: var(--font); font-size: var(--text-xs); line-height: 20px; text-decoration: none; white-space: nowrap;
}
.cc-cite-site { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
a.cc-cite:hover { background: var(--line-2); color: var(--ink); }
a.cc-cite:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ---------- sources ---------- */
.cc-sources {
  width: 560px; max-width: 100%; margin: 10px 0 0; padding: 12px 8px 8px;
  border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel);
}
.cc-sources-head { display: flex; align-items: baseline; gap: 6px; padding: 0 8px 6px; }
.cc-sources-title { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.cc-sources-count { font-size: var(--text-xs); color: var(--ink-3); }
.cc-sources-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cc-sources-list > li[hidden] { display: none; }
.cc-source {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 8px; border-radius: 9px;
  color: var(--ink); text-decoration: none;
}
.cc-source:hover { background: var(--hover); color: var(--ink); }
.cc-source:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.cc-mark {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px;
  background: var(--raise); color: var(--ink-2); font-size: var(--text-xs); font-weight: 650; line-height: 1;
}
.cc-source-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cc-source-title, .cc-source-site { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-source-title { font-size: var(--text-sm); font-weight: 550; line-height: 1.35; }
.cc-source-site { font-size: var(--text-xs); line-height: 1.35; color: var(--ink-3); }
.cc-source svg { flex: none; width: 14px; height: 14px; color: var(--ink-3); opacity: 0; transition: opacity 0.15s ease; }
.cc-source:hover svg, .cc-source:focus-visible svg { opacity: 1; }
.cc-sources-more {
  display: inline-flex; align-items: center; height: var(--control-h-sm); margin: var(--space-1) 0 0 var(--space-2); padding: 0 10px;
  border: 0; border-radius: 7px; background: var(--raise); color: var(--ink);
  font-weight: 600; font-family: var(--font); font-size: var(--text-xs); line-height: 1; cursor: pointer;
}
.cc-sources-more:hover { background: var(--line-2); }
.cc-sources-more:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- images (tiles reuse U3's .att-sent-image loading states) ---------- */
.cc-images { display: grid; gap: 6px; width: 480px; max-width: 100%; margin: 10px 0 0; }
.cc-images.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-images.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cc-images.n-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-images .att-sent-image.cc-image { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; }
.cc-images.n-2 .cc-image { aspect-ratio: 4 / 5; }
.cc-images.n-4 .cc-image { aspect-ratio: 4 / 3; }
.cc-images.n-1 { display: block; width: auto; }
.cc-images.n-1 .att-sent-image.cc-image {
  --att-ratio: 1.3333; aspect-ratio: var(--att-ratio);
  width: min(480px, calc(440px * var(--att-ratio))); max-width: 100%; border-radius: 16px;
}
.cc-images .cc-image { transition: filter 0.15s ease; }
.cc-images .cc-image.is-loaded:hover { filter: brightness(0.92); }
.cc-image-more {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.5); color: #ffffff; font-size: 22px; font-weight: 650; letter-spacing: -0.01em;
}

/* ---------- files (U3's card grammar: white type tile, name, detail) ---------- */
.msg .delivery-files.cc-files { display: grid; gap: var(--space-2); width: 560px; max-width: 100%; margin-top: 10px; }
.delivery-file.cc-file {
  position: relative; display: flex; align-items: center; gap: var(--space-3); min-width: 0; max-width: 100%;
  padding: 10px var(--space-3); border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel);
}
/* Download progress ("Preparing download…") reads on one line under the actions. */
.delivery-file.cc-file:has(.file-download-status:not(:empty)) { padding-bottom: 28px; }
.cc-file-icon {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px;
  background: var(--att-tile, #ffffff); color: #3b3b3b; box-shadow: inset 0 0 0 1px var(--line-2);
}
.cc-file-icon svg { width: 22px; height: 22px; }
.cc-file-copy { flex: 1; min-width: 0; }
.msg .cc-file .cc-file-name, .cc-file .cc-file-name {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--text-md); font-weight: 600; line-height: 1.35; color: var(--ink);
}
.cc-file-copy small { display: block; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); color: var(--ink-3); }
.cc-file-actions { flex: none; display: flex; align-items: center; gap: 6px; }
.cc-file-actions .file-download-action { display: block; max-width: none; }
.cc-file-actions .file-download-status:empty { display: none; }
.cc-file-actions .file-download-status {
  position: absolute; right: 12px; bottom: 8px; max-width: calc(100% - 24px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-2xs); line-height: 14px; color: var(--ink-3); text-align: right;
}
.cc-file-copy small.cc-file-scan { color: var(--amber, var(--ink-2)); }
.delivery-file.cc-file[data-scan="flagged"] .cc-file-scan, .delivery-file.cc-file[data-scan="rejected"] .cc-file-scan { color: var(--red); }
.cc-image-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.cc-lightbox-save { flex: none; display: flex; }
.cc-lightbox-save:empty { display: none; }
:root .cc-lightbox-save .btn { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
:root .cc-lightbox-save .btn:hover { background: rgba(255, 255, 255, 0.22); color: #ffffff; }
.cc-lightbox-save .btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.cc-lightbox-save:not(:empty) + .cc-lightbox-download { margin-left: 0; }
.cc-lightbox-save:not(:empty) { margin-left: auto; }
.cc-file-locked { font-size: var(--text-xs); align-self: center; }

/* ---------- lightbox (openDialog + the dialog manager) ---------- */
.modal-scrim.cc-lightbox-scrim, :root:not([data-theme="light"]) .modal-scrim.cc-lightbox-scrim {
  padding: 0; background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 80;
}
:root .modal.dialog.cc-lightbox, :root:not([data-theme="light"]) .modal.dialog.cc-lightbox {
  width: 100%; max-width: none; height: 100%; max-height: none; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; color: #ffffff;
}
:root .cc-lightbox .modal-head.cc-lightbox-head {
  flex: none; flex-wrap: nowrap; min-height: 56px; padding: 10px 12px 10px 20px; gap: var(--space-3); border-bottom: 0; color: #ffffff;
}
:root .cc-lightbox-head strong.cc-lightbox-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-lg); font-weight: 600; letter-spacing: normal; color: #ffffff; }
.cc-lightbox-count { flex: none; font-size: var(--text-sm); color: rgba(255, 255, 255, 0.64); font-variant-numeric: tabular-nums; }
.cc-lightbox-count:empty { display: none; }
.cc-lightbox-download { flex: none; margin-left: auto; display: flex; }
.cc-lightbox-head .modal-x { margin-left: 0; color: rgba(255, 255, 255, 0.8); }
.cc-lightbox-download:empty + .modal-x { margin-left: auto; }
.cc-lightbox-head .modal-x:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
.cc-lightbox-head .modal-x:focus-visible, .cc-lightbox-nav:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
:root .cc-lightbox-download .btn { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
:root .cc-lightbox-download .btn:hover { background: rgba(255, 255, 255, 0.22); color: #ffffff; }
.cc-lightbox-download .btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.cc-lightbox-download .file-download-action { flex-direction: row; align-items: center; max-width: none; }
.cc-lightbox-download .file-download-status { font-size: var(--text-xs); color: rgba(255, 255, 255, 0.72); }
.cc-lightbox-download .file-download-status:empty { display: none; }
:root .modal.dialog.cc-lightbox .dialog-body.cc-lightbox-body {
  position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  padding: 0 16px 24px; overflow: hidden; touch-action: pan-y;
}
.cc-lightbox-stage { flex: 1; min-width: 0; height: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.cc-lightbox-img { display: block; max-width: 100%; max-height: calc(100% - 28px); object-fit: contain; border-radius: 6px; user-select: none; -webkit-user-drag: none; }
.cc-lightbox-img.is-empty { display: none; }
.cc-lightbox-status { min-height: 18px; font-size: var(--text-xs); color: rgba(255, 255, 255, 0.7); text-align: center; }
.cc-lightbox-nav {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); color: #ffffff; cursor: pointer;
}
.cc-lightbox-nav svg { width: 22px; height: 22px; }
.cc-lightbox-nav:hover { background: rgba(255, 255, 255, 0.22); }
.cc-lightbox-scrim.is-single .cc-lightbox-nav { display: none; }

@media (max-width: 680px) {
  .cc-code pre.codeblock, :root .msg .bubble.md .cc-code pre.codeblock { font-size: var(--text-xs); padding: 11px 12px; }
  .cc-images { gap: var(--space-1); }
  .cc-images.n-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-images.n-3 .cc-image:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .delivery-file.cc-file { flex-wrap: wrap; gap: 10px 12px; }
  .cc-file-copy { flex: 1 1 calc(100% - 64px); }
  .cc-file-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-2); padding-left: 52px; }
  .cc-file-actions .btn.small { min-width: 80px; }
  .cc-file-actions .lib-save-more > summary.btn.small { min-width: var(--tap-min, 44px); }
  .modal-scrim.cc-lightbox-scrim, :root:not([data-theme="light"]) .modal-scrim.cc-lightbox-scrim { background: #000000; }
  :root .cc-lightbox .modal-head.cc-lightbox-head { padding: 8px 8px 8px 16px; gap: var(--space-2); }
  .cc-lightbox-download .file-download-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  :root .modal.dialog.cc-lightbox .dialog-body.cc-lightbox-body { padding: 0 0 16px; gap: 0; }
  .cc-lightbox-nav { position: absolute; bottom: 20px; z-index: 2; background: rgba(0, 0, 0, 0.55); }
  .cc-lightbox-nav.cc-prev { left: 16px; }
  .cc-lightbox-nav.cc-next { right: 16px; }
  .cc-lightbox-stage { padding: 0 0 64px; }
  .cc-lightbox-img { max-height: calc(100% - 20px); border-radius: 0; }
}
@media (hover: none) {
  .cc-source svg { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-source svg, .cc-images .cc-image { transition: none; }
}