/* The textbox. docs/TEXTBOX.md
   One rounded container: the files waiting to be sent, the words being typed,
   and the controls inside it. There is exactly one of these; every screen uses
   it, and this is the only place its shape is written. */

.textbox{display:block;border:1px solid var(--m3-outline,#d5cfc4);border-radius:var(--m3-r-l,22px);
  background:var(--m3-surface,#fbf9f6);padding:8px;position:relative;
  transition:border-color .15s ease,box-shadow .15s ease}
.textbox:focus-within{border-color:var(--m3-primary,#7a5a22);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--m3-primary,#7a5a22) 14%,transparent)}
/* Something is being dragged onto it. */
.textbox.taking{border-color:var(--m3-primary,#7a5a22);border-style:dashed;
  background:var(--m3-primary-container,#f3e6cf)}
.textbox.taking .textbox-drop{display:flex}
.textbox-drop{display:none;position:absolute;inset:0;z-index:3;align-items:center;justify-content:center;
  border-radius:inherit;background:color-mix(in srgb,var(--m3-primary-container,#f3e6cf) 88%,transparent);
  font:600 14px/1.3 var(--m3-sans,system-ui);color:var(--m3-on-primary-container,#2c1f06);
  pointer-events:none;text-align:center;padding:12px}

/* ---- how to use it ----
   Said at the top, before anything is typed, rather than after something has
   been refused. The limits are written by the box from its own numbers. */
.textbox-guide{padding:10px 12px 12px;margin:0 0 2px;
  border-bottom:1px solid var(--m3-outline-variant,#e6e0d5)}
.textbox-guide p{display:flex;align-items:flex-start;gap:9px;margin:0 0 7px;
  font:13px/1.45 var(--m3-sans,system-ui);color:var(--m3-on-surface-variant,#6a655c)}
.textbox-guide p:last-child{margin-bottom:0}
.textbox-guide svg{width:17px;height:17px;flex:0 0 auto;margin-top:1px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.textbox-guide .textbox-limit{margin-top:9px;font-weight:600;color:var(--m3-on-surface,#1c1a17)}

/* ---- what is waiting to be sent ---- */
.textbox-files{display:flex;flex-wrap:wrap;gap:8px;padding:4px 4px 10px}
.textbox-files:empty{display:none}
.textbox-file{position:relative;flex:0 0 auto;border-radius:var(--m3-r-m,16px);overflow:hidden;
  background:var(--m3-surface-2,#f1ece3);border:1px solid var(--m3-outline-variant,#e7e2d8)}
/* A photograph and a video show as themselves. */
.textbox-file.photo,.textbox-file.video{width:84px;height:84px;padding:0;cursor:pointer}
.textbox-file.photo img,.textbox-file.video video{width:100%;height:100%;object-fit:cover;display:block}
.textbox-file.video::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;
  transform:translate(-50%,-50%);border-left:13px solid #fff;border-top:9px solid transparent;
  border-bottom:9px solid transparent;filter:drop-shadow(0 1px 3px #0009);pointer-events:none}
/* How big it is, on the picture itself: a strip along the bottom that is
   readable over anything a camera produces. */
.textbox-file .weight{position:absolute;left:0;right:0;bottom:0;padding:3px 5px 4px;
  background:linear-gradient(#0000,#000000b8);color:#fff;font:600 10px/1.2 var(--m3-sans,system-ui);
  text-align:center;letter-spacing:.02em;pointer-events:none}

/* A recording plays where it is. Anything else is named. */
.textbox-file.voice,.textbox-file.file{display:flex;align-items:center;gap:9px;padding:9px 11px;
  max-width:min(280px,100%);min-height:52px}
/* A recording is a different kind of thing from a document, and looks it:
   a voice has its own colour so a person can find it in a row of files
   without reading any of them. Asked for on 11 September 2026. */
.textbox-file.voice{background:#efe9f8;border-color:#d9cdee;color:#463a63;
  flex-wrap:wrap;max-width:min(320px,100%)}
/* The player goes on its own line under the name. Beside it there was room
   for neither: the name was squeezed to nothing and the size wrapped. */
.textbox-file.voice audio{order:1;flex:1 0 100%;max-width:100%;margin-top:2px}
.textbox-file.voice .kind{color:#6b4fa3}
.textbox-file.voice .textbox-about small{color:#6b5f86}
.textbox-file .kind{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.textbox-file .textbox-about{min-width:0;flex:1}
.textbox-file .textbox-about b{display:block;font:600 12.5px/1.25 var(--m3-sans,system-ui);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.textbox-file .textbox-about small{display:block;font-size:11px;color:var(--m3-on-surface-variant,#6a655c);margin-top:1px}
.textbox-file audio{display:block;height:34px;max-width:200px}
/* The way to take one off, on the file. */
.textbox-file .drop{position:absolute;top:3px;right:3px;width:24px;height:24px;min-width:0;border:0;
  border-radius:50%;background:#1c1b18cc;color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;z-index:2}
.textbox-file .drop svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round}
.textbox-file.voice .drop,.textbox-file.file .drop{position:static;background:transparent;
  color:var(--m3-on-surface-variant,#6a655c);width:32px;height:32px}
.textbox-file.voice .drop svg,.textbox-file.file .drop svg{width:15px;height:15px}

/* ---- the words ---- */
.textbox textarea{display:block;width:100%;border:0;background:transparent;color:inherit;resize:none;
  padding:8px 10px;font:16px/1.5 var(--m3-sans,system-ui);outline:none!important;box-shadow:none!important;
  overflow-y:hidden;min-height:2.6em;max-height:42svh}
.textbox textarea::placeholder{color:var(--m3-on-surface-variant,#6a655c)}

/* ---- the controls, inside ---- */
.textbox-tools{display:flex;align-items:center;gap:2px;padding:0 2px}
.textbox-tools .textbox-spacer{flex:1}
.textbox-note{font-size:12px;color:var(--m3-on-surface-variant,#6a655c);padding:0 8px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.textbox-note.bad{color:var(--m3-error,#a3352b)}
.textbox-tools .icon-button{width:42px;height:42px}
.textbox-tools .icon-button svg{width:20px;height:20px}
.textbox-tools .send{background:var(--m3-surface-3,#ece5da);color:var(--m3-on-surface-variant,#6a655c)}
.textbox-tools .send.ready{background:var(--m3-primary,#7a5a22);color:var(--m3-on-primary,#fff)}
.textbox-tools .recording{background:var(--m3-error-container,#f8e6e3);color:var(--m3-error,#a3352b)}
.textbox input[type=file]{display:none}

/* Whether a file is safe yet. Kept the moment it is attached (held-files.js):
   a small tick once the server has it, a faint pulse while it travels, and an
   arrow to send it again if it did not arrive. 15 September 2026. */
.textbox-file .textbox-kept{position:absolute;left:3px;bottom:3px;width:22px;height:22px;min-width:0;
  padding:0;border:0;border-radius:50%;display:grid;place-items:center;
  background:#1c1a17b3;color:#fff}
.textbox-file .textbox-kept svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.textbox-file .textbox-kept:disabled{cursor:default;opacity:1}
.textbox-file.is-keeping .textbox-kept{animation:textbox-keeping 1.1s ease-in-out infinite}
.textbox-file.is-keeping .textbox-kept svg{opacity:.35}
.textbox-file.is-kept .textbox-kept{background:#2f6b3fcc}
.textbox-file.is-notKept .textbox-kept{background:#903b29;width:28px;height:28px}
.textbox-file.voice .textbox-kept,.textbox-file.file .textbox-kept{position:static;flex:0 0 auto}
@keyframes textbox-keeping{50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.textbox-file.is-keeping .textbox-kept{animation:none}}