/* Mockup de conversación original, conservado. */
  .ig{
    --ig-send-a:#9A56F5; --ig-send-b:#5B62F4;
    --ig-recv:#262629; --ig-ink:#f5f5f7; --ig-dim:#8e8e93;
    width:100%;max-width:394px;margin:0 auto;
    background:#0b0b0d;border:1px solid rgba(255,255,255,.1);
    border-radius:38px;padding:9px;
  }
  .ig-screen{background:#000;border-radius:30px;overflow:hidden;display:flex;flex-direction:column}
  .ig-notch{height:30px;display:flex;align-items:center;justify-content:center;background:#0d0d0f;flex:none}
  .ig-notch i{display:block;width:78px;height:19px;border-radius:99px;background:#000}
  .ig-head{display:flex;align-items:center;gap:10px;padding:9px 13px 11px;background:#0d0d0f;border-bottom:1px solid rgba(255,255,255,.08);flex:none}
  .ig-back{color:var(--ig-ink);opacity:.9;flex:none;display:flex}
  .ig-avatar{width:37px;height:37px;border-radius:99px;flex:none;padding:2px;
    background:conic-gradient(from 200deg,#f9ce34,#ee2a7b,#6228d7,#f9ce34)}
  .ig-avatar span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:99px;
    background:linear-gradient(150deg,var(--ig-send-a),var(--ig-send-b));border:2px solid #0d0d0f;color:#fff}
  .ig-id{min-width:0;flex:1}
  .ig-name{display:flex;align-items:center;gap:5px;font-size:.9rem;font-weight:600;color:var(--ig-ink);letter-spacing:-.015em;line-height:1.2}
  .ig-name svg{flex:none}
  .ig-status{display:flex;align-items:center;gap:5px;font-size:.74rem;color:var(--ig-dim);margin-top:2px}
  .ig-status b{width:6px;height:6px;border-radius:99px;background:#3ad07a;flex:none}
  .ig-acts{display:flex;align-items:center;gap:17px;color:var(--ig-ink);opacity:.92;flex:none}
  .ig-scroll{
    position:relative;flex:none;overflow-y:auto;overscroll-behavior:contain;
    height:clamp(400px,58vh,600px);
    padding:14px 12px 16px;background:#000;
    display:flex;flex-direction:column;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30px);
    mask-image:linear-gradient(to bottom,transparent 0,#000 30px);
  }
  .ig-scroll::-webkit-scrollbar{width:5px}
  .ig-scroll::-webkit-scrollbar-track{background:transparent}
  .ig-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:99px}
  .ig-thread{display:flex;flex-direction:column;gap:3px;margin-top:auto}
  /* la conversación se escribe sola: cada burbuja se inserta y entra */
  .ig-thread .is-new{opacity:0;transform:translateY(8px)}
  .ig-thread .is-new.shown{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
  /* El indicador vive en la misma grilla que una fila de mensaje: si no, se queda
     pegado a la izquierda aunque le cambies el color. */
  .typing-live{display:flex;align-items:flex-end;gap:7px;max-width:100%}
  .typing-live.out{justify-content:flex-end}
  .typing-live.out .mini{display:none}
  /* cuando el que va a escribir somos nosotros, el indicador va del lado nuestro */
  .typing-live.out .typing{
    background:linear-gradient(145deg,var(--ig-send-a),var(--ig-send-b));
    border-radius:19px;border-bottom-left-radius:19px;border-bottom-right-radius:6px;
  }
  .row{display:flex;align-items:flex-end;gap:7px;max-width:100%}
  .row.out{justify-content:flex-end}
  .row+.row{margin-top:2px}
  .row.gap{margin-top:11px}
  .mini{width:23px;height:23px;border-radius:99px;background:#2b2b2f;flex:none;
    display:flex;align-items:center;justify-content:center;color:#8e8e93;margin-bottom:2px}
  .mini.ghost{background:none}
  .bub{max-width:76%;padding:9px 13px;font-size:.86rem;font-weight:400;line-height:1.4;word-wrap:break-word;border-radius:19px}
  .bub.them{background:var(--ig-recv);color:var(--ig-ink)}
  .bub.us{background:linear-gradient(145deg,var(--ig-send-a),var(--ig-send-b));color:#fff}
  .row.out .bub{border-bottom-right-radius:19px}
  .row.out.tail .bub{border-bottom-right-radius:6px}
  .row.in .bub{border-bottom-left-radius:19px}
  .row.in.tail .bub{border-bottom-left-radius:6px}
  .bub u{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);word-break:break-all}
  .bub .vn{display:flex;align-items:center;gap:9px;font-size:.82rem}
  .bub .vn b{flex:1;height:15px;border-radius:99px;
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 2px,transparent 2px 5px);opacity:.85}
  .daymark{text-align:center;font-size:.67rem;color:var(--ig-dim);letter-spacing:.04em;padding:14px 0 9px;text-transform:uppercase}
  .typing{display:inline-flex;gap:4px;background:var(--ig-recv);padding:12px 15px;border-radius:19px;border-bottom-left-radius:6px}
  .typing i{width:6px;height:6px;border-radius:99px;background:#8e8e93;animation:blink 1.3s infinite}
  .typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
  @keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
  .ig-bar{display:flex;align-items:center;gap:9px;padding:10px 11px 13px;background:#0d0d0f;border-top:1px solid rgba(255,255,255,.07);flex:none}
  .ig-cam{width:33px;height:33px;border-radius:99px;flex:none;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(150deg,var(--ig-send-a),var(--ig-send-b));color:#fff}
  .ig-input{flex:1;min-width:0;display:flex;align-items:center;gap:9px;background:#1b1b1e;border-radius:99px;padding:9px 13px;color:var(--ig-dim);font-size:.84rem}
  .ig-input span{flex:1;min-width:0}
  .ig-bar-icons{display:flex;align-items:center;gap:13px;color:var(--ig-ink);opacity:.9;flex:none}
  @media(max-width:420px){
    .ig{border-radius:32px;padding:7px}
    .ig-screen{border-radius:26px}
    .ig-scroll{height:clamp(360px,62vh,520px);padding:12px 10px 14px}
    .bub{max-width:80%;font-size:.84rem;padding:8px 12px}
    .ig-acts{gap:14px}
    .ig-head{padding:8px 11px 10px}
  }