body{background:#f5f5f7;margin:0;font-family:system-ui,sans-serif}.card{background:#fff;border-radius:12px;flex-direction:column;gap:12px;max-width:360px;margin:10vh auto;padding:24px;display:flex;box-shadow:0 2px 12px #00000014}label{flex-direction:column;gap:4px;display:flex}input,button{font:inherit;border:1px solid #ccc;border-radius:8px;padding:8px 12px}button{cursor:pointer;color:#fff;background:#2563eb;border:none}.avatar{object-fit:cover;border-radius:50%;align-self:center;width:96px;height:96px}.status{color:#6b7280;align-items:center;gap:6px;margin:0;display:flex}.status:before{content:"";background:currentColor;border-radius:50%;width:8px;height:8px}.status-open{color:#16a34a}.status-connecting{color:#d97706}.session{color:#6b7280;word-break:break-all;font-family:ui-monospace,monospace}.error{color:#dc2626;margin:0}.hint{color:#6b7280;margin:0}.page{flex-direction:column;gap:16px;max-width:1100px;margin:24px auto;padding-inline:16px;display:flex}.page .card{max-width:none;margin:0}.header{align-items:center;gap:12px;display:flex}.header button{margin-left:auto}.avatar-sm{align-self:auto;width:32px;height:32px}.room-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.room-item{width:100%;color:inherit;text-align:left;background:#f5f5f7;flex-direction:column;align-items:flex-start;gap:2px;display:flex}.room-item small{color:#6b7280}.layout{grid-template-columns:300px minmax(0,1fr);align-items:start;gap:16px;display:grid}.chat,.rooms{height:min(78vh,760px)}.rooms .room-list{flex:1;min-height:0;padding-right:4px;overflow-y:auto}.rooms h2{margin:0}.room-item-active{background:#dbeafe}.room-item{position:relative}.room-item-unread{padding-right:56px}.room-preview{text-overflow:ellipsis;white-space:nowrap;color:#374151;max-width:100%;font-size:14px;display:block;overflow:hidden}.room-preview-quiet{color:#6b7280;font-style:italic}.room-preview-own{color:#6b7280;font-style:normal}.room-preview-icon{vertical-align:-1px;margin-right:3px}.unread-badge{color:#fff;text-align:center;background:#2563eb;border-radius:11px;min-width:22px;height:22px;padding:0 7px;font-size:12px;font-weight:600;line-height:22px;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.chat-empty{justify-content:center;align-items:center}.chat-back{display:none}@media (width<=760px){.layout{grid-template-columns:minmax(0,1fr)}.layout-room-open .rooms,.layout:not(.layout-room-open) .chat-empty{display:none}.chat-back{display:inline}}.chat-header{align-items:center;gap:12px;display:flex}.link{color:#2563eb;background:0 0;padding:0}.messages{flex:1;padding-right:4px;overflow-y:auto}.messages-content{flex-direction:column;gap:8px;display:flex}.message-row{align-self:flex-start;align-items:center;gap:4px;max-width:75%;display:flex}.message-row-own{flex-direction:row-reverse;align-self:flex-end}.bubble{overflow-wrap:anywhere;background:#f1f5f9;border-radius:12px;flex-direction:column;gap:2px;min-width:0;padding:8px 12px;display:flex}.bubble-own{background:#dbeafe}.bubble-author{color:#2563eb;font-weight:600}.bubble-meta{align-self:flex-end;align-items:center;gap:6px;display:flex}.bubble-editing{box-shadow:0 0 0 2px #2563eb}.bubble-edited{color:#6b7280;font-style:italic}.ticks{color:#6b7280;align-items:center;display:inline-flex}.ticks-read{color:#16a34a}.bubble-time{color:#6b7280}.lock{color:#15803d;align-items:center;display:inline-flex;position:relative}.presence{vertical-align:1px;background:#cbd5e1;border-radius:50%;width:8px;height:8px;margin-right:6px;display:inline-block}.presence-on{background:#16a34a}.chat-title{flex-direction:column;min-width:0;display:flex}.chat-presence{color:#6b7280}.chat-presence-on{color:#16a34a}.chat-header .lock,.room-item .lock{vertical-align:-3px;margin-right:4px}.lock-off{color:#b45309}.lock-off:after{content:"";background:currentColor;border-radius:1px;height:1.5px;position:absolute;top:50%;left:-1px;right:-1px;transform:rotate(-45deg)}.message-menu-trigger{color:#6b7280;background:0 0;border-radius:50%;flex-shrink:0;align-items:center;padding:4px;display:inline-flex}.message-menu-trigger:hover:not(:disabled),.message-menu-trigger-open{color:#111827;background:#e2e8f0}.message-menu-trigger:disabled{cursor:default;opacity:.5}@media (hover:hover){.message-row .message-menu-trigger{opacity:0}.message-row:hover .message-menu-trigger,.message-menu-trigger:focus-visible,.message-menu-trigger-open{opacity:1}}.message-menu{z-index:20;background:#fff;border-radius:8px;flex-direction:column;min-width:140px;padding:4px;display:flex;position:fixed;box-shadow:0 4px 16px #00000024}.message-menu button{color:#111827;text-align:left;background:0 0;border-radius:6px;align-items:center;gap:8px;padding:8px 10px;display:flex}.message-menu button:hover,.message-menu button:focus-visible{background:#f1f5f9;outline:none}.message-menu .message-menu-danger{color:#b91c1c}.bubble-gone{color:#6b7280;background:#f8fafc;border:1px dashed #cbd5e1;font-style:italic}.attachments{flex-direction:column;gap:10px;min-width:0;display:flex}.image-grid{border-radius:10px;grid-template-columns:1fr 1fr;gap:3px;width:300px;max-width:100%;display:grid;overflow:hidden}.image-grid-1{grid-template-columns:1fr}.image-cell{aspect-ratio:1;color:#475569;background:#cbd5e1;border-radius:0;padding:0;display:block;position:relative;overflow:hidden}.image-grid-3 .image-cell:nth-child(3){aspect-ratio:2;grid-column:span 2}.image-grid-1 .image-cell{aspect-ratio:auto;min-height:120px}.attachment-image{object-fit:cover;width:100%;height:100%;display:block}.image-grid-1 .attachment-image{height:auto;max-height:360px}.image-placeholder{flex-direction:column;justify-content:center;align-items:center;gap:4px;display:flex;position:absolute;inset:0}.image-more{color:#fff;background:#0f172a80;justify-content:center;align-items:center;font-size:1.6em;font-weight:600;display:flex;position:absolute;inset:0}.file-row{box-sizing:border-box;background:#ffffffa6;border-radius:10px;align-items:center;gap:10px;width:300px;max-width:100%;padding:8px 10px;display:flex}.file-row-lost{color:#6b7280;font-style:italic}.file-badge{color:#4338ca;background:#e0e7ff;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:.7em;font-style:normal;font-weight:700;display:inline-flex}.file-meta{flex-direction:column;flex:1;min-width:0;display:flex}.file-name{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.file-size{color:#6b7280;font-size:.8em}.file-download{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;padding:0;display:inline-flex}.file-download:disabled{cursor:default;opacity:.6}.spin{animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.viewer{z-index:100;color:#fff;background:#0f172aeb;flex-direction:column;display:flex;position:fixed;inset:0}.viewer-bar{align-items:center;gap:8px;padding:12px 16px;display:flex}.viewer-title{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.viewer-title small{color:#cbd5e1}.viewer-stage{flex:1;justify-content:center;align-items:center;min-height:0;padding:0 56px 24px;display:flex}.viewer-image{object-fit:contain;max-width:100%;max-height:100%}.viewer-note{color:#cbd5e1}.viewer-failed{flex-direction:column;align-items:center;gap:12px;display:flex}.viewer-retry{border-radius:999px;gap:6px;padding:8px 14px}.viewer-button{color:#fff;background:#ffffff1f;border-radius:50%;justify-content:center;align-items:center;padding:8px;display:inline-flex}.viewer-prev,.viewer-next{position:absolute;top:50%;transform:translateY(-50%)}.viewer-prev{left:12px}.viewer-next{right:12px}.staged{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;flex-wrap:wrap;gap:8px;padding:8px;display:flex}.staged-item{background:#fff;border:1px solid #e2e8f0;border-radius:8px;align-items:center;gap:8px;max-width:200px;padding:4px 24px 4px 4px;display:flex;position:relative}.staged-thumb{object-fit:cover;border-radius:6px;flex-shrink:0;width:40px;height:40px}.staged-thumb-file{color:#6b7280;background:#f1f5f9;justify-content:center;align-items:center;display:inline-flex}.staged-meta{flex-direction:column;min-width:0;font-size:.85em;display:flex}.staged-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.staged-size{color:#6b7280}.staged-remove{color:#6b7280;background:0 0;border-radius:50%;padding:2px;display:inline-flex;position:absolute;top:2px;right:2px}.staged-remove:hover:not(:disabled){color:#b91c1c}.staged-remove:disabled{cursor:default;opacity:.5}.attachments+.bubble-body{margin-top:6px}.composer-attach{color:#6b7280;background:0 0;border:1px solid #ccc;align-items:center;padding:8px;display:inline-flex}.composer-attach:hover:not(:disabled){color:#2563eb}.composer-attach:disabled{cursor:default;opacity:.5}.safety{vertical-align:-3px;margin-right:4px;display:inline-flex;position:relative}.safety-trigger{color:#15803d;background:0 0;align-items:center;padding:0;display:inline-flex}.safety-code{z-index:20;color:#111827;letter-spacing:1px;word-spacing:4px;white-space:nowrap;-webkit-user-select:all;user-select:all;background:#fff;border-radius:8px;padding:6px 10px;font-family:ui-monospace,monospace;font-weight:400;display:none;position:absolute;top:calc(100% + 6px);left:0;box-shadow:0 4px 16px #00000024}.safety:hover .safety-code,.safety-open .safety-code{display:block}.composer{gap:8px;display:flex}.composer-editing{color:#2563eb;background:#eff6ff;border-left:3px solid #2563eb;border-radius:6px;align-items:center;gap:10px;padding:6px 8px 6px 12px;display:flex}.composer-editing-text{flex-direction:column;flex:1;min-width:0;display:flex}.composer-editing-text span{color:#374151;text-overflow:ellipsis;white-space:nowrap;font-size:.875em;overflow:hidden}.composer-editing-cancel{color:#6b7280;background:0 0;border-radius:50%;align-items:center;padding:4px;display:inline-flex}.composer-editing-cancel:hover:not(:disabled){color:#111827;background:#dbeafe}.composer input:disabled{background:#f1f5f9}.composer input{flex:1;min-width:0}.toast{z-index:20;box-sizing:border-box;background:#fff;border-left:4px solid #2563eb;border-radius:12px;align-items:flex-start;gap:12px;width:min(380px,100vw - 32px);padding:14px 12px 14px 16px;display:flex;position:fixed;bottom:16px;right:16px;box-shadow:0 8px 24px #00000024}.toast-muted{border-left-color:#9ca3af}.toast-icon{color:#2563eb;flex:none;margin-top:1px}.toast-muted .toast-icon{color:#6b7280}.toast-body{flex-direction:column;flex:1;align-items:flex-start;gap:4px;min-width:0;display:flex}.toast-body span{color:#4b5563;font-size:.9em;line-height:1.4}.toast-action{margin-top:6px}.toast-action:disabled{opacity:.7;cursor:default}.toast-close{color:#6b7280;background:0 0;border-radius:50%;flex:none;align-items:center;padding:4px;display:inline-flex}.toast-close:hover{color:#111827;background:#f1f5f9}@media (width<=760px){.toast{width:auto;left:16px;right:16px}}