.chat{background:var(--panel);flex-direction:column;flex:auto;min-height:0;display:flex;position:relative;overflow:hidden}.chat-head{border-bottom:1px solid var(--line);flex:none;align-items:center;gap:8px;min-height:40px;padding:6px 12px;display:flex}.chat-head h2{flex:auto;min-width:0;font-size:13px}.chat-head .panel-icon{border-radius:7px;width:24px;height:24px}.chat-conn{color:#92400e;white-space:nowrap;background:#fef3c7;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:600}.chat-conn.disconnected{color:#991b1b;background:#fee2e2}.chat-scroll{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;flex:auto;min-height:0;padding:4px 10px 6px;overflow-y:auto}.chat-list{flex-direction:column;gap:2px;display:flex}.chat-top{min-height:28px;color:var(--muted);text-align:center;justify-content:center;align-items:center;padding:2px 0 4px;font-size:11px;display:flex}.chat-more{border:1px solid var(--line);background:var(--panel);min-height:28px;color:var(--accent);cursor:pointer;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600}.chat-err{color:var(--danger);align-items:center;gap:8px;display:inline-flex}.chat-day{justify-content:center;margin:6px 0 2px;display:flex}.chat-day span{color:var(--muted);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:10px;font-weight:600}.chat-msg{flex-direction:column;align-items:flex-start;max-width:88%;display:flex}.chat-msg.head{margin-top:6px}.chat-msg.mine{align-self:flex-end;align-items:flex-end}.chat-who{align-items:center;gap:5px;min-width:0;max-width:100%;margin:0 0 2px 2px;display:flex}.chat-avatar{color:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;width:16px;height:16px;font:700 9px Anuphan,sans-serif;display:flex}.chat-name{color:var(--ink-2);text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:600;overflow:hidden}.chat-who .badge{padding:0 6px;font-size:10px}.chat-body{flex-direction:column;gap:3px;min-width:0;max-width:100%;display:flex}.chat-msg.mine .chat-body{align-items:flex-end}.chat-text{background:var(--soft);border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;-webkit-user-select:text;user-select:text;border-radius:14px;padding:5px 10px;font-size:14px;line-height:1.4}.chat-msg:not(.head) .chat-text{border-top-left-radius:5px}.chat-msg.mine .chat-text{background:var(--accent);border-color:var(--accent);color:#fff;border-top-left-radius:14px}.chat-msg.mine:not(.head) .chat-text{border-top-right-radius:5px}.chat-text a{color:inherit;text-underline-offset:2px;text-decoration:underline}.chat-msg:not(.mine) .chat-text a{color:var(--accent)}.chat-msg.pending .chat-body{opacity:.65}.chat-msg.pending.failed .chat-body{opacity:1}.chat-msg.pending.failed .chat-text{color:var(--ink);background:#fef2f2;border-color:#fca5a5}.chat-meta{color:var(--muted);font-variant-numeric:tabular-nums;align-items:center;gap:6px;margin:1px 4px 0;font-size:10px;display:flex}.chat-meta button{min-height:26px;color:var(--accent);cursor:pointer;background:0 0;border:none;align-items:center;gap:4px;padding:2px;font-size:12px;font-weight:600;display:inline-flex}.chat-failed{color:var(--danger);font-size:11px;font-weight:600}.chat-images{gap:3px;width:168px;max-width:100%;display:grid}.chat-images.n2,.chat-images.n3{grid-template-columns:1fr 1fr}.chat-img{border:1px solid var(--line);cursor:zoom-in;background:var(--stage);aspect-ratio:1;border-radius:10px;width:100%;max-height:168px;padding:0;display:block;overflow:hidden}.chat-img img{object-fit:cover;width:100%;height:100%;display:block}.chat-file{border:1px solid var(--line);background:var(--panel);width:200px;max-width:100%;min-height:40px;color:var(--ink);border-radius:10px;align-items:center;gap:8px;padding:5px 8px;text-decoration:none;display:flex}.chat-file:hover{background:var(--soft)}.chat-file-icon{width:28px;height:28px;color:var(--accent);background:#eff4ff;border-radius:7px;flex:none;justify-content:center;align-items:center;display:flex}.chat-file-text{flex-direction:column;flex:auto;min-width:0;line-height:1.25;display:flex}.chat-file-name{text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;overflow:hidden}.chat-file-size{color:var(--muted);font-size:10px}.chat-jump{z-index:2;background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:999px;align-items:center;gap:6px;min-height:32px;padding:0 12px;font-size:12px;font-weight:600;display:inline-flex;position:absolute;bottom:70px;left:50%;transform:translate(-50%);box-shadow:0 6px 18px #1d4ed859}.chat-typing{height:16px;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;flex:none;padding:0 12px;font-size:11px;line-height:16px;overflow:hidden}.chat-typing:empty{height:0}.chat-compose{border-top:1px solid var(--line);background:var(--panel);flex-direction:column;flex:none;gap:6px;padding:6px 8px;display:flex}.chat-row{align-items:flex-end;gap:2px;display:flex}.chat-row textarea{resize:none;border:1px solid var(--line);background:var(--soft);min-width:0;min-height:38px;max-height:120px;color:var(--ink);font:inherit;border-radius:19px;flex:auto;margin:0 4px;padding:8px 12px;font-size:14px;line-height:1.4}@media (pointer:coarse){.chat-row textarea{font-size:16px}}.chat-row textarea:focus{background:#fff;border-color:#9db4f0;outline:none;box-shadow:0 0 0 3px #1d4ed81f}.chat-icon-btn,.chat-send{width:38px;height:38px;color:var(--ink-2);cursor:pointer;background:0 0;border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;display:flex}.chat-icon-btn:hover:not(:disabled){background:var(--soft)}.chat-icon-btn:disabled{opacity:.35;cursor:not-allowed}.chat-send{background:var(--accent);color:#fff}.chat-send:disabled{cursor:not-allowed;background:#c3cbd6}.chat-note{color:#9a3412;margin:0 4px;font-size:12px}.chat-tray{gap:8px;margin:0;padding:2px 2px 0;list-style:none;display:flex;overflow-x:auto}.chat-tray li{border:1px solid var(--line);background:var(--soft);border-radius:12px;flex:none;width:60px;height:60px;position:relative;overflow:hidden}.chat-tray li.error{background:#fef2f2;border-color:#fca5a5}.chat-tray img{object-fit:cover;width:100%;height:100%;display:block}.chat-tray-file{height:100%;color:var(--accent);flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:4px;display:flex}.chat-tray-file span{color:var(--ink-2);text-align:center;text-overflow:ellipsis;white-space:nowrap;width:100%;font-size:10px;overflow:hidden}.chat-tray-progress{clip-path:inset(0 0 0 calc(var(--p) * 100%));background:#14202e73;transition:clip-path .15s linear;position:absolute;inset:0}.chat-tray-error{color:#fff;background:#b91c1ce6;padding:2px 4px;font-size:10px;line-height:1.2;position:absolute;bottom:0;left:0;right:0}.chat-tray-x{color:#fff;cursor:pointer;background:#14202eb3;border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;padding:0;display:flex;position:absolute;top:3px;right:3px}.chat-viewer{z-index:100;background:#0a0f16eb;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:16px;display:flex;position:fixed;inset:0}.chat-viewer img{object-fit:contain;border-radius:6px;max-width:100%;max-height:calc(100% - 72px)}.chat-viewer-bar{color:#e2e8f0;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;max-width:100%;font-size:13px;display:flex}.chat-viewer-bar>span{text-overflow:ellipsis;white-space:nowrap;max-width:60vw;overflow:hidden}.chat-viewer-bar .btn{color:var(--ink);text-decoration:none}@media (width<=1320px){.chat-viewer-bar .btn{width:auto;padding:0 12px}}.dock{background:var(--panel);border:1px solid var(--line);border-radius:16px;flex-direction:column;flex:0 0 360px;min-width:0;min-height:0;display:flex;overflow:hidden;box-shadow:0 1px 2px #14202e0a,0 4px 14px #14202e0a}@media (width<=1279px){.dock{flex-basis:320px}}.dock-tabs{display:none}.dock-av{border-bottom:1px solid var(--line);flex:none}.dock .dock-av .panel{box-shadow:none;background:0 0;border:none;border-radius:0;gap:8px;padding:8px 10px 10px}.dock .dock-av .panel-head{gap:6px;min-height:24px}.dock .dock-av .panel-head h2{font-size:13px}.dock .dock-av .panel-icon{border-radius:7px;width:24px;height:24px}.dock .dock-av .live-pill{padding:2px 8px;font-size:11px}.dock .av-tile{border-radius:10px}.dock .av-tile.big{aspect-ratio:auto;height:clamp(92px,15vh,150px)}.dock .av-tile.big .av-avatar span{width:44px;height:44px;font-size:18px}.dock .av-avatar{padding-bottom:10px}.dock .av-avatar span{width:32px;height:32px;font-size:14px}.dock .av-grid,.dock .av-grid.one{grid-template-columns:repeat(3,1fr);gap:6px;max-height:128px;overflow-y:auto}.dock .av-grid .av-tile,.dock .av-grid.one .av-tile{aspect-ratio:4/3}.dock .av-tile figcaption{padding:2px 7px 2px 2px;font-size:11px;bottom:4px;left:4px}.dock .av-mic{width:17px;height:17px}.dock .av-controls{gap:6px}.dock .av-btn{border-radius:10px;gap:6px;min-height:36px;font-size:13px}.dock .av-gear{width:36px}.dock .dock-av .btn-soft{border-radius:10px;min-height:32px;font-size:12px}.dock .chat{min-height:180px}@media (width<=960px){html,body{overscroll-behavior:none;overflow:hidden}.room{left:0;right:0;top:var(--app-top,0px);height:var(--app-h,100dvh);position:fixed}.room .room-body{flex-direction:column;gap:8px;padding:8px;overflow:hidden}.room .board-col{flex:auto;min-height:120px}.room .stage-wrap{min-height:0}.dock{border-radius:14px;flex:none;height:44%;min-height:220px}.room:has(.chat-compose textarea:focus) .dock{height:72%}.dock .chat{min-height:0}.dock .chat-head,.dock.tab-chat .dock-av,.dock.tab-video .chat{display:none}.dock.tab-video .dock-av{border-bottom:none;flex:auto;min-height:0;overflow-y:auto}.dock.tab-video .av-tile.big{height:clamp(110px,24vh,220px)}.dock-tabs{border-bottom:1px solid var(--line);flex:none;gap:2px;padding:4px;display:flex}.dock-tabs button{min-height:34px;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:9px;flex:1 1 0;justify-content:center;align-items:center;gap:6px;font-size:13px;font-weight:600;display:inline-flex;position:relative}.dock-tabs button.on{color:var(--accent);background:#eff4ff}}@media (width<=600px){.dock{height:46%}}.dock-badge{color:#fff;text-align:center;background:#dc2626;border-radius:9px;min-width:18px;height:18px;padding:0 5px;font-size:11px;font-weight:700;line-height:18px}.dock-count{background:var(--soft);min-width:18px;height:18px;color:var(--ink-2);border:1px solid var(--line);text-align:center;border-radius:9px;padding:0 5px;font-size:11px;line-height:16px}.dock-conn{background:#d97706;border-radius:50%;width:8px;height:8px}.dock-conn.disconnected{background:#dc2626}.roominfo{position:relative}.bar .roominfo-btn{gap:6px;width:auto;padding:0 10px}.roominfo-btn.on{color:var(--accent);background:#eff4ff;border-color:#c7d5f8}.roominfo-count{font-variant-numeric:tabular-nums;font-size:13px;font-weight:600}.roominfo-menu{z-index:40;background:var(--panel);border:1px solid var(--line);border-radius:14px;flex-direction:column;gap:10px;width:330px;max-width:calc(100vw - 24px);max-height:min(70vh,560px);padding:12px;display:flex;position:absolute;top:calc(100% + 8px);right:0;overflow-y:auto;box-shadow:0 10px 30px #14202e2e}.roominfo-follow{color:var(--accent);background:#eff4ff;border-radius:10px;align-items:center;gap:8px;padding:8px 10px;font-size:13px;font-weight:500;display:flex}.roominfo-follow span{flex:auto}.replay-message{text-align:center;flex-direction:column;flex:auto;justify-content:center;align-items:center;gap:6px;padding:24px 16px;display:flex}.replay-message p{margin:0}.replay-session{color:var(--muted);align-items:center;gap:8px;font-size:13px;display:flex}.replay-session select{border:1px solid var(--line);max-width:min(340px,60vw);min-height:40px;font:inherit;color:var(--ink);background:#fff;border-radius:10px;padding:0 8px;font-size:14px}.replay-when{color:var(--muted);font-size:13px}.replay .pages .room-toggle{white-space:nowrap;flex:none;min-height:40px;margin-right:4px}.replay-controls{background:var(--panel);border:1px solid var(--line);border-radius:12px;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;padding:8px 12px;display:flex}.replay-play{flex:none;width:48px;padding:0}.replay-time{font-variant-numeric:tabular-nums;color:var(--ink-2);min-width:96px;font-size:14px}.replay-track{flex:240px;align-items:center;min-width:160px;height:44px;display:flex;position:relative}.replay-activity{pointer-events:none;align-items:flex-end;gap:1px;height:14px;display:flex;position:absolute;top:4px;left:0;right:0}.replay-activity span{background:var(--accent);border-radius:1px;flex:1 1 0;height:100%}.replay-mark{pointer-events:none;background:#c2410c;border-radius:1px;width:2px;height:18px;margin-left:-1px;position:absolute;top:2px}.replay-track input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;margin:22px 0 0;position:relative}.replay-speeds{gap:2px;display:flex}.replay-skip{color:var(--ink-2);cursor:pointer;align-items:center;gap:6px;min-height:40px;font-size:13px;display:inline-flex}.replay-skip input{width:18px;height:18px;accent-color:var(--accent)}.replay-chapters{gap:6px;margin-top:8px;padding-bottom:2px;display:flex;overflow-x:auto}.replay-chapter{border:1px solid var(--line);background:var(--panel);cursor:pointer;border-radius:999px;flex:none;align-items:center;gap:6px;min-height:36px;padding:0 12px;font-size:13px;display:inline-flex}.replay-chapter span{color:var(--muted);font-variant-numeric:tabular-nums}.replay-chapter.on{color:var(--accent);background:#eff4ff;border-color:#c7d5f8;font-weight:600}.replay-chapter:hover:not(.on){background:var(--soft)}a.btn{color:inherit;text-decoration:none}:root{--accent:#1d4ed8;--accent-dark:#1e3a8a;--ink:#14202e;--ink-2:#384352;--muted:#556170;--line:#dce1e8;--bg:#eef1f5;--stage:#e2e7ee;--panel:#fff;--soft:#f5f7fa;--danger:#b91c1c;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--ink);margin:0;font-family:IBM Plex Sans Thai,system-ui,sans-serif;font-size:15px}button,input{font:inherit;color:inherit}h2{margin:0;font-size:15px;font-weight:600}.muted{color:var(--muted);margin:0;font-size:14px;line-height:1.5}.small{font-size:12px}.spacer{flex:auto}.divider{background:var(--line);flex:none;width:1px;height:28px}.btn{border:1px solid var(--line);background:var(--panel);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:0 16px;font-size:14px;font-weight:500;display:inline-flex}.btn:hover:not(:disabled){background:var(--soft)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.btn-primary:hover:not(:disabled){background:var(--accent-dark)}.btn-ghost{color:var(--muted);background:0 0;border-color:#0000}.btn.wide{width:100%}.btn-icon{border:1px solid var(--line);background:var(--panel);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;width:40px;height:44px;display:inline-flex}.btn-icon:disabled{opacity:.4;cursor:not-allowed}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.join{justify-content:center;align-items:center;min-height:100%;padding:24px 16px;display:flex}.join-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;flex-direction:column;gap:16px;width:100%;max-width:420px;padding:28px;display:flex}.brand{align-items:center;gap:10px;font-family:Anuphan,sans-serif;font-size:20px;font-weight:700;display:flex}.brand.big{font-size:26px}.brand-mark{background:var(--accent);color:#fff;border-radius:10px;flex:none;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.roles{border:none;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;display:grid}.roles legend{color:var(--muted);margin-bottom:6px;font-size:14px}.roles label{border:1px solid var(--line);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;gap:8px;min-height:48px;font-weight:600;display:flex}.roles label.on{border:2px solid var(--accent);color:var(--accent);background:#eff4ff}.roles input{opacity:0;pointer-events:none;position:absolute}.field{color:var(--muted);flex-direction:column;gap:6px;font-size:14px;display:flex}.field input{border:1px solid var(--line);min-height:44px;color:var(--ink);background:#fff;border-radius:10px;padding:0 12px;font-size:16px}.error{color:var(--danger);margin:0;font-size:14px}.room{flex-direction:column;height:100%;display:flex}.bar{background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:4px 6px;padding:6px 12px;display:flex}.bar .group{align-items:center;gap:2px;display:flex}.bar-sep{background:var(--line);flex:none;width:1px;height:28px;margin:0 4px}.bar-room{align-items:center;gap:10px;min-width:0;max-width:210px;display:flex}.bar .brand-mark{border-radius:9px;width:32px;height:32px}.room-title{flex-direction:column;min-width:0;line-height:1.3;display:flex}.room-title strong{text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;overflow:hidden}.room-title>span{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.conn{vertical-align:1px;background:#d97706;border-radius:50%;width:8px;height:8px;margin-right:6px;display:inline-block}.conn-connected{background:#16a34a}.conn-disconnected{background:#dc2626}.btn-compact{gap:6px;min-height:40px;padding:0 12px}.status{color:#92400e;background:#fef3c7;border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:13px;font-weight:600;display:inline-flex}.status .dot{background:currentColor;border-radius:50%;width:8px;height:8px}.status-connected{color:#166534;background:#dcfce7}.status-disconnected{color:#991b1b;background:#fee2e2}.room-body{flex:auto;gap:10px;min-height:0;padding:10px;display:flex}.board-col{flex-direction:column;flex:auto;min-width:0;display:flex}.side{flex-direction:column;flex:0 0 300px;gap:10px;display:flex;overflow-y:auto}.room-body.side-hidden .side{display:none}.tool{width:44px;height:44px;color:var(--ink-2);cursor:pointer;background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;display:flex}.tool:hover:not(:disabled){background:var(--soft)}.tool.on,.tool.on:hover:not(:disabled){background:var(--accent);color:#fff}.tool:disabled{opacity:.35;cursor:not-allowed}.tool.size span{background:currentColor;border-radius:50%;display:block}.swatch{cursor:pointer;border:none;border-radius:50%;width:28px;height:28px;padding:0}.swatch.on{outline:2px solid var(--c);border:3px solid #fff;width:32px;height:32px}.swatch:disabled{opacity:.35;cursor:not-allowed}.hint{color:#9a3412;font-size:13px}.room-toggle{gap:6px;font-size:13px}.room-toggle.on{color:var(--accent);background:#eff4ff;border-color:#c7d5f8;font-weight:600}.room-toggle.on:hover:not(:disabled){background:#e2eafe}.room-toggle.off{color:#9a3412;border-style:dashed}.style-picker,.style-btn{position:relative}.style-ring{background:conic-gradient(#ef4444,#f59e0b,#22c55e,#06b6d4,#3b82f6,#a855f7,#ef4444);border-radius:50%;width:30px;height:30px;padding:3px;display:block}.style-inner{background:#fff;border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.style-dot{border-radius:50%;display:block;box-shadow:0 0 0 1px #14202e2e}.style-menu{z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:14px;flex-direction:column;gap:8px;width:248px;max-width:calc(100vw - 32px);padding:12px;display:flex;position:absolute;top:calc(100% + 8px);left:0;box-shadow:0 10px 30px #14202e2e}.style-menu h3{color:var(--muted);margin:0;font-size:12px;font-weight:600}.style-colors{grid-template-columns:repeat(5,32px);place-items:center;gap:10px;display:grid}.style-sizes{gap:4px;display:flex}.stage-wrap{background:var(--stage);border-radius:12px;flex:auto;min-height:320px;display:flex;position:relative;overflow:hidden}.board-stage{flex:auto;min-width:0;position:relative}.board-scroll{overscroll-behavior:contain;padding:16px;display:flex;position:absolute;inset:0}.board-page{background:#fff;border-radius:4px;flex:none;margin:auto;position:relative;overflow:hidden;box-shadow:0 1px 2px #14202e14,0 8px 24px #14202e14}.zoom-bar{background:var(--panel);border:1px solid var(--line);border-radius:12px;align-items:center;gap:2px;padding:4px;display:flex;position:absolute;bottom:16px;right:16px;box-shadow:0 4px 16px #14202e1f}.zoom-btn{width:40px;height:40px;color:var(--ink-2);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;display:flex}.zoom-btn:hover:not(:disabled),.zoom-text:hover:not(.on){background:var(--soft)}.zoom-btn:disabled{opacity:.35;cursor:not-allowed}.zoom-pct{text-align:center;font-variant-numeric:tabular-nums;min-width:52px;font-size:14px;font-weight:600}.zoom-sep{background:var(--line);width:1px;height:24px;margin:0 4px}.zoom-text{min-height:40px;color:var(--ink-2);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:8px;padding:0 12px;font-size:13px;font-weight:500}.zoom-text.on{color:var(--accent);background:#eff4ff;font-weight:600}.zoom-follow{color:var(--muted);padding:8px 12px;font-size:13px}.board-pdf,.board-ink{width:100%;height:100%;display:block;position:absolute;inset:0}.board-ink{touch-action:none;-webkit-user-select:none;user-select:none}.board-loading{color:var(--muted);margin:auto}.board-translate{pointer-events:none;line-height:1.25;position:absolute;inset:0;overflow:hidden}.tr-block{color:#14202e;white-space:pre-wrap;overflow-wrap:anywhere;background:#fff;border-radius:.15em;position:absolute;overflow:hidden;box-shadow:0 0 0 1px #1d4ed82e}.tr-block:lang(th){line-height:1.4}.tr-block sup,.tr-block sub{font-size:.7em;line-height:0}.tr-frac{vertical-align:middle;flex-direction:column;align-items:center;margin:0 .12em;line-height:1.15;display:inline-flex}.tr-num{border-bottom:.07em solid;padding:0 .12em}.tr-den{padding:0 .12em}.translate-bar{z-index:5;background:var(--panel);border:1px solid var(--line);max-width:calc(100% - 32px);color:var(--ink-2);border-radius:12px;flex-wrap:wrap;align-items:center;gap:4px;padding:4px 4px 4px 12px;font-size:14px;display:flex;position:absolute;top:16px;right:16px;box-shadow:0 4px 16px #14202e1f}.translate-bar>span:first-of-type{margin:0 4px 0 2px}.translate-status{color:var(--muted);margin:0 6px;font-size:13px}.translate-status.error{color:var(--danger)}.remote-cursor{pointer-events:none;align-items:flex-start;gap:2px;transition:left 80ms linear,top 80ms linear;display:flex;position:absolute;transform:translate(-1px,-1px)}.remote-cursor span{background:var(--who);color:#fff;white-space:nowrap;border-radius:12px;margin-top:12px;padding:2px 10px;font-size:12px;font-weight:600}.sel-box{fill:none;stroke:var(--accent);stroke-width:1.5px;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}.sel-handle{fill:#fff;stroke:var(--accent);stroke-width:1.5px;vector-effect:non-scaling-stroke}.sel-marquee{fill:#1d4ed814;stroke:var(--accent);stroke-width:1px;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}.sel-bar{z-index:6;white-space:nowrap;background:var(--panel);border:1px solid var(--line);border-radius:10px;align-items:center;gap:4px;padding:4px;display:flex;position:absolute;transform:translate(-50%,calc(-100% - 14px));box-shadow:0 4px 16px #14202e24}.sel-bar span{color:var(--muted);padding:0 8px;font-size:13px}.sel-bar button{min-height:36px;color:var(--ink-2);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:0 12px;font-size:13px;font-weight:600}.sel-bar button:hover{background:var(--soft)}.sel-bar button.danger{color:var(--danger)}.pages{z-index:4;background:var(--panel);border:1px solid var(--line);border-radius:12px;flex-wrap:nowrap;align-items:center;gap:4px;max-width:calc(100% - 420px);padding:4px;display:flex;position:absolute;bottom:16px;left:16px;overflow-x:auto;box-shadow:0 4px 16px #14202e1f}.page-arrow{width:36px;height:40px;color:var(--ink-2);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:none;justify-content:center;align-items:center;display:flex}.page-arrow:hover:not(:disabled){background:var(--soft)}.page-arrow:disabled{opacity:.35;cursor:not-allowed}.page-gap{color:var(--muted);padding:0 2px}.page-jump{flex:none;align-items:center;gap:4px;margin-left:4px;display:flex}.page-jump label{color:var(--muted);white-space:nowrap;align-items:center;gap:6px;font-size:13px;display:flex}.page-jump input{border:1px solid var(--line);width:64px;min-height:36px;color:var(--ink);background:#fff;border-radius:8px;padding:0 8px;font-size:15px}.page-jump .btn{min-height:36px;padding:0 12px}.page-chip{min-width:40px;height:40px;color:var(--muted);cursor:pointer;background:#fff;border:1px solid #c9d1dc;border-radius:8px;flex:none;padding:0 6px;font-size:13px;position:relative}.page-chip.on{border:2px solid var(--accent);color:var(--accent);font-weight:700}.page-chip:disabled{cursor:default}.page-chip.add{color:var(--ink-2);background:0 0;border:1px dashed #8a94a3;font-size:20px}.page-people{color:#fff;background:#0f766e;border-radius:8px;justify-content:center;align-items:center;min-width:15px;height:15px;padding:0 3px;font-size:10px;font-weight:700;display:flex;position:absolute;top:-5px;right:-5px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;flex-direction:column;gap:12px;padding:14px;display:flex;box-shadow:0 1px 2px #14202e0a,0 4px 14px #14202e0a}.panel-head{align-items:center;gap:8px;min-height:28px;display:flex}.panel-head h2{flex:auto;min-width:0;font-size:15px;font-weight:600}.panel-icon{width:28px;height:28px;color:var(--accent);background:#eff4ff;border-radius:8px;flex:none;justify-content:center;align-items:center;display:flex}.count-pill{background:var(--soft);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600}.check{cursor:pointer;align-items:center;gap:10px;min-height:40px;font-size:14px;display:flex}.check input{width:18px;height:18px;accent-color:var(--accent)}.switch-list{flex-direction:column;gap:6px;display:flex}.switch-row{background:var(--soft);cursor:pointer;border:1px solid #0000;border-radius:12px;align-items:center;gap:10px;min-height:56px;padding:8px 10px;transition:background .12s,border-color .12s;display:flex}.switch-row:hover{background:#edf1f6}.switch-row:has(input:checked){background:#f1f5ff;border-color:#d6e0fb}.switch-icon{width:32px;height:32px;color:var(--muted);box-shadow:0 0 0 1px var(--line);background:#fff;border-radius:9px;flex:none;justify-content:center;align-items:center;display:flex}.switch-row:has(input:checked) .switch-icon{color:var(--accent);box-shadow:0 0 0 1px #c7d5f8}.switch-text{flex-direction:column;flex:auto;min-width:0;font-size:14px;font-weight:500;line-height:1.35;display:flex}.switch-text small{color:var(--muted);font-size:12px;font-weight:400}.switch-row input{appearance:none;cursor:pointer;background:#c3cbd6;border-radius:999px;flex:none;width:40px;height:24px;margin:0;transition:background .15s;position:relative}.switch-row input:after{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #14202e4d}.switch-row input:checked{background:var(--accent)}.switch-row input:checked:after{transform:translate(16px)}.switch-row input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-soft{background:var(--soft);color:var(--ink-2);border-color:#0000}.btn-soft:hover:not(:disabled){background:#e6ebf1}.btn-danger-soft{color:var(--danger);background:#fff;border-color:#f4d4d4}.btn-danger-soft:hover:not(:disabled){background:#fef2f2;border-color:#f1b9b9}.people{flex-direction:column;gap:2px;margin:0 -6px;padding:0;list-style:none;display:flex}.people li{border-radius:10px;align-items:center;gap:10px;padding:6px;font-size:14px;display:flex}.people li:hover{background:var(--soft)}.people li.me{background:#f6f8fb}.avatar{color:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;width:34px;height:34px;font-family:Anuphan,sans-serif;font-weight:700;display:flex;position:relative}.avatar:after{content:"";background:#22c55e;border:2px solid #fff;border-radius:50%;width:10px;height:10px;position:absolute;bottom:-1px;right:-1px}.person-name{text-overflow:ellipsis;white-space:nowrap;flex:auto;align-items:center;gap:6px;min-width:0;font-weight:500;display:flex;overflow:hidden}.person-you{color:var(--muted);font-weight:400}.person-meta{color:var(--muted);white-space:nowrap;background:var(--soft);font-variant-numeric:tabular-nums;border-radius:999px;align-items:center;gap:4px;padding:2px 8px;font-size:12px;display:inline-flex}.person-meta.drawing{color:#047857;background:#ecfdf5;font-weight:600}.badge{color:#9a3412;background:#ffedd5;border-radius:999px;flex:none;padding:1px 8px;font-size:11px;font-weight:700}@media (width<=1600px){.room-toggle .btn-label{display:none}.room-toggle{width:44px;padding:0}}@media (width<=1320px){.btn-label{display:none}.btn-compact{width:44px;padding:0}}@media (width<=960px){.room-body{flex-direction:column;overflow-y:auto}.side{flex:none;overflow:visible}.stage-wrap{min-height:70vh}.pages{max-width:calc(100% - 32px);bottom:72px}}@media (width<=600px){.bar{padding:6px 8px}.bar-room{flex:100%;max-width:none}.bar-sep{display:none}}.swatch.light{box-shadow:inset 0 0 0 1px #8a94a3}.swatch.custom{background:conic-gradient(#ef4444,#f59e0b,#22c55e,#06b6d4,#3b82f6,#a855f7,#ef4444);display:inline-block;position:relative;overflow:hidden}.swatch.custom input{opacity:0;cursor:pointer;border:none;width:100%;height:100%;padding:0;position:absolute;inset:0}.swatch.custom:has(input:disabled){opacity:.35}.shape-picker,.shape-btn{position:relative}.shape-btn .caret{opacity:.7;display:flex;position:absolute;bottom:2px;right:2px}.shape-menu{z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:14px;flex-direction:column;gap:8px;width:320px;max-width:calc(100vw - 32px);padding:10px;display:flex;position:absolute;top:calc(100% + 8px);left:0;box-shadow:0 10px 30px #14202e2e}.shape-grid{grid-template-columns:repeat(3,1fr);gap:4px;display:grid}.shape-item{min-height:64px;color:var(--ink-2);cursor:pointer;text-align:center;background:0 0;border:1px solid #0000;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:6px 4px;font-size:12px;line-height:1.25;display:flex}.shape-item:hover{background:var(--soft)}.shape-item.on{border-color:var(--accent);color:var(--accent);background:#eff4ff;font-weight:600}.shape-opts{border-top:1px solid var(--line);flex-direction:column;padding-top:4px;display:flex}.shape-opts .check{gap:8px;min-height:36px}.shape-opts .check.dim{color:var(--muted)}.text-editor{z-index:5;outline:1.5px dashed var(--accent);outline-offset:2px;resize:none;white-space:pre;background:#fff9;border:none;min-width:24px;margin:0;padding:0;position:absolute;overflow:hidden}.text-editor::placeholder{color:#8a94a3}.laser{filter:drop-shadow(0 0 3px #ef4444cc);pointer-events:none}.measure{pointer-events:none;background:var(--ink);color:#fff;font-variant-numeric:tabular-nums;border-radius:8px;padding:2px 8px;font-size:13px;font-weight:600;position:absolute;transform:translate(12px,-32px)}.live-pill{white-space:nowrap;color:#92400e;background:#fef3c7;border-radius:999px;align-items:center;gap:6px;padding:3px 10px;font-size:12px;font-weight:600;display:inline-flex}.live-pill i{background:currentColor;border-radius:50%;width:7px;height:7px}.live-pill.av-connected{color:#166534;background:#dcfce7}.live-pill.av-connected i{animation:1.8s ease-out infinite live-pulse}.live-pill.av-disconnected,.live-pill.av-error{color:#991b1b;background:#fee2e2}@keyframes live-pulse{0%{box-shadow:0 0 #16a34a8c}70%,to{box-shadow:0 0 0 6px #16a34a00}}@media (prefers-reduced-motion:reduce){.live-pill.av-connected i{animation:none}}.av-tile{aspect-ratio:4/3;background:radial-gradient(120% 90% at 50% 30%,#2b3647 0%,#19212e 100%);border-radius:12px;margin:0;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff0a}.av-tile.big{aspect-ratio:16/9}.av-tile:after{content:"";border-radius:inherit;pointer-events:none;transition:box-shadow .12s;position:absolute;inset:0;box-shadow:inset 0 0 #22c55e}.av-tile.speaking:after{box-shadow:inset 0 0 0 3px #22c55e}.av-tile video{object-fit:cover;width:100%;height:100%;display:block}.av-tile video.mirror{transform:scaleX(-1)}.av-avatar{flex-direction:column;justify-content:center;align-items:center;gap:6px;width:100%;height:100%;padding-bottom:14px;display:flex}.av-avatar span{background:var(--who);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:46px;height:46px;font:700 19px Anuphan,sans-serif;display:flex;box-shadow:0 0 0 4px #ffffff14}.av-tile.big .av-avatar span{width:64px;height:64px;font-size:26px}.av-avatar small{color:#cbd5e1;font-size:11px}.av-tile figcaption{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;pointer-events:none;background:#0f172a9e;border-radius:999px;align-items:center;gap:6px;max-width:calc(100% - 12px);padding:3px 9px 3px 3px;font-size:12px;font-weight:500;display:flex;position:absolute;bottom:6px;left:6px}.av-mic{background:#ffffff29;border-radius:50%;flex:none;justify-content:center;align-items:center;width:20px;height:20px;display:flex}.av-mic.muted-mic{background:#dc2626}.av-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.av-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.av-grid.one{grid-template-columns:1fr}.av-grid.one .av-tile{aspect-ratio:16/9}.av-controls{grid-template-columns:1fr 1fr auto;gap:8px;display:grid}.av-settings{position:relative}.av-gear{width:44px;padding:0;position:relative}.av-gear[aria-expanded=true]{color:var(--accent);background:#eff4ff;border-color:#c7d5f8}.av-gear.flag:after{content:"";width:8px;height:8px;box-shadow:0 0 0 2px var(--panel);background:#d97706;border-radius:50%;position:absolute;top:6px;right:6px}.av-menu{z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:14px;width:264px;max-width:calc(100vw - 32px);padding:8px;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 10px 30px #14202e2e}.av-note{color:#92400e;align-items:center;gap:6px;margin:0;font-size:12px;display:flex}.av-btn{border:1px solid var(--line);background:var(--panel);min-height:44px;color:var(--ink);cursor:pointer;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:0 10px;font-size:14px;font-weight:600;transition:background .12s,border-color .12s;display:inline-flex}.av-btn.on:hover:not(:disabled){background:var(--soft)}.av-btn.off{color:#fff;background:#dc2626;border-color:#dc2626}.av-btn.off:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.av-btn:disabled{opacity:.5;cursor:not-allowed}.audio-unlock{z-index:6;background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:999px;align-items:center;gap:8px;min-height:48px;padding:0 20px;font-size:15px;font-weight:600;display:inline-flex;position:absolute;top:16px;left:50%;transform:translate(-50%);box-shadow:0 6px 20px #1d4ed859}.eraser-ring{visibility:hidden}.eraser-ring[data-state=idle],.eraser-ring[data-state=target],.eraser-ring[data-state=erasing],.eraser-ring[data-state=blocked]{visibility:visible}.eraser-ring-halo{fill:none;stroke:#ffffffe6;stroke-width:4px;vector-effect:non-scaling-stroke}.eraser-ring-edge{fill:#ffffff40;stroke:#475569;stroke-width:1.5px;vector-effect:non-scaling-stroke}.eraser-ring[data-state=target] .eraser-ring-edge{stroke:#ef4444;fill:#ef444414}.eraser-ring[data-state=erasing] .eraser-ring-edge{stroke:#dc2626;stroke-width:2px;fill:#ef44442e}.eraser-ring[data-state=blocked] .eraser-ring-edge{stroke:#94a3b8;stroke-dasharray:3 3;fill:#94a3b826}.erase-ghost{transform-box:fill-box;transform-origin:50%;animation:.42s ease-out forwards erase-ghost}@keyframes erase-ghost{0%{opacity:.85;transform:scale(1)}to{opacity:0;transform:scale(.92)}}@keyframes erase-fade{0%{opacity:.7}to{opacity:0}}@media (prefers-reduced-motion:reduce){.erase-ghost{animation:.3s linear forwards erase-fade}}