.sup-wrap{max-width:700px;margin:0 auto;padding:2rem 1rem 5rem}
.sup-tab{flex:1;padding:.6rem 1rem;font-size:.8125rem;font-weight:600;border-radius:.625rem;border:none;cursor:pointer;transition:all .18s}
.sup-tab.active{background:#f43f5e;color:#fff;box-shadow:0 4px 12px -2px rgba(244,63,94,.3)}
.sup-tab:not(.active){background:transparent;color:#64748b}
.dark .sup-tab:not(.active){color:#94a3b8}
.bubble{padding:.55rem .9rem;border-radius:1rem;font-size:.875rem;line-height:1.4;overflow-wrap:anywhere;word-break:break-word;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%}
.bwrap{display:flex;flex-direction:column;max-width:78%}
.bwrap.r{align-items:flex-end}
.bwrap.l{align-items:flex-start}
.bubble.a{background:#f1f5f9;color:#334155;border-bottom-right-radius:.25rem}
.dark .bubble.a{background:#1e293b;color:#e2e8f0}
.bubble.c{background:#f43f5e;color:#fff;border-bottom-left-radius:.25rem}
.bubble img{max-width:220px;max-height:200px;border-radius:.5rem;display:block;margin-top:.3rem;cursor:zoom-in}
.btime{font-size:.68rem;color:#94a3b8;margin-top:.2rem}
#cm{height:340px;overflow-y:auto;scroll-behavior:smooth}
.close-confirm{display:flex;align-items:center;gap:.5rem;font-size:.75rem}

#lb{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:zoom-out}
#lb img{max-width:90vw;max-height:88vh;border-radius:.75rem;box-shadow:0 8px 40px rgba(0,0,0,.6)}