/* ─────────────────────────────────────────────────────────────────────────
   ValWithProof — attachments, as they are drawn.

   The counterpart to /assets/attach.js. Four documents render attachments and
   they must look like one product doing it, so the classes live here rather
   than four times over. Everything is written against the CSS variables the
   portals already define (--line, --ink, --muted, --g50 …) with a literal
   fallback beside each, because the Experts app names some of its own
   differently and a chip that inherits nothing should still be legible.
   ───────────────────────────────────────────────────────────────────────── */

/* ── a sent attachment ──────────────────────────────────────────────────── */

.fchips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 7px;
}
.fchips:first-child { margin-top: 0; }
.fchips.mine { justify-content: flex-end; }

.fchip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 280px;
  text-decoration: none;
  border-radius: 11px;
  border: 1px solid var(--line, var(--line-2, #E7E9EC));
  background: var(--card, var(--panel-2, #fff));
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.fchip:hover {
  border-color: var(--g500, var(--brand, #16B8B0));
  box-shadow: 0 3px 12px rgba(0, 0, 0, .09);
  transform: translateY(-1px);
}
.fchip:focus-visible {
  outline: 2px solid var(--g600, var(--brand, var(--th-ink,#000000)));
  outline-offset: 2px;
}

/* A document: icon, name, and what it actually is. The subtitle carries the
   word "download" because the file opens in a new tab and a link that does
   something other than navigate should say so before it is clicked. */
.fchip.doc { padding: 8px 12px 8px 8px; }
.fchip-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 16px;
  flex: none;
  color: #fff;
}
.fchip-meta { min-width: 0; display: block; }
.fchip-name {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink, var(--th-ink,#000000));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.fchip-sub {
  display: block;
  font-size: 11px;
  color: var(--muted, var(--ink-2, var(--th-ink,#000000)));
  margin-top: 1px;
}

/* An image previews at a size you can actually read a screenshot at. Capped
   rather than natural: a tall phone photo would otherwise push the whole
   conversation off the screen. */
.fchip.img {
  position: relative;
  padding: 0;
  overflow: hidden;
  max-width: 260px;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.fchip.img img {
  display: block;
  width: 100%;
  max-height: 230px;
  object-fit: cover;
  background: var(--g50, var(--panel-2, #F5F6F8));
}
.fchip-cap {
  font-size: 11px;
  color: var(--muted, var(--ink-2, var(--th-ink,#000000)));
  padding: 6px 9px 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid var(--line, var(--line-2, #E7E9EC));
}

/* Inside a sent bubble the surrounding colour is already dark/green, so the
   chip drops its own card background and borrows the bubble's contrast. */
.bub.me .fchip,
.msg.me .fchip {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .28);
}
.bub.me .fchip-name,
.msg.me .fchip-name { color: #fff; }
.bub.me .fchip-sub,
.bub.me .fchip-cap,
.msg.me .fchip-sub,
.msg.me .fchip-cap { color: rgba(255, 255, 255, .8); }
.bub.me .fchip-cap { border-top-color: rgba(255, 255, 255, .22); }
.bub.me .fchip:hover,
.msg.me .fchip:hover { border-color: rgba(255, 255, 255, .55); }

/* A message that is nothing but attachments has no text to pad around. */
.bub.filesonly { padding-top: 8px; padding-bottom: 8px; background: transparent; border: none; }
.bub.filesonly.me { background: transparent; }

/* ── the staging tray ───────────────────────────────────────────────────── */

.tray {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 9px 12px 0;
}
.trayitem {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 230px;
  padding: 5px 6px 5px 5px;
  border-radius: 9px;
  border: 1px solid var(--line, var(--line-2, #E7E9EC));
  background: var(--g50, var(--panel-2, #F5F6F8));
  font-size: 11.5px;
}
.trayitem.busy {
  color: var(--muted, var(--ink-2, var(--th-ink,#000000)));
  font-weight: 600;
  padding: 7px 11px;
}
.trayimg {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: cover;
  flex: none;
}
.trayico {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: #fff;
  flex: none;
}
.trayname {
  font-weight: 700;
  color: var(--ink, var(--th-ink,#000000));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.traysz { color: var(--muted, var(--ink-2, var(--th-ink,#000000))); flex: none; }
.trayx {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--muted, var(--ink-2, var(--th-ink,#000000)));
  font-size: 12px;
  line-height: 1;
  padding: 3px 4px;
  border-radius: 5px;
  flex: none;
}
.trayx:hover { background: rgba(var(--th-ink-rgb,0, 0, 0), .07); color: var(--danger, var(--th-danger,#b3261e)); }

/* ── the paperclip ──────────────────────────────────────────────────────── */

.clip {
  border: 1px solid var(--line, var(--line-2, #E7E9EC));
  background: var(--card, var(--panel-2, #fff));
  border-radius: 10px;
  width: 38px;
  height: 38px;
  flex: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--ink2, var(--ink-2, var(--th-ink,#000000)));
  align-self: flex-end;
  transition: border-color .14s ease, background .14s ease;
}
.clip:hover:not(:disabled) { border-color: var(--g500, var(--brand, #16B8B0)); background: var(--g50, var(--panel-2, #F5F6F8)); }
.clip:disabled { opacity: .5; cursor: default; }

/* ── drop target ────────────────────────────────────────────────────────── */

/* The veil sits in the drop container and is invisible until `is-dragging` is
   set on that container by attach.js. Rendered always rather than mounted on
   drag, because a node that appears mid-drag re-fires dragenter/dragleave on
   itself and the highlight strobes. */
.dropveil {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  place-items: center;
  border-radius: inherit;
  background: rgba(22, 184, 176, .93);
  border: 2px dashed var(--g500, var(--brand, #16B8B0));
  pointer-events: none;
}
.is-dragging { position: relative; }
.is-dragging > .dropveil { display: grid; }
.dropveil-in {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 14px;
  color: var(--g900, var(--ink, var(--th-ink,#000000)));
}

/* ── the small spinner the tray uses ────────────────────────────────────── */

.spin.sm {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--line2, var(--line-2, #D3D8DE));
  border-top-color: var(--g600, var(--brand, var(--th-ink,#000000)));
  border-radius: 50%;
  animation: vwp-spin .7s linear infinite;
  vertical-align: -2px;
}
@keyframes vwp-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .fchip, .clip { transition: none; }
  .fchip:hover { transform: none; }
  .spin.sm { animation-duration: 2.4s; }
}


/* ── the meeting room ─────────────────────────────────────────────────────
   The one dark surface in the product. The chained fallbacks above get most of
   the way — the room names its variables `--panel-2`, `--line-2`, `--ink-2` —
   but three things need saying outright, because they are decisions about a
   dark surface rather than substitutions for a missing token.

   Scoped to `.chatlist`, which only the meeting room has, so nothing here can
   reach a light page. */
.chatlist .fchip {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(var(--th-ink-rgb,0, 0, 0), .22);
}
.chatlist .fchip:hover {
  background: rgba(255, 255, 255, .09);
  border-color: var(--brand, #16B8B0);
  box-shadow: none;                     /* a drop shadow on near-black is a smudge */
}
.chatlist .fchip-name { color: var(--ink, #F5F6F8); }
.chatlist .fchip-sub,
.chatlist .fchip-cap { color: var(--ink-2, #A2ACB8); }
.chatlist .fchip-cap { border-top-color: rgba(var(--th-ink-rgb,0, 0, 0), .18); }
.chatlist .fchip.img img { background: rgba(255, 255, 255, .04); }

/* Inside the sender's own bubble the surrounding colour is already the brand,
   so the chip drops to a translucent white and borrows the bubble's contrast
   rather than fighting it. */
.chatlist .msg.me .fchip { background: rgba(var(--th-ink-rgb,0, 0, 0), .18); border-color: rgba(255, 255, 255, .3); }
.chatlist .msg.me .fchip-name { color: #fff; }
.chatlist .msg.me .fchip-sub,
.chatlist .msg.me .fchip-cap { color: rgba(255, 255, 255, .82); }

/* The composer's paperclip and staging tray, same surface. A white button on
   a near-black composer reads as an error state. */
.composer .clip,
.chatlist ~ .tray .trayitem,
.tray .trayitem {
  background: var(--panel-2, var(--g50, #F5F6F8));
}
.composer .clip {
  color: var(--ink-2, var(--th-ink,#000000));
  border-color: var(--line-2, var(--line, #E7E9EC));
}
.composer .clip:hover:not(:disabled) {
  background: rgba(255, 255, 255, .07);
  border-color: var(--brand, #16B8B0);
}

/* The drop veil is a near-white sheet by default, which on this surface is a
   flashbang the moment somebody drags a file in. */
.chatlist > .dropveil {
  background: rgba(0, 0, 0, .9);
  border-color: var(--brand, #16B8B0);
}
.chatlist > .dropveil .dropveil-in { color: var(--ink, #F5F6F8); }