/* ==========================================================================
   Cuadrilla en el móvil: una app de mensajería.
   Solo se carga por debajo de 820 px y todo cuelga de <html class="m"> (lo pone m/MobileShell): el escritorio no cambia.
   ========================================================================== */
:root{
  --m-bg:var(--ground); --m-bar:color-mix(in srgb,var(--ground) 86%,transparent); --m-row:var(--surface);
  /* Los colores de Cuadrilla, no los de una app de mensajería: lo tuyo en tinta, los acentos en lima. */
  --m-them:var(--surface); --m-me:var(--ink); --m-me-ink:var(--on-ink); --m-me-meta:color-mix(in srgb,var(--on-ink) 62%,transparent);
  --m-pill:color-mix(in srgb,var(--surface) 92%,transparent); --m-accent:var(--ink);
  --m-top:env(safe-area-inset-top); --m-bottom:env(safe-area-inset-bottom);
}
/* En oscuro lo tuyo no va en tinta (casi blanco, deslumbra): va en un verde oliva apagado, con el texto claro y los
   acentos en lima, igual que en claro. */
:root[data-theme=dark]{ --m-them:#1F1F1E; --m-me:#2E3823; --m-me-ink:var(--ink); --m-me-meta:color-mix(in srgb,var(--ink) 58%,transparent) }
/* En oscuro, el móvil va casi en negro, como las apps del teléfono: en una pantalla pequeña (y OLED) se ve limpio y con
   más contraste. Las capas suben en grises neutros para que se distingan. El escritorio se queda un punto más claro. */
html.m[data-theme=dark]{
  --ground:#0B0B0B; --ground2:#0F0F0F; --panel:#111111; --white:#1C1C1C;
  --surface:#1C1C1C; --surface2:#171717; --subtle:#1F1F1F; --soft:#232323; --soft2:#2A2A2A; --hover:#1C1C1C; --sel:#2C2C2C;
  --line:#262626; --line2:#202020; --sep:#242424; --border:#333333; --border2:#424242;
  --glass:rgba(28,28,28,.86); --m-them:#1C1C1C;
}

/* ---------- base: nada de zoom, rebotes de página ni resaltados de navegador ---------- */
html.m,html.m body{height:100%;overflow:hidden;overscroll-behavior:none}
html.m body{background:var(--m-bg);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;font-size:15px;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.m input,html.m textarea,html.m select,html.m [contenteditable]{font-size:16px;-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
html.m .sheet .txt,html.m .m-prefs{-webkit-user-select:text;user-select:text}
html.m a,html.m button{touch-action:manipulation}
html.m :focus-visible{outline-offset:-2px}

.m-app{position:fixed;left:0;right:0;top:0;height:var(--vvh,100dvh);overflow:hidden;overflow:clip;background:var(--m-bg)}
/* Durante una llamada (live/CallWidget.jsx), su barra flota abajo, sobre lo que se ve. En una conversación, justo encima
   del campo de escribir (los mensajes pasan por debajo y el campo le guarda el hueco: lo último sigue a la vista). Donde
   no hay campo (tus chats, una hoja abierta, sus ajustes…), abajo del todo, y lo de debajo le deja sitio (--m-bottom):
   así nunca tapa la cabecera, el campo de escribir ni los botones de abajo. Ahí, con el teclado abierto, se aparta. */
html.live-floating{--live-h:calc(68px + env(safe-area-inset-bottom))}
html.live-docked .m-dock>.composer{margin-top:64px}
.live-float.cw[data-docked]{bottom:auto}
html.live-floating:not(.live-docked):not(.kb){--m-bottom:var(--live-h)}
html.live-floating.kb:not(.live-docked) .live-float.cw{display:none}
html.m.live-floating:not(.live-docked):not(.kb) :is(.prefs,.desk){bottom:var(--live-h)}
html.m.live-floating:not(.live-docked):not(.kb) .qv-float{bottom:calc(6px + var(--live-h))}
.m-layer{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--m-bg);overflow:hidden;overflow:clip}
.m-under{transition:transform .34s var(--out)}
.m-app.covered .m-under{transform:translate3d(calc(-24% * (1 - var(--peel,0))),0,0)}
.m-app.covered .m-under::after{content:'';position:absolute;inset:0;background:#000;opacity:calc(.08 * (1 - var(--peel,0)));pointer-events:none}
.m-app:has(.peeling) .m-under{transition:none}
.m-over{z-index:2;box-shadow:-12px 0 28px -18px rgba(0,0,0,.45)}
.m-over.entering{animation:m-push-in .34s var(--out) both}
/* La que ya estaba al abrir la pantalla (un hilo desde «Hilos») no se desliza, pero lleva una animación quieta como las
   demás: Safari en el iPhone, sin capa propia, no pintaba su fondo y se transparentaba la conversación de debajo. */
.m-over.still{animation:m-hold .01s both}
@keyframes m-hold{from{transform:translate3d(0,0,0)}to{transform:none}}
/* La que dejaste debajo al abrir otra encima: se aparta un poco, como la lista, y vuelve a su sitio al volver. */
.m-over{transition:transform .34s var(--out)}
.m-below{transform:translate3d(-24%,0,0);box-shadow:none}
.m-below::after{content:'';position:absolute;inset:0;z-index:20;background:#000;opacity:.08;pointer-events:none}
.m-over.leaving{z-index:3;animation:m-push-out .26s var(--ease) both;pointer-events:none}
@keyframes m-push-in{from{transform:translate3d(100%,0,0)}to{transform:none}}
@keyframes m-push-out{from{transform:none}to{transform:translate3d(100%,0,0)}}
@keyframes m-sheet-up{from{transform:translate3d(0,100%,0)}to{transform:none}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}

/* overflow:clip: lo que no hace scroll no se puede desplazar ni por código (el navegador, al enfocar un campo, movería la cabecera). */
.m-screen{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;background:var(--m-bg);overflow:hidden;overflow:clip}
.m-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(12px + var(--m-bottom))}
.m-center{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}

/* ---------- cabeceras ---------- */
.m-top{flex:none;display:flex;align-items:center;gap:4px;min-height:calc(56px + var(--m-top));padding:var(--m-top) 6px 0 8px;background:var(--m-bar);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:.5px solid var(--line);position:relative;z-index:4}
.m-icon,.m-back{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;position:relative;transition:background .15s}
.m-icon:active,.m-back:active{background:var(--hover)}
/* El micro de tu asistente (arriba a la derecha de los chats): mientras le grabas, encendido. La grabación flota abajo. */
.m-mic.on{background:var(--ink);color:var(--on-ink)}
html.m .qv-float{left:12px;right:12px;width:auto;bottom:calc(12px + env(safe-area-inset-bottom))}
html.m .qv-float .rec-bar .icon-btn,html.m .qv-float .rec-bar .send{width:40px;height:40px;min-width:40px}
html.m .qv-float .qv-status .btn.sm{height:40px;padding:0 12px}
.m-back{margin-left:-4px;width:auto;min-width:40px;padding:0 4px;border-radius:22px;gap:2px}
.m-back-n{font:600 12px/20px var(--font);color:var(--on-ink);background:var(--ink);border-radius:10px;min-width:20px;height:20px;padding:0 6px}
.m-title{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:4px 6px;border-radius:12px;text-align:left;color:inherit}
button.m-title:active{background:var(--hover)}
.m-title-t{min-width:0;display:flex;flex-direction:column}
.m-title-t b{font-size:17px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-title-t small{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:m-fade .3s}
.m-wait{color:var(--red)!important}
.m-wait::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:6px;vertical-align:1px}

/* ---------- lista de chats ---------- */
.m-ws{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:0;background:transparent;color:inherit;padding:6px 8px;border-radius:14px;text-align:left;position:relative}
.m-ws:active{background:var(--hover)}
.m-ws-t{min-width:0;display:flex;flex-direction:column}
.m-ws-t b{font-size:19px;font-weight:650;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-ws-t small{font-size:13px;color:var(--muted)}
.m-dot{position:absolute;top:8px;left:32px;width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px var(--m-bg)}
.m-dot.static{position:static;box-shadow:none}
.m-search{display:flex;align-items:center;gap:8px;height:40px;margin:10px 14px 6px;padding:0 12px;border-radius:12px;background:var(--soft2);color:var(--muted)}
.m-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);height:100%;padding:0}
.m-search input::-webkit-search-cancel-button{display:none}
.m-search-x{border:0;background:transparent;color:var(--muted);width:32px;height:32px;margin-right:-8px;display:flex;align-items:center;justify-content:center}
.m-notices{padding:4px 14px}
.m-mock{margin:4px 14px;font-size:12px;color:var(--amber-ink);background:var(--amber2);border:1px solid var(--amber-line);border-radius:10px;padding:6px 10px}
.m-row{display:flex;align-items:center;gap:13px;min-height:74px;padding:0 16px;color:var(--ink);position:relative;transition:background .12s;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.m-row:active{background:var(--hover);color:var(--ink)}
.m-row:hover{color:var(--ink)}
.m-row-main{flex:1;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:3px;border-bottom:.5px solid var(--line)}
.m-row:last-of-type .m-row-main{border-bottom-color:transparent}
.m-row-top{display:flex;align-items:baseline;gap:6px;min-width:0}
.m-row-name{font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.m-row-top .iatag{align-self:center}
.m-row-time{margin-left:auto;flex:none;font-size:13px;color:var(--muted2);font-variant-numeric:tabular-nums}
.m-row.unread .m-row-time{color:var(--m-accent);font-weight:600}
.m-row-sub{display:flex;align-items:center;gap:8px;min-width:0}
.m-row-prev{flex:1;min-width:0;font-size:15px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-row-prev.dim{color:var(--faint)}
.m-row.unread .m-row-prev{color:var(--ink2)}
.m-row-who{color:var(--ink3);font-weight:500}
.m-row-mic{vertical-align:-2px;margin-right:3px}
.m-writing{flex:1;font-size:15px;color:var(--ink2);font-weight:500}
.m-badge{flex:none;min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:var(--ink);color:var(--on-ink);font:600 12px/21px var(--font);text-align:center;animation:pop .35s var(--spring)}
/* Canal silenciado (STU-84): atenuado y con la campana tachada junto al nombre. */
.m-row.muted .m-row-name,.m-row.muted .m-row-prev{color:var(--muted2)} .m-row.muted .m-chface{opacity:.6}
.m-mute{flex:none;color:var(--muted2)}
.m-act-sub{display:block;margin:2px 0 0;font-size:12.5px;line-height:1.35;color:var(--muted2);font-weight:400}
.m-badge:empty{min-width:11px;width:11px;height:11px;padding:0}
.m-chface{width:50px;height:50px;flex:none;border-radius:14px;background:var(--soft2);color:var(--ink3);display:flex;align-items:center;justify-content:center}
.m-chface .ic{width:22px;height:22px}
.m-chface.sm{width:38px;height:38px;border-radius:11px}
.m-chface.sm .ic{width:18px;height:18px}
.m-row .av{--r:14px}
.m-empty{text-align:center;color:var(--muted);padding:28px 16px}
.m-hint-row{display:flex;align-items:center;gap:10px;margin:14px 16px;padding:12px 14px;border:1px dashed var(--border);border-radius:14px;background:transparent;color:var(--ink3);font-size:15px;width:calc(100% - 32px)}
.m-list-end{height:88px}
.m-fab{position:absolute;right:16px;bottom:calc(18px + var(--m-bottom));z-index:5;width:58px;height:58px;border-radius:18px;border:0;background:var(--lime);color:#1A1C19;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);transition:transform .2s var(--spring)}
.m-fab .ic{width:22px;height:22px}
.m-fab:active{transform:scale(.92)}
.m-row.sk{pointer-events:none}
.m-row.sk .m-row-main{gap:9px}
.sk-av{width:50px;height:50px;flex:none;border-radius:14px;background:linear-gradient(90deg,var(--hover) 0%,var(--ground) 40%,var(--hover) 80%);background-size:300% 100%;animation:skel 1.4s ease-in-out infinite}

/* ---------- conversación ---------- */
.m-chat .thread-wrap{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
/* El fondo de la conversación: un patrón muy tenue con motivos de Cuadrilla (public/chat-pattern.svg, como máscara: el
   color lo pone el tema). Quieto mientras se desplaza, como en las apps de mensajería. */
.m-chat::before,.m-hilo .wpanel::before{content:'';position:absolute;inset:0;pointer-events:none;background:var(--ink);opacity:.045;
  -webkit-mask:url(/chat-pattern.svg) 0 0/168px 168px repeat;mask:url(/chat-pattern.svg) 0 0/168px 168px repeat}
:root[data-theme=dark] :is(.m-chat,.m-hilo .wpanel)::before{opacity:.05}
.m-hilo .wpanel{position:relative}
.m-chat>:not(.m-layer),.m-hilo .wpanel>*{position:relative}
.m-chat>.m-top{z-index:4}
.thread.bubbles,.m-scroll{scrollbar-width:none}
.thread.bubbles::-webkit-scrollbar,.m-scroll::-webkit-scrollbar{display:none}
.thread.bubbles{flex:1;min-height:0;padding:8px 10px 6px;scroll-behavior:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;overflow-anchor:none}
.thread.bubbles .thread-in{gap:2px}
.thread.bubbles{position:relative}
.bubbles .day-sep{justify-content:center;margin:12px 0 6px;text-transform:none;letter-spacing:0;font-weight:500;font-size:13px;color:var(--ink3);pointer-events:none}
.bubbles .day-sep::before,.bubbles .day-sep::after{display:none}
.bubbles .day-sep span{background:var(--m-pill);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:4px 11px;border-radius:9px;box-shadow:var(--sh-1)}
.day-float{position:absolute;top:8px;left:0;right:0;z-index:3;display:flex;justify-content:center;pointer-events:none;opacity:0;transform:translateY(-4px);transition:opacity .25s var(--ease),transform .25s var(--out)}
.day-float.on{opacity:1;transform:none}
.day-float span{font-size:13px;font-weight:500;color:var(--ink3);background:var(--m-pill);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:4px 11px;border-radius:9px;box-shadow:var(--sh-2)}
.day-float span:empty{display:none}
.unread-sep{display:flex;justify-content:center;margin:10px -10px 6px;padding:5px 0;background:color-mix(in srgb,var(--m-pill) 70%,transparent);font-size:13px;font-weight:600;color:var(--ink3)}
.older-spin{display:flex;justify-content:center;padding:10px 0 14px}
.older-spin i{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--muted);animation:spin .8s linear infinite}
.bubbles .sys{margin:8px auto;justify-content:center;text-align:center;background:var(--m-pill);border-radius:10px;padding:5px 11px;max-width:92%;font-size:13px;line-height:1.4;box-shadow:var(--sh-1)}
.bubbles .run-events{align-self:center;margin:6px auto;max-width:92%}
.bubbles .run-sum{background:var(--m-pill);border-color:transparent;box-shadow:var(--sh-1)}
.bgroup{display:flex;flex-direction:column;gap:2px;margin-top:8px;min-width:0}
.bgroup.mine{align-items:flex-end}
.bgroup.with-av{position:relative;padding-left:36px}
.bgroup.with-av .bub>.b-av{position:absolute;left:-36px;bottom:0;line-height:0}
.bmsg .replies-bar.compact{flex-wrap:nowrap;white-space:nowrap}
.bgroup.with-av .bmsg{max-width:calc(84% + 12px)}
.bgroup.theirs{align-items:flex-start}
.bgroup.enter .bmsg:last-child{animation:m-bub-in .32s var(--out) both}
.bgroup.mine.enter .bmsg:last-child{transform-origin:bottom right}
.bgroup.theirs.enter .bmsg:last-child{transform-origin:bottom left}
@keyframes m-bub-in{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.bmsg{max-width:84%;min-width:0;position:relative;display:flex;flex-direction:column;touch-action:pan-y}
.mine>.bmsg,.bmsg.mine{align-items:flex-end}
/* Tus burbujas, pegadas a la derecha: el hueco de su izquierda también se arrastra para responder (o no hay sitio). */
.bmsg.mine::before{content:'';position:absolute;top:0;bottom:0;right:100%;width:100vw;touch-action:pan-y}
.bub{position:relative;background:var(--m-them);color:var(--ink);border-radius:18px;padding:6px 11px 7px;box-shadow:0 1px .5px rgba(0,0,0,.08);
  font-size:17px;line-height:1.47;overflow-wrap:anywhere;min-width:64px;max-width:100%;transition:filter .15s}
.bmsg.mine .bub{background:var(--m-me);color:var(--m-me-ink)}
.bgroup.theirs .bmsg:not(.last) .bub{border-bottom-left-radius:6px}
.bgroup.theirs .bmsg:not(.first) .bub{border-top-left-radius:6px}
.bgroup.mine .bmsg:not(.last) .bub{border-bottom-right-radius:6px}
.bgroup.mine .bmsg:not(.first) .bub{border-top-right-radius:6px}
.bgroup.theirs .bmsg.last .bub{border-bottom-left-radius:4px}
.bgroup.mine .bmsg.last .bub{border-bottom-right-radius:4px}
.bmsg:active .bub{filter:brightness(.96)}
.bmsg.failed .bub{box-shadow:0 0 0 1.5px var(--red)}
.bmsg.in-hilo .bub{box-shadow:0 0 0 2px var(--lime)}
.bmsg.mine .bst{color:var(--lime)}
.bmsg.mine .bst.failed{color:var(--amber)}
.bub .txt{font-size:17px;line-height:1.47}
.bub .txt p{margin:0 0 8px}
.bub .txt p:last-child{margin-bottom:0}
.bub .txt a{color:var(--teal);word-break:break-all}
.bmsg.mine .bub .txt a{color:inherit;text-decoration-color:var(--lime)}
/* Menciones y #canales dentro de una burbuja: en negrita y en color, sin fondo (con fondo parecían texto seleccionado). */
.bub .txt .at,.bub .txt .ch-ref{background:none;padding:0;border-radius:0;font-weight:600;text-decoration:none}
.bub .txt .at{color:var(--teal)}
.bub .txt a.at-link{word-break:normal}
.bub .txt a.at-link:hover{background:none}
.bub .txt .ch-ref{color:var(--blue-ink)}
.bmsg.mine .bub .txt .at,.bmsg.mine .bub .txt .ch-ref{color:var(--lime)}
.bmsg.mine .bub .txt code{background:color-mix(in srgb,var(--m-me-ink) 14%,transparent)}
.bmsg.mine .bub .txt blockquote{color:inherit}
/* La hora va dentro de la burbuja, abajo a la derecha, en la última línea si cabe (como en WhatsApp). */
.bub .txt:has(+ .bmeta)>:last-child::after{content:'';display:inline-block;width:var(--metaw,46px)}
.bmsg.mine .bub:has(.bst){--metaw:62px}
.bmeta{position:absolute;right:10px;bottom:5px;display:inline-flex;align-items:center;gap:3px;font-size:11px;line-height:1;color:var(--muted2);font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap}
.bmsg.mine .bmeta{color:var(--m-me-meta)}
.bub:has(.files) .bmeta,.bub:not(:has(.txt)) .bmeta{position:static;display:flex;justify-content:flex-end;margin-top:4px}
/* Nota de voz fuera de una burbuja (en un hilo): el texto y debajo el reproductor, con la hora a su derecha. */
.vn-row{margin-top:6px;padding-right:var(--metaw,46px)}
.vn-row:first-child{margin-top:2px}
/* En una burbuja, la nota de voz es una ficha: arriba el reproductor a lo ancho y, pegado debajo, el texto con
   «Ver original» y la hora al pie. Sirve igual en las tuyas (todo va en el color de su texto). */
.bub.vcard{padding:0;min-width:min(260px,100%);width:290px}
.vcard-head{display:flex;align-items:center;gap:8px;min-height:30px;padding:4px 12px 0}
.vcard-head .bname{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vcard-head .vn-toggle{margin-left:auto;flex:none}
.bub .vn-md{display:flex;width:100%;height:52px;gap:10px;padding:0 12px 0 10px;border:0;border-radius:0;background:transparent}
.bmsg.mine .vn-md{--vn-ink:var(--m-me-ink);--vn-on:var(--m-me)}
.bmsg.mine .vcard-head .bname{color:var(--m-me-meta)}
.vn-md .vn-play{width:32px;height:32px}
.vn-md .vn-play svg{width:12px;height:12px}
.vn-md .vn-wave{flex:1;min-width:0;height:22px;justify-content:space-between;gap:0}
.vn-md .vn-rate{height:26px;border-radius:13px}
.vcard-body{display:flex;flex-direction:column;gap:2px;padding:9px 13px 5px;border-top:1px solid color-mix(in srgb,currentColor 8%,transparent);
  background:color-mix(in srgb,currentColor 3%,transparent);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
.vcard-body .txt{font-size:16px;line-height:1.45}
.vcard-foot{display:flex;align-items:center;justify-content:flex-end;min-height:18px}
.vcard-head .vn-toggle{height:32px;padding:0;font-size:13px}
.bmsg.mine .vn-toggle{color:var(--m-me-meta)}
.vcard .vcard-foot .bmeta{position:static;margin-top:0}
/* En la foto de quien habla, el mismo micrófono que en el escritorio (en las tuyas, nada). */
.b-av .av-mic{width:16px;height:16px;right:-5px;bottom:-5px;background:var(--m-bg)}
.b-av .av-mic svg{width:10px;height:10px}
.bub.only-img{padding:3px}
.bub.only-img .bmeta{position:absolute;right:9px;bottom:8px;color:#fff;background:rgba(0,0,0,.4);border-radius:8px;padding:3px 6px}
.bst{width:13px;height:13px}
.bst.failed{font:700 11px var(--font);color:var(--red)}
.bname{font-size:14px;font-weight:600;color:var(--ink2);margin:0 0 2px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
/* «de parte de Jose» / «a petición de Marta» junto al nombre, como en el ordenador (Via.jsx). */
.bname .via{font-size:12px;font-weight:400;color:var(--muted2);white-space:nowrap}
.bname .via .via-who{font-weight:500;color:var(--ink3)}
/* Por qué viene a contarlo si nadie le ha escrito («Recordatorio»): encima de su primera burbuja. */
.bmotive{font-size:12px;font-weight:500;color:var(--muted2);margin:0 0 2px}
.task-status.compact{margin:3px 4px 0;font-size:12.5px;color:var(--muted2)}
.b-av .av-pair .av-pair-p{right:-5px;bottom:-5px;box-shadow:0 0 0 2px var(--m-bg)}
.bub .quote{display:flex;flex-direction:column;align-items:stretch;gap:1px;white-space:normal;border-left:3px solid var(--lime);background:color-mix(in srgb,var(--ink) 6%,transparent);
  border-radius:8px;padding:5px 9px;margin:2px -5px 5px;font-size:14px;color:var(--ink3);overflow:hidden}
.bub .quote b{color:var(--ink2);font-size:13px}
.bmsg.mine .bub .quote{background:color-mix(in srgb,var(--m-me-ink) 12%,transparent);color:inherit}
.bmsg.mine .bub .quote b{color:inherit}
.bmsg.mine .bub .file-chip{color:var(--ink)}
.bub .quote span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* En el canal: de qué hilo viene una respuesta que también se mandó aquí, en una sola línea (toca para abrir el hilo). */
.bthread{display:flex;align-items:center;gap:6px;width:100%;min-width:0;margin:0 0 4px;padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:14px;text-align:left}
.bthread .ic{width:14px;height:14px;flex:none;color:var(--muted2)}
.bthread b{flex:none;font-weight:600;color:var(--ink3)}
.bthread-q{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bmsg.mine .bthread,.bmsg.mine .bthread b,.bmsg.mine .bthread .ic{color:var(--m-me-meta)}
/* Dentro del hilo: que también se envió a la conversación, pequeño y debajo de la burbuja. */
.bnote{display:flex;align-items:center;gap:5px;margin:3px 6px 0;font-size:12px;color:var(--muted2)}
.bnote .ic{width:12px;height:12px}
.bmsg .passed{margin:3px 6px 0}
.bub .msg-shots{margin:0}
.bub .link-cards{max-width:min(300px,68vw);margin-top:8px}
.bub .link-card{border-left-color:color-mix(in srgb,currentColor 30%,transparent)}
.bub .lc-site{color:inherit;opacity:.7}
.bub .lc-desc{color:inherit;opacity:.85}
.bmsg.mine .bub .lc-title{color:inherit;text-decoration:underline;text-decoration-color:var(--lime)}
.bub .lc-pic{max-width:100%}
.bub .msg-shot img{border-radius:14px;max-height:320px;width:100%;object-fit:cover}
/* Su hueco reservado desde antes de cargar (4:3, recortada; entera al tocarla): si no, al subir, las imágenes de arriba
   aparecían y empujaban todo hacia abajo (Safari no compensa ese salto). Un GIF, con su forma si se saben sus medidas
   (`--shot-ratio`, entre 3:4 y 2:1), y nunca recortado: lo que no cabe en su hueco se ve entero, con margen. */
.bub .msg-shot{display:block;width:min(260px,62vw);border:0;padding:0;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.bub .msg-shot img{aspect-ratio:var(--shot-ratio,4/3);height:auto;max-height:none}
.bub .msg-shot.gif img{object-fit:contain}
.bub .msg-video{width:min(280px,66vw);border:0;border-radius:14px}
.bub .msg-video video{max-height:360px}
.bub .files{margin-top:4px}
.bub .file-chip{background:color-mix(in srgb,var(--surface) 70%,transparent);max-width:100%}
.bub .file-chip .fname{max-width:44vw}
.bmsg .reacts{margin:-6px 8px 2px;position:relative;z-index:1;gap:3px}
.bmsg .react{height:24px;padding:0 7px;background:var(--surface);border-color:var(--line);box-shadow:var(--sh-1)}
.bmsg .replies-bar{margin:2px 4px 0;min-height:36px;padding:4px 2px;gap:7px;font-size:13px;max-width:100%}
.bmsg .replies-bar .rb-faces .av{--r:6px}
.bmsg .send-failed{margin:4px 4px 0}
.bswipe{position:absolute;left:-36px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--m-pill);display:flex;align-items:center;justify-content:center;
  color:var(--ink3);opacity:var(--swipe,0);transform:scale(calc(.5 + .5 * var(--swipe,0)));pointer-events:none}
.b-av .bswipe{left:0;top:auto;bottom:34px;margin-top:0}
.bcard{width:100%;max-width:100%;margin-top:10px;display:flex;flex-direction:column;gap:6px}
.bcard .bub{align-self:flex-start;max-width:84%}
.bcard .card{margin:0}
.bubbles .chips{margin:12px 0 4px;justify-content:flex-start}
.bubbles .chips.in-msg{margin:6px 0 2px}
.bubbles .chip{min-height:40px;font-size:14px}
.to-bottom{position:absolute;right:12px;bottom:12px;z-index:3;width:42px;height:42px;border-radius:50%;border:0;background:var(--surface);color:var(--ink2);box-shadow:var(--sh-2);
  display:flex;align-items:center;justify-content:center;animation:pop .3s var(--spring)}
.to-bottom-n{position:absolute;top:-6px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--ink);color:var(--on-ink);font:600 12px/20px var(--font)}
/* Lo de abajo flota: los mensajes pasan por debajo, con un fundido suave hacia el borde para que se lea el campo. */
.m-chat>.m-dock{position:absolute;left:0;right:0;bottom:0;z-index:3;padding-top:18px;pointer-events:none;
  background:linear-gradient(to top,var(--m-bg) 0,var(--m-bg) 40%,color-mix(in srgb,var(--m-bg) 70%,transparent) 70%,transparent)}
.m-chat>.m-dock>*{pointer-events:auto}
.m-chat>.m-dock>.typing{pointer-events:none}
.m-chat .thread.bubbles{padding-bottom:calc(var(--dock-h,72px) + 4px);scroll-padding-bottom:var(--dock-h,72px)}
.m-chat .to-bottom{bottom:calc(var(--dock-h,72px) + 8px)}
.m-chat .typing{margin:0 14px;height:20px;padding-left:2px}
.m-chat .typing-in{height:20px}

/* ---------- campo de escribir ---------- */
.composer.compact{margin:0;border:0;border-radius:0;padding:4px 8px calc(6px + var(--m-bottom));background:transparent}
html.kb .composer.compact{padding-bottom:6px}
.composer.compact:focus-within{border-color:var(--line)}
.composer.compact .composer-row{gap:6px;align-items:flex-end}
.composer.compact .composer-more .icon-btn{width:44px;height:44px;border-radius:50%;color:var(--ink2);background:var(--surface);box-shadow:var(--sh-1)}
/* Flotando sobre el fondo, sin barra ni línea: el «+», el campo y el micro son piezas sueltas. */
.composer.compact .composer-more .icon-btn .ic{width:22px;height:22px}
/* El adjunto va dentro del campo de mensaje, encima del texto (no flotando fuera). */
.composer.compact .cmp-box{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--surface);border-radius:22px;box-shadow:var(--sh-1)}
.composer.compact .cmp-box .attach-row{padding:8px 10px 0}
.composer.compact .cmp-box .attach-row .attach-chip{box-shadow:none}
.composer.compact .cmp-field{border-radius:22px}
/* El micro y hablar por voz (o enviar) dentro del campo, a su derecha: una sola pieza, como en las apps de mensajería. */
.composer.compact .cmp-line{display:flex;align-items:flex-end;min-width:0}
.composer.compact .cmp-line .cmp-field{flex:1}
.composer.compact .cmp-line textarea{padding-right:6px}
.composer.compact .cmp-acts{display:flex;align-items:center;gap:2px;flex:none;padding:4px 4px 4px 0}
.composer.compact .cmp-acts .m-send{width:36px;height:36px;box-shadow:none}
.composer.compact .cmp-acts .m-send .ic{width:18px;height:18px}
.composer.compact .cmp-acts .m-send.quiet{background:transparent;color:var(--muted)}
/* Respuestas sugeridas en el móvil: botones encima del campo, en una fila que se desliza. */
.composer.compact .sug-chips{margin:0 0 8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
.composer.compact .sug-chips .chip{flex:none;min-height:40px}
.composer.compact .sug-pill .sug-t{padding:8px 6px 8px 15px}
.composer.compact .sug-pill .sug-go{width:30px;height:30px;margin:4px 5px 4px 2px}
.composer.compact .sug-pill .sug-go svg{width:15px;height:15px}
.composer.compact .cmp-hl mark{background:var(--lime-tint);box-shadow:0 0 0 2px var(--lime-tint)}
:root[data-theme=dark] .composer.compact .cmp-hl mark{background:#24402F;box-shadow:0 0 0 2px #24402F}
.composer.compact textarea{background:transparent;border:0;box-shadow:none;border-radius:22px;padding:10px 15px;font-size:17px;line-height:1.4;min-height:44px;max-height:140px}
.composer.compact .m-send{width:44px;height:44px;flex:none;box-shadow:var(--sh-1)}
.bub .md-code pre{font-size:13px;background:color-mix(in srgb,var(--ink) 6%,transparent);border-color:transparent}
.bmsg.mine .bub .md-code pre{background:color-mix(in srgb,var(--m-me-ink) 12%,transparent);color:inherit}
.bub .txt .md-code code,.bmsg.mine .bub .txt .md-code code{background:none;padding:0;border-radius:0}
.composer.compact .m-send .ic{width:19px;height:19px}
.composer.compact .m-send.ready{background:var(--ink);color:var(--on-ink);transform:none}
.composer.compact .m-send.mic{touch-action:none;-webkit-user-select:none;user-select:none}
.composer.compact .m-send.mic:active{transform:scale(1.12)}
.composer.compact .m-send:disabled{background:var(--border2)}
.composer.compact .replying{margin:0 2px 6px;padding:7px 8px 7px 12px;border:0;border-left:3px solid var(--lime);border-radius:12px;background:var(--surface);box-shadow:var(--sh-1);gap:10px}
/* En el móvil, en dos líneas: a quién respondes y, debajo, su mensaje cortado. */
.composer.compact .replying-t{display:flex;flex-direction:column;gap:1px;font-size:13px;line-height:1.3}
.composer.compact .replying-who::after{content:none}
.composer.compact .replying-who,.composer.compact .replying-x{overflow:hidden;text-overflow:ellipsis}
.composer.compact .replying-x{color:var(--muted)}
.composer.compact .attach-row{padding:0 2px 6px}
.composer.compact .rec-bar{min-height:44px;padding:0 6px 0 10px;background:var(--surface);border-radius:22px;box-shadow:var(--sh-1)}
.composer.compact .attach-row .attach-chip{box-shadow:var(--sh-1)}
.composer.compact .rec-bar .btn,.composer.compact .rec-bar .icon-btn{min-height:40px;min-width:40px}
.composer.compact .mention-pop{left:6px;right:6px;bottom:calc(100% + 4px);max-height:40vh;overflow:auto}
.composer.compact .mention-pop .pop-item{min-height:44px}
.composer.compact+.composer-tip{height:auto;margin:0;padding:2px 16px calc(6px + var(--m-bottom));background:transparent;font-size:12px}
.composer.compact .rec-float{position:absolute;left:12px;right:12px;bottom:calc(100% + 2px);margin:0 auto;width:max-content;max-width:calc(100% - 24px);padding:6px 12px;border-radius:14px;background:var(--surface);box-shadow:var(--sh-1);color:var(--muted2);font-size:12.5px;line-height:1.35;text-align:center;pointer-events:none;animation:view-in .2s var(--out)}

/* ---------- hojas inferiores (las nuestras y los diálogos de siempre) ---------- */
/* Hojas y diálogos: solo en lo que se ve (con el teclado abierto, encima de él; nunca debajo). */
.m-scrim{position:fixed;left:0;right:0;top:0;height:var(--vvh,100dvh);z-index:80;background:var(--scrim);display:flex;align-items:flex-end;animation:m-fade .2s var(--ease)}
.m-sheet{width:100%;max-height:calc(var(--vvh,100dvh) - var(--m-top) - 24px);overflow:auto;overscroll-behavior:contain;background:var(--surface);
  border-radius:20px 20px 0 0;padding:4px 0 calc(10px + var(--m-bottom));animation:m-sheet-up .34s var(--out);box-shadow:var(--sh-3)}
.m-grab{display:block;width:40px;height:5px;border-radius:3px;background:var(--border2);margin:6px auto 8px;flex:none}
.m-sheet-h{font-weight:600;font-size:17px;text-align:center;padding:2px 16px 10px}
.m-sheet-list{display:flex;flex-direction:column}
.m-act{display:flex;align-items:center;gap:14px;width:100%;min-height:54px;padding:8px 18px;border:0;background:transparent;font-size:16px;color:var(--ink);text-align:left}
.m-act:active{background:var(--hover);color:var(--ink)}
.m-act:hover{color:var(--ink)}
.m-act small{margin-left:auto;font-size:12px}
.m-act-ic{width:38px;height:38px;flex:none;border-radius:50%;background:var(--soft2);color:var(--ink2);display:flex;align-items:center;justify-content:center}
.m-act-ic .ic{width:18px;height:18px}
.m-act[aria-current] {font-weight:600}
.m-act-hire .grow{display:flex;flex-direction:column;min-width:0}
.m-act-hire small{margin:0;font-size:13px;color:var(--muted)}
.m-act-hire .m-act-ic{background:var(--lime);color:#1A1C19}
.m-sheet-sec{padding:16px 18px 6px;font-size:12px;color:var(--muted2);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.m-react-row{display:flex;justify-content:space-between;gap:2px;padding:4px 10px 12px;border-bottom:.5px solid var(--line)}
.m-react-row button{flex:1 1 0;min-width:0;max-width:46px;aspect-ratio:1;border:0;border-radius:50%;background:transparent;font-size:clamp(20px,6.4vw,27px);line-height:1;padding:0;animation:pop .32s var(--spring) both}
.m-react-row button.on{background:var(--lime-tint)}
.m-react-row button:active{transform:scale(1.25)}
html.m .scrim{inset:auto 0 auto 0;top:0;height:var(--vvh,100dvh);align-items:flex-end;padding:0;z-index:80;backdrop-filter:none;-webkit-backdrop-filter:none}
html.kb .m-sheet,html.kb.m .sheet{padding-bottom:10px}
html.m .scrim.top{padding-top:0}
html.m .scrim.imgview{align-items:center;justify-content:center;padding:12px;z-index:90}
html.m .scrim.imgview{touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none}
html.m .scrim.imgview img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center;will-change:transform;-webkit-touch-callout:none}
html.m .imgview-x{top:calc(12px + env(safe-area-inset-top,0px))}
html.m .scrim.imgview:has(.imgview-bar){padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
html.m .imgview-bar{bottom:calc(14px + env(safe-area-inset-bottom,0px));gap:10px}
html.m .imgview-act{padding:11px 14px;font-size:14.5px}
html.m .sheet,html.m .sheet.wide,html.m .sheet.sheet-review{width:100%;max-width:100%;border-radius:20px 20px 0 0;max-height:calc(var(--vvh,100dvh) - var(--m-top) - 16px);
  padding:4px 18px calc(18px + var(--m-bottom));animation:m-sheet-up .34s var(--out);overscroll-behavior:contain;gap:14px}
html.m .sheet>.m-grab{margin:6px auto 0}
/* La «Ficha completa» en el móvil: casi toda la pantalla, sin márgenes de más. */
html.m .sheet.wdeep{height:calc(var(--vvh,100dvh) - var(--m-top) - 16px);padding:4px 0 var(--m-bottom);gap:0}
html.m .wdeep>.sheet-h{padding:6px 56px 8px 16px}
html.m .wdeep>.sheet-x{top:8px}
html.m .wdeep .wp-tabs{padding:0 6px;overflow-x:auto;scrollbar-width:none}
html.m .wdeep .wp-tab{flex:none}
html.m .wdeep-b{padding:12px 14px 16px}
html.m .sheet-x{top:14px;right:10px;width:40px;height:40px}
html.m .sheet-f{bottom:calc(-18px - var(--m-bottom));margin:0 -18px calc(-18px - var(--m-bottom));padding:12px 18px calc(12px + var(--m-bottom))}
html.m .sheet .btn{min-height:44px}
html.m .sheet .seg{display:flex}
html.m .sheet .seg-b{flex:1 1 0;justify-content:center;display:inline-flex;align-items:center;gap:6px;min-height:40px;font-size:14px}
html.m .sheet input,html.m .sheet select,html.m .sheet textarea{min-height:44px}
html.m .menu .mi{height:46px;font-size:16px}
html.m .toasts{top:calc(10px + var(--m-top));bottom:auto}

/* ---------- detalles, hilo y ajustes ---------- */
/* Detalles e hilo: pantallas encima del chat (y de su cabecera). */
.m-info,.m-hilo{z-index:6}
.m-info .m-scroll,.m-settings .m-scroll{padding-top:6px}
.m-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:22px 24px 12px}
.m-hero .av{--r:28px;margin-bottom:10px}
.m-hero h1{margin:0;font-size:23px;font-weight:650;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.m-hero p{margin:0;font-size:15px;color:var(--ink3)}
.m-hero p.muted{font-size:14px;color:var(--muted)}
.m-hero .m-hero-id{margin-top:10px}
.m-hero .id-share.m-hero-id{height:36px;padding:0 14px 0 12px;font-size:14.5px}
.m-hero .id-faces.m-hero-id{height:40px}
.m-hero .m-hero-id .av{margin-bottom:0}
.m-chat>.share-tip-at{display:block;height:0;z-index:5}
.share-tip.m{top:6px;left:58px;right:auto;width:auto;max-width:calc(100% - 76px);font-size:14px;transform-origin:15% 0}
.share-tip.m::before{left:22px;right:auto}
.m-group{margin:14px 14px;background:var(--surface);border-radius:14px;overflow:hidden;box-shadow:var(--sh-1)}
.m-group-h{margin:22px 30px -6px;font-size:12px;color:var(--muted2);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.m-cell{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:10px 16px;border:0;background:transparent;font-size:16px;color:var(--ink);text-align:left;position:relative}
.m-cell:active:not(:disabled){background:var(--hover)}
.m-cell:hover{color:var(--ink)}
.m-cell:disabled{opacity:1;cursor:default}
.m-cell+.m-cell::before{content:'';position:absolute;top:0;left:60px;right:0;border-top:.5px solid var(--line)}
.m-cell.tall{align-items:flex-start}
.m-cell b{font-weight:500}
.m-cell small{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.4}
.m-cell-ic{width:30px;height:30px;flex:none;border-radius:8px;background:var(--soft2);color:var(--ink2);display:flex;align-items:center;justify-content:center}
.m-cell.danger{color:var(--red)}
.m-cell.danger .m-cell-ic{background:var(--red2);color:var(--red)}
.m-desk{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:22px 34px;color:var(--muted)}
.m-desk p{margin:0;font-size:14px;line-height:1.5}
.m-me{display:flex;align-items:center;gap:14px;margin:14px;padding:14px 16px;background:var(--surface);border-radius:16px;box-shadow:var(--sh-1);color:var(--ink)}
.m-me:active{background:var(--hover)}
.m-me b{display:block;font-size:18px;font-weight:600}
.m-me .grow{min-width:0}
.m-me small{display:block;color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-me .av{--r:50%}
.m-foot-note{margin:8px 30px;font-size:13px;color:var(--muted2);text-align:center;line-height:1.5}
.m-prefs .prefs-in{padding:16px 16px 40px;max-width:none}
.m-prefs .prefs-h h1{font-size:22px}
/* Contratar a tu primer worker: el panel de siempre, pero que crece y hace scroll con la pantalla (no recortado). */
.m-hire{padding:0;display:flex;flex-direction:column}
.m-hire>.panel{flex:none;min-height:100%;overflow:visible;border-radius:0;box-shadow:none}
.m-hire>.panel.center{align-items:flex-start;padding:24px 16px calc(32px + var(--m-bottom))}
.m-hire .btn.big{min-height:48px}
/* Contratar desde la lista de chats: la galería, a lo ancho del teléfono y bajo la cabecera de la pantalla. */
.m-hiring .hire-gal-in{padding-top:14px;padding-bottom:calc(40px + var(--m-bottom))}
.m-hilo .wpanel{position:relative;inset:auto;width:100%;flex:1;min-height:0;box-shadow:none;border-radius:0;display:flex;flex-direction:column;background:var(--m-bg)}
.m-hilo .wpanel>.m-dock{position:absolute;left:0;right:0;bottom:0;z-index:3;padding-top:18px;pointer-events:none;
  background:linear-gradient(to top,var(--m-bg) 0,var(--m-bg) 40%,color-mix(in srgb,var(--m-bg) 70%,transparent) 70%,transparent)}
.m-hilo .wpanel>.m-dock>*{pointer-events:auto}
/* Alineada con el texto del campo de escribir: tras el «+» (8 de margen + 44 del botón + 6 de hueco) y el relleno del
   campo (15). Sin el margen que trae del escritorio. */
.m-hilo .hilo-bc{margin:0;padding:0 16px calc(8px + var(--m-bottom)) 58px;background:none;font-size:13px;min-height:32px;display:flex;align-items:center;gap:8px;color:var(--muted)}
.m-hilo .hilo-bc input{width:16px;height:16px;margin:0 0 0 15px;flex:none;accent-color:var(--ink)}
html.kb .m-hilo .hilo-bc{padding-bottom:8px}
.m-hilo .composer.compact{padding-bottom:4px}
/* Seguir el hilo: un icono discreto (campana / campana tachada), no lo más llamativo de la pantalla. */
.m-follow{color:var(--muted)}
.m-follow.on{color:var(--ink2)}
/* En un hilo se lee de arriba abajo, desde el mensaje que lo abrió (no pegado abajo como un chat). */
.m-hilo .thread-in{justify-content:flex-start}
/* El mensaje que abrió el hilo: arriba, como tarjeta, con quién lo escribió. */
.hilo-root{margin:6px 2px 4px;padding:12px 14px 12px;background:var(--surface);border-radius:18px;box-shadow:var(--sh-1)}
.hr-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.hr-h .av{--r:10px}
.hr-av{position:relative;display:flex;flex:none}
.hr-who{display:flex;align-items:center;gap:6px;min-width:0;font-family:var(--font)}
.hr-who b{font-size:15px;font-weight:600}
.hr-t{margin-left:auto;font-size:12px;color:var(--muted2);white-space:nowrap}
.hr-body .txt{font-size:17px;line-height:1.47}
.hilo-root .reacts{margin-top:8px}
/* «N respuestas ——», como en Slack. */
.hilo-count{display:flex;align-items:center;gap:10px;margin:10px 4px 2px;font-size:13px;font-weight:600;color:var(--muted)}
.hilo-count::after{content:'';flex:1;height:1px;background:var(--line)}
/* Medio fijado: cuando la tarjeta sube fuera de la vista, una barra compacta pegada arriba. */
.hilo-pin,.m-hilo .wpanel>.hilo-pin{position:absolute;left:12px;right:12px;z-index:5;pointer-events:none}
.hilo-pin>button{width:100%;display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 12px;border:0;border-radius:14px;
  background:var(--m-pill);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--sh-2);color:var(--ink);font:inherit;font-size:14px;text-align:left;
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s var(--ease),transform .25s var(--out)}
.hilo-pin.on>button{opacity:1;transform:none;pointer-events:auto}
.hilo-pin b{flex:none;font-family:var(--font);font-weight:600}
.hilo-pin .pin-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.hilo-pin .pin-mic{vertical-align:-2px;margin-right:3px}

@media (prefers-reduced-motion:reduce){
  .m-over.leaving,.m-sheet,html.m .sheet,.bgroup.enter .bmsg:last-child{animation:none}
  .m-over.entering{animation:m-hold .01s both} /* sin deslizarse, pero con su capa (ver `.still`) */
  .m-under,.m-over{transition:none}
}

/* ---------- «Hilos»: una pantalla más, desde la lista de chats ---------- */
.m-hl-row .m-chface{background:var(--lime2);color:var(--teal)}
.m-hilos .m-scroll{padding:12px 12px calc(16px + var(--m-bottom))}
.hl-bar{display:flex;justify-content:flex-end;padding:0 0 10px}
.m-hilos .hl-done{margin:0 0 8px}
.m-hilos .hl-done .empty-state{padding:24px 16px}
.m-hilos .hl-sep{margin:8px 0 -8px}
.hl-bar .hl-all{min-height:40px}
.m-hilos .hl-card{border-radius:14px;box-shadow:none;padding:12px 14px 8px}
.m-hilos .hl-main .txt{font-size:15px}
.m-hilos .hl-card{--hl-pad:15px;--hl-gap-bg:var(--m-bg)}
/* En el móvil la caja de responder ocupa todo el ancho de la tarjeta (es la del hilo, la compacta), sin el hueco de abajo
   que lleva pegada al borde de la pantalla. */
.m-hilos .hl-reply{margin-left:0}
.m-hilos .hl-before-btn,.hilo-panel .hl-before-btn{min-height:36px}
.hilo-panel .hl-before-row.hilo-before{margin:0 0 4px}
.hilo-panel .hl-before.hilo-before{margin-bottom:10px}
.hilo-panel .hilo-before .hl-earlier .hl-main .txt{font-size:14px}
.m-hilos .hl-earlier .hl-main .txt{font-size:14px}
.m-hilos .hl-reply .composer.compact{padding:0}
.m-hilos .hl-list{gap:20px}
.m-hilos .hl-sec{margin-bottom:-10px}

/* ---------- La búsqueda, escondida bajo la cabecera; la primera fila: tu asistente y «Hilos» ---------- */
.m-list .m-scroll-in{min-height:calc(100% + 56px)}
.m-widgets{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:6px 14px 10px}
.m-widget{position:relative;display:flex;min-width:0;align-items:center;gap:10px;min-height:60px;padding:10px 12px;border-radius:16px;background:var(--soft2);border:1px solid transparent;color:var(--ink);text-align:left;font:inherit;-webkit-touch-callout:none}
.m-widget.empty{background:transparent;border:1.5px dashed var(--border3);color:var(--muted)}
.m-widget .dash{width:34px;height:34px;border-radius:50%}
.m-widget-ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:var(--lime2);color:var(--teal)}
.m-widget-t{display:flex;flex-direction:column;min-width:0;flex:1}
.m-widget-t b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-widget-t small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-widget.unread .m-widget-t b{font-weight:700}
.m-widget .m-badge{flex:none}
.m-act-go{font-size:13px;color:var(--teal);font-weight:600;flex:none}

/* ---------- Instalar como app: un bocadillo que apunta al botón de Compartir ---------- */
.m-bubble{display:block;height:auto;max-height:none;position:absolute;left:50%;transform:translateX(-50%);z-index:6;width:min(300px,calc(100% - 32px));padding:12px 34px 12px 14px;border-radius:16px;background:var(--ink);color:var(--surface);box-shadow:0 10px 30px rgba(0,0,0,.22);font-size:14px;line-height:1.45;animation:m-bubble-in .35s ease both}
.m-bubble p{margin:0}
.m-bubble .btn{margin-top:10px}
.m-bubble.to-bottom,.m-bubble:not(.to-top){bottom:calc(88px + var(--m-bottom))}
.m-bubble.to-top{top:calc(8px + env(safe-area-inset-top,0px));left:auto;right:12px;transform:none}
.m-bubble::after{content:"";position:absolute;width:14px;height:14px;background:inherit;transform:rotate(45deg);border-radius:2px}
.m-bubble.to-bottom::after{left:calc(50% - 7px);bottom:-6px}
.m-bubble.to-top::after{right:22px;top:-6px}
.m-bubble:not(.to-top):not(.to-bottom)::after{display:none}
.m-bubble-x{position:absolute;top:6px;right:6px;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:inherit;opacity:.7;display:flex;align-items:center;justify-content:center}
.m-share{display:inline-flex;vertical-align:-3px;padding:2px 4px;border-radius:6px;background:rgba(255,255,255,.14)}
@keyframes m-bubble-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.m-bubble{animation:none}}

/* Una llamada en el chat del móvil: como en el escritorio (tu cara con las ondas, el título y sus mensajes debajo). */
.thread.bubbles .bcall-row{display:flex;gap:10px;align-items:flex-start;margin:8px 2px 6px;padding:10px 12px 8px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.thread.bubbles .bcall-av{position:relative;flex:none;display:inline-flex}
.thread.bubbles .bcall-main{flex:1;min-width:0}
.thread.bubbles .bcall-main .who{display:flex;align-items:baseline;gap:8px}
.thread.bubbles .bcall-main .who b{font-weight:600}
.thread.bubbles .bcall-main .who .t{font-size:12.5px;color:var(--muted)}
.thread.bubbles .bcall-t{font-size:15.5px;color:var(--ink);margin:1px 0 4px}