/*!
 * Mizan Watch — chat kit styles.
 * Shared by public chat, private messages and the live-room chat. Colors come
 * from the watch theme variables so this follows branding + light/dark.
 */

/* ---- media inside a message ---- */
.wk-img{display:block;max-width:min(320px,72vw);max-height:340px;border-radius:12px;margin-top:6px;cursor:zoom-in;object-fit:cover}
.wk-vid{display:block;max-width:min(360px,78vw);border-radius:12px;margin-top:6px;background:#000}
.wk-sticker{width:96px;height:96px;object-fit:contain;margin-top:4px}
.wk-sticker-glyph{font-size:44px;line-height:1.2;display:inline-block;margin-top:2px}
.wk-voice{display:flex;align-items:center;gap:8px;margin-top:6px}
.wk-voice audio{height:36px;max-width:min(260px,64vw)}
.wk-dur{font-size:11.5px;color:var(--w-muted);white-space:nowrap}

/* ---- quoted reply strip ---- */
.wk-quote{border-inline-start:3px solid var(--w-primary);background:rgba(127,127,127,.12);
    border-radius:8px;padding:5px 9px;margin-bottom:5px;font-size:12px;color:var(--w-muted);
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-quote b{color:var(--w-primary);font-weight:800}

/* ---- per-message actions ---- */
.wk-acts{display:flex;gap:2px;opacity:0;transition:opacity .12s;position:absolute;top:2px;inset-inline-end:4px}
.wk-host{position:relative}
.wk-host:hover .wk-acts,.wk-host:focus-within .wk-acts{opacity:1}
.wk-acts button{background:var(--w-card);border:1px solid var(--w-line);color:var(--w-muted);
    border-radius:8px;width:26px;height:26px;font-size:13px;line-height:1;cursor:pointer;padding:0}
.wk-acts button:hover{color:var(--w-text);border-color:var(--w-primary)}
.wk-acts button.wk-danger:hover{color:#fca5a5;border-color:#fca5a5}
@media(hover:none){.wk-acts{opacity:1;position:static;margin-top:6px}}

/* ---- composer toolbar ---- */
.wk-tool{background:transparent;border:1px solid var(--w-line);color:var(--w-text);border-radius:10px;
    width:40px;height:40px;font-size:17px;cursor:pointer;flex:0 0 auto;line-height:1}
.wk-tool:hover{border-color:var(--w-primary)}
.wk-tool.wk-recording{background:#e11d48;border-color:#e11d48;color:#fff;width:auto;padding:0 12px;
    display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;animation:wkpulse 1.2s infinite}
@keyframes wkpulse{0%,100%{opacity:1}50%{opacity:.6}}

/* ---- pending attachment / reply bar ---- */
.wk-bar{display:none;gap:8px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--w-line)}
.wk-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(127,127,127,.14);
    border:1px solid var(--w-line);border-radius:999px;padding:5px 8px 5px 5px;font-size:12.5px;max-width:100%}
.wk-chip img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.wk-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
.wk-chip button{background:transparent;border:0;color:var(--w-muted);cursor:pointer;font-size:14px;padding:0 4px}
.wk-chip button:hover{color:#fca5a5}

/* ---- sticker picker ---- */
.wk-sk{position:relative}
.wk-sk-panel{display:none;position:absolute;bottom:calc(100% + 8px);inset-inline-end:0;z-index:60;
    width:min(320px,92vw);max-height:300px;overflow:auto;background:var(--w-card);
    border:1px solid var(--w-line);border-radius:14px;padding:10px;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.wk-sk-h{font-size:12px;color:var(--w-muted);font-weight:700;margin:6px 2px}
.wk-sk-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.wk-sk-grid button{background:transparent;border:0;border-radius:8px;font-size:24px;line-height:1;
    padding:6px 0;cursor:pointer;color:var(--w-text)}
.wk-sk-grid button:hover{background:rgba(127,127,127,.16)}
.wk-sk-grid img{width:38px;height:38px;object-fit:contain}
.wk-sk-empty{color:var(--w-muted);font-size:13px;text-align:center;padding:22px}

/* ---- image lightbox ---- */
.wk-lightbox{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.88);
    align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
.wk-lightbox img{max-width:96vw;max-height:92vh;border-radius:10px}

/* ---- read receipts ------------------------------------------------------
 * Three states, the same ones a phone messenger shows:
 *   ✓   stored on the server
 *   ✓✓  their browser has been online since it was sent
 *   ✓✓  (accent) they have opened the conversation past it
 * Only ever drawn on the viewer's own messages.
 */
.wk-tick{display:inline-flex;align-items:center;gap:1px;margin-inline-start:6px;vertical-align:-1px;
    font-size:11px;line-height:1;opacity:.75;white-space:nowrap}
.wk-tick svg{width:15px;height:11px;display:block}
.wk-tick path{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.wk-tick.sent{color:rgba(255,255,255,.72)}
.wk-tick.delivered{color:rgba(255,255,255,.82)}
.wk-tick.seen{color:#53bdeb;opacity:1}
/* A media-only bubble has no text baseline to sit on, so the ticks float over
   the bottom corner of the image instead. */
.w-msg.media-only .wk-tick{position:absolute;inset-inline-end:8px;bottom:6px;
    background:rgba(0,0,0,.55);border-radius:6px;padding:2px 5px}
.w-msg.media-only{position:relative}