/* live-whisper-bubble.css — 22.06.2026
   Plovouci draggable whisper bubliny v LIVE okne (varianta B+, stack vice bublin).
   Zobrazene JEN kdyz je aktivni LIVE tab (modul togglni .lwb-layer.show z app.html). */

.lwb-layer {
    position: fixed; inset: 0; z-index: 9000;
    pointer-events: none; display: none;
}
.lwb-layer.show { display: block; }
.lwb-layer > .lwb { pointer-events: auto; }

.lwb {
    position: absolute;
    width: min(320px, calc(100vw - 24px));
    background: linear-gradient(135deg, rgba(28,20,46,.98), rgba(18,14,28,.98));
    border: 1px solid rgba(145,70,255,.5);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(0,0,0,.6);
    display: flex; flex-direction: column; overflow: hidden;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #efeff1;
    animation: lwbIn .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes lwbIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.lwb.lwb-collapsed .lwb-thread,
.lwb.lwb-collapsed .lwb-inrow,
.lwb.lwb-collapsed .lwb-channel { display: none; }

.lwb-hdr {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 10px; cursor: grab; user-select: none;
    background: rgba(145,70,255,.10);
    border-bottom: 1px solid rgba(145,70,255,.18);
    touch-action: none;
}
.lwb-hdr:active { cursor: grabbing; }
.lwb-av { width: 34px; height: 34px; min-width: 34px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
.lwb-meta { min-width: 0; flex: 1; }
.lwb-name { font-weight: 700; font-size: 13px; color: #d9c7ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lwb-status { font-size: 10px; color: #8e7bbf; }
.lwb-hdr-btns { display: flex; gap: 2px; }
.lwb-hbtn { width: 24px; height: 24px; border: none; background: transparent; color: #adadb8; font-size: 14px;
    cursor: pointer; border-radius: 6px; line-height: 1; }
.lwb-hbtn:hover { background: rgba(255,255,255,.1); color: #fff; }

.lwb-thread { display: flex; flex-direction: column; gap: 6px; padding: 10px; max-height: 240px; overflow-y: auto; }
.lwb-thread::-webkit-scrollbar { width: 7px; }
.lwb-thread::-webkit-scrollbar-thumb { background: #3a2f55; border-radius: 4px; }
.lwb-msg { font-size: 12.5px; line-height: 1.35; padding: 7px 10px; border-radius: 10px; max-width: 86%; word-break: break-word; }
.lwb-msg.in { background: rgba(255,255,255,.08); align-self: flex-start; border-bottom-left-radius: 3px; }
.lwb-msg.out { background: linear-gradient(135deg, #9146ff, #7c2bdf); align-self: flex-end; border-bottom-right-radius: 3px; }
.lwb-msg.out.pending { opacity: .55; }
.lwb-msg.out.failed { background: linear-gradient(135deg, #7c2d2d, #5c1e1e); }
.lwb-msg.sys { background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.35); color: #fca5a5;
    align-self: stretch; max-width: 100%; font-size: 11.5px; }
.lwb-msg img { max-width: 180px; border-radius: 8px; display: block; margin-top: 4px; }
.lwb-rr { font-size: 10px; margin-left: 6px; }

.lwb-channel { display: flex; align-items: center; gap: 8px; padding: 0 10px 7px; font-size: 11px; }
.lwb-chan-toggle { display: inline-flex; border: 1px solid rgba(145,70,255,.35); border-radius: 999px; overflow: hidden; }
.lwb-chan-toggle button { border: none; background: transparent; color: #adadb8; font-size: 10.5px; padding: 3px 10px; cursor: pointer; }
.lwb-chan-toggle button.on { background: linear-gradient(135deg, #9146ff, #a855f7); color: #fff; font-weight: 700; }
.lwb-dm-fallback { margin-left: auto; background: rgba(34,197,94,.18); border: 1px solid rgba(34,197,94,.4);
    color: #86efac; font-size: 10.5px; padding: 4px 9px; border-radius: 7px; cursor: pointer; display: none; }
.lwb-dm-fallback.show { display: inline-block; animation: lwbPulse 1.2s ease 2; }
@keyframes lwbPulse { 50% { box-shadow: 0 0 0 4px rgba(34,197,94,.18); } }

.lwb-inrow { display: flex; gap: 6px; align-items: center; padding: 8px 10px 10px; }
.lwb-inrow input { flex: 1; min-width: 0; background: rgba(0,0,0,.35); border: 1px solid #2a2a30; border-radius: 9px;
    padding: 8px 10px; color: #efeff1; font-size: 13px; outline: none; }
.lwb-inrow input:focus { border-color: rgba(145,70,255,.7); }
.lwb-send { background: linear-gradient(135deg, #9146ff, #a855f7); border: none; color: #fff;
    width: 36px; height: 36px; min-width: 36px; border-radius: 9px; font-size: 14px; cursor: pointer; }
.lwb-send:active { transform: translateY(1px); }

@media (max-width: 768px) {
    .lwb { width: calc(100vw - 20px); }
    .lwb-thread { max-height: 170px; }
}