/* ⚠ TWO TOKEN VOCABULARIES, ONE STYLESHEET. The workspace and analysis pages
   speak --line/--wash/--text/--ia; the CRM speaks --border/--surface-2/
   --text-primary/--text-accent. Rather than fork the file — which is how every
   other bug in this module started — each colour names the workspace token
   first, the CRM's equivalent second, and a neutral last. Nothing is hardcoded
   past that fallback, so both CRM themes still drive it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ FILES IN THE MESSAGE CENTRE ═══════════════════════════════════════════
   Collapsed by default: most visits are about the conversation, and a list of
   attachments above the composer would push the thing people came to type off
   the screen. */
.mc-files { border-top: 1px solid var(--line, var(--border, rgba(128,128,128,.28))); flex-shrink: 0;
  max-height: 40%; overflow: auto; background: var(--wash, var(--surface-2, transparent)); }
.mc-files > summary { cursor: pointer; padding: 10px 18px; font-size: 12.5px;
  font-weight: 600; color: var(--text, var(--text-primary, inherit)); list-style: none; }
.mc-files > summary::-webkit-details-marker { display: none; }
.mc-files > summary:hover { background: rgba(29,53,87,.05); }
.mc-files-body { padding: 2px 12px 12px; }
.mc-files-empty { padding: 8px 6px 10px; font-size: 12px; color: var(--muted, var(--text-secondary, #8a8f98)); }

.mc-file { display: flex; align-items: center; gap: 8px; padding: 6px;
  border-radius: 8px; }
.mc-file:hover { background: rgba(29,53,87,.06); }
/* ⚠ WHO SENT IT IS THE FIRST THING, not the last. "Files sent & received" is
   two piles and the eye needs to sort them without reading dates. */
.mc-file-side { font-size: 10px; font-weight: 700; letter-spacing: .02em;
  border-radius: 99px; padding: 1px 7px; white-space: nowrap; }
.mc-file-side.mine { background: var(--ia, var(--text-accent, #1d3557)); color: #fff; }
.mc-file-side.them { background: var(--crimson-pale, var(--mia-crimson-pale, rgba(164,19,60,.14))); color: var(--crimson-dark, var(--mia-crimson-dark, #7d0f2d)); }
.mc-file-name { flex: 1; min-width: 0; text-align: left; background: none;
  border: 0; padding: 0; font-family: inherit; font-size: 13px; cursor: pointer;
  color: var(--ia, var(--text-accent, #1d3557)); text-decoration: underline; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mc-file-meta { font-size: 11px; color: var(--muted, var(--text-secondary, #8a8f98)); white-space: nowrap; }
.mc-file-x { background: none; border: 0; cursor: pointer; font-size: 16px;
  line-height: 1; color: var(--muted, var(--text-secondary, #8a8f98)); padding: 0 4px; }
.mc-file-x:hover { color: var(--crimson, var(--mia-crimson, #a4133c)); }
.mc-tidy { margin: 8px 6px 2px; width: calc(100% - 12px); justify-content: center; }

/* The paperclip: a file input dressed as a button, because a bare one is
   unstyleable and says "No file chosen" for ever. */
.mc-send-row { display: flex; gap: 8px; }
.mc-send-row .btn { flex: 1; justify-content: center; }
.mc-clip { position: relative; overflow: hidden; }
.mc-clip input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer;
  width: 100%; height: 100%; }
.mc-clip.is-busy { opacity: .55; pointer-events: none; }