*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}body{background:#f5f7fd;color:#1c2540}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}[hidden]{display:none!important}.sr-only{position:absolute;left:-9999px}
.g8m-app{--paper:#fff;--field:#f0f3fa;--bg:#f5f7fd;--ink:#202b46;--muted:#77849b;--line:#e4e9f3;--accent:#6659e8;--accent-soft:#efedff;--side:#fbfcff;--bubble:#eff2f8;--success:#168469;--shadow:0 10px 40px #202b4610;background:var(--bg);color:var(--ink);height:100dvh;min-height:400px;display:flex;flex-direction:column;overflow:hidden}
.g8m-app[data-theme=dark]{--paper:#161e30;--field:#222d43;--bg:#101827;--ink:#f2f5ff;--muted:#abb6ca;--line:#33405a;--accent:#a395ff;--accent-soft:#302b50;--side:#121b2b;--bubble:#29344a;--success:#75dbc2;--shadow:0 10px 30px #0005}
.g8m-top{height:67px;flex:none;display:flex;align-items:center;gap:16px;padding:0 clamp(12px,2vw,28px);background:var(--paper);border-bottom:1px solid var(--line);z-index:6}.g8m-back{border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none;width:37px;height:37px;font-size:30px;display:grid;place-items:center;line-height:1}.g8m-brand{display:flex;align-items:center;gap:11px;min-width:0}.g8m-logo{display:grid;place-items:center;width:39px;height:39px;border-radius:13px;background:#6659e8;color:#fff;font-size:24px;font-weight:900;position:relative}.g8m-logo span{position:absolute;font-size:12px;right:4px;bottom:3px}.g8m-brand strong{display:block;font-size:17px;letter-spacing:-.4px}.g8m-brand em{font-style:normal;color:var(--accent)}.g8m-brand small{display:block;font-size:11px;color:var(--muted);margin-top:2px}.g8m-top-actions{margin-left:auto;display:flex;align-items:center;gap:10px;white-space:nowrap}.g8m-top-actions button{border:1px solid var(--line);border-radius:10px;color:var(--ink);background:var(--field);width:36px;height:36px;font-size:20px}.g8m-connection{color:var(--muted);font-size:11px}.g8m-connection:before{content:'';display:inline-block;width:7px;height:7px;background:#f4ae42;border-radius:100%;margin-right:5px}.g8m-connection.online:before{background:#31b994}
.g8m-gate{width:min(440px,calc(100% - 30px));margin:auto;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:38px 25px;text-align:center;box-shadow:var(--shadow)}.g8m-gate-icon{font-size:38px}.g8m-gate h1{font-size:23px;margin:12px 0}.g8m-gate p{font-size:14px;color:var(--muted);line-height:1.5}.g8m-gate-link{display:inline-block;margin-top:14px;background:var(--accent);color:#fff;padding:11px 18px;border-radius:12px;text-decoration:none;font-weight:700}
.g8m-workspace{width:100%;flex:1;min-height:0;display:grid;grid-template-columns:minmax(225px,265px) minmax(235px,305px) minmax(0,1fr);max-width:1800px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}.g8m-workspace.student{grid-template-columns:minmax(0,1fr)}.g8m-sections,.g8m-students,.g8m-conversation{min-width:0;min-height:0;background:var(--paper);display:flex;flex-direction:column}.g8m-sections,.g8m-students{border-right:1px solid var(--line);background:var(--side)}.g8m-panel-head{padding:22px 16px 14px;flex:none}.g8m-panel-head strong{font-size:18px;display:block;letter-spacing:-.4px}.g8m-panel-head small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.g8m-count{background:var(--accent);color:#fff;border-radius:99px;padding:3px 7px;font-size:12px;vertical-align:middle}.g8m-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);margin:0 12px 10px;padding:9px 11px;background:var(--field);border-radius:12px}.g8m-search span{color:var(--muted);font-size:19px}.g8m-search input{width:100%;min-width:0;background:transparent;border:none;outline:none;color:var(--ink);font-size:12px}.g8m-search input::placeholder{color:var(--muted)}.g8m-pills{display:flex;gap:5px;padding:0 12px 12px;flex-wrap:wrap}.g8m-pills button{border:1px solid var(--line);border-radius:9px;padding:6px 9px;background:var(--paper);font-size:11px;color:var(--muted);font-weight:700}.g8m-pills button.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}.g8m-section-list,.g8m-student-list{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:5px 9px 20px}.g8m-panel-foot{font-size:10px;padding:14px;color:var(--muted);border-top:1px solid var(--line);text-align:center}.g8m-section-row,.g8m-student-row{width:100%;border:0;background:transparent;text-align:left;display:flex;gap:9px;align-items:center;border-radius:13px;padding:12px 9px;color:var(--ink)}.g8m-section-row:hover,.g8m-student-row:hover,.g8m-section-row.active,.g8m-student-row.active{background:var(--accent-soft)}.g8m-section-row.active,.g8m-student-row.active{box-shadow:inset 3px 0 var(--accent)}.g8m-section-row .g8m-icon{display:grid;place-items:center;border-radius:11px;background:var(--field);height:36px;width:36px;flex:none;color:var(--accent)}.g8m-row-copy{flex:1;min-width:0}.g8m-row-copy strong{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.g8m-row-copy small{display:block;font-size:11px;color:var(--muted);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.g8m-bubble-count{flex:none;background:#ee4669;color:#fff;font-weight:800;font-size:10px;min-width:21px;line-height:21px;text-align:center;border-radius:99px;padding:0 4px}.g8m-student-avatar,.g8m-avatar{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:800}.g8m-split{display:flex;align-items:center;gap:9px}.g8m-mobile-back{display:none;border:0;background:var(--field);color:var(--ink);width:35px;height:35px;flex:none;border-radius:10px;font-size:26px;line-height:1}
.g8m-chat-head{height:72px;padding:11px 20px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line);flex:none;background:var(--paper)}.g8m-chat-identity{flex:1;min-width:0}.g8m-chat-identity strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.g8m-chat-identity small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.g8m-lock{font-size:11px;background:var(--field);color:var(--muted);border-radius:9px;padding:7px 9px}.g8m-messages{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding:22px clamp(12px,3vw,36px);gap:10px;background:var(--paper);scrollbar-width:thin}.g8m-empty{color:var(--muted);text-align:center;font-size:13px;margin:auto;max-width:350px;line-height:1.6}.g8m-date{align-self:center;font-size:10px;color:var(--muted);padding:13px}.g8m-message{max-width:min(85%,460px);display:flex;flex-direction:column;align-self:flex-start;gap:5px;min-width:85px}.g8m-message.own{align-self:flex-end;align-items:flex-end}.g8m-message .g8m-text{background:var(--bubble);border-radius:17px 17px 17px 5px;padding:10px 14px;font-size:13px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}.g8m-message.own .g8m-text{background:#6758e9;color:#fff;border-radius:17px 17px 5px 17px}.g8m-message .g8m-text:empty{display:none}.g8m-msg-meta{display:flex;align-items:center;gap:8px;padding:0 4px;font-size:10px;color:var(--muted)}.g8m-reply-btn{background:transparent;border:none;color:var(--muted);font-size:10px;padding:2px 3px}.g8m-reply-btn:hover{color:var(--accent);text-decoration:underline}.g8m-quoted{font-size:11px;border-left:3px solid var(--accent);background:var(--field);padding:7px 10px;border-radius:6px;max-width:100%;color:var(--muted);overflow-wrap:anywhere}.g8m-photo-grid{display:flex;flex-direction:column;gap:6px;width:fit-content;max-width:100%;min-width:0;align-items:flex-start}
.g8m-message.own .g8m-photo-grid{align-items:flex-end}
.g8m-photo-grid.is-multiple{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,390px);align-items:start}
.g8m-photo-grid button{display:flex;align-items:center;justify-content:center;flex:none;position:relative;overflow:hidden;border:0;border-radius:12px;background:var(--field);padding:0;max-width:100%;min-width:0;width:min(100%,var(--g8m-photo-width,190px));aspect-ratio:var(--g8m-photo-aspect,4/3);height:auto;color:var(--muted)}
.g8m-photo-grid.is-multiple button{width:100%;max-height:350px}
.g8m-photo-grid button img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;image-rendering:auto}
.g8m-photo-grid button.g8m-image-loading{min-height:94px;font-size:11px;padding:12px;line-height:1.45;text-align:center;border:1px solid var(--line)}
.g8m-photo-grid button.g8m-image-ready{min-height:0;padding:0;border:0}
.g8m-photo-grid button.g8m-image-error{min-height:80px;font-size:11px;padding:10px;border:1px dashed var(--line);line-height:1.4;text-align:center;cursor:pointer}
.g8m-photo-grid button.g8m-image-error:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:700px){.g8m-photo-grid.is-multiple{width:min(100%,330px)}.g8m-photo-grid button{max-width:100%}.g8m-photo-grid.is-multiple button{max-height:280px}}
.g8m-ack-actions{display:flex;gap:6px;flex-wrap:wrap}.g8m-ack-actions button{border:1px solid var(--line);border-radius:9px;background:var(--field);color:var(--muted);font-size:10px;padding:5px 9px}.g8m-ack-actions button.selected{border-color:var(--success);color:var(--success);font-weight:800}.g8m-ack-chip{font-size:10px;color:var(--success);font-weight:700}.g8m-reply,.g8m-attachments{padding:10px 16px;background:var(--field);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;flex:none;align-items:center}.g8m-reply div{min-width:0}.g8m-reply strong{font-size:11px;display:block;color:var(--accent)}.g8m-reply span{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}.g8m-reply button{background:transparent;border:0;color:var(--muted);font-size:20px}.g8m-attachments{flex-wrap:wrap;justify-content:flex-start}.g8m-attachment-preview{position:relative;width:69px;height:65px}.g8m-attachment-preview img{width:100%;height:100%;object-fit:cover;border-radius:9px}.g8m-attachment-preview button{position:absolute;right:-5px;top:-7px;border:0;border-radius:50%;width:20px;height:20px;background:#202a43;color:#fff}.g8m-send-status{padding:0 18px;color:var(--muted);font-size:11px;max-height:30px;overflow:hidden;flex:none}.g8m-send-status.error{color:#dd475d}.g8m-compose{display:flex;gap:11px;align-items:flex-end;padding:10px 16px 5px;background:var(--paper);flex:none}.g8m-attach-btn{background:var(--field);height:38px;width:38px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--accent);cursor:pointer;font-size:25px}.g8m-compose textarea{resize:none;flex:1;min-width:0;max-height:120px;min-height:38px;background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:10px 14px;outline:0;overflow:auto;font-size:13px;line-height:18px}.g8m-compose textarea:focus{border-color:var(--accent)}.g8m-compose textarea::placeholder{color:var(--muted)}.g8m-send{width:39px;height:39px;border:none;flex:none;border-radius:50%;background:#6659e8;color:#fff;font-size:17px}.g8m-disclaimer{text-align:center;margin:0;padding:0 12px 10px;color:var(--muted);font-size:10px;flex:none}.g8m-image-viewer{position:fixed;inset:0;background:rgba(4,8,18,.94);display:grid;place-items:center;z-index:5000;padding:55px 16px 20px}.g8m-image-viewer img{max-width:100%;max-height:100%;object-fit:contain}.g8m-image-viewer button{position:absolute;right:18px;top:10px;color:#fff;background:#ffffff22;border:0;border-radius:10px;padding:2px 12px;font-size:30px}
@media (max-width:1100px){.g8m-workspace:not(.student){grid-template-columns:minmax(210px,260px) minmax(0,1fr)}.g8m-workspace:not(.student) .g8m-sections{display:none}}@media(max-width:700px){.g8m-app{min-height:0}.g8m-top{height:60px;padding:0 10px;gap:8px}.g8m-brand strong{font-size:14px}.g8m-brand small{font-size:10px}.g8m-connection{display:none}.g8m-logo{width:34px;height:34px;font-size:20px}.g8m-top-actions{gap:5px}.g8m-top-actions button{width:33px;height:33px}.g8m-workspace:not(.student){display:block;position:relative;overflow:hidden}.g8m-workspace:not(.student) .g8m-sections,.g8m-workspace:not(.student) .g8m-students,.g8m-workspace:not(.student) .g8m-conversation{position:absolute;inset:0;width:100%;height:100%;border:0}.g8m-workspace:not(.student) .g8m-sections{display:flex}.g8m-workspace:not(.student)[data-mobile-view=sections] .g8m-students,.g8m-workspace:not(.student)[data-mobile-view=sections] .g8m-conversation{display:none}.g8m-workspace:not(.student)[data-mobile-view=students] .g8m-sections,.g8m-workspace:not(.student)[data-mobile-view=students] .g8m-conversation{display:none}.g8m-workspace:not(.student)[data-mobile-view=chat] .g8m-sections,.g8m-workspace:not(.student)[data-mobile-view=chat] .g8m-students{display:none}.g8m-workspace:not(.student) .g8m-mobile-back{display:grid;place-items:center}.g8m-panel-head{padding:18px 14px 10px}.g8m-workspace.student .g8m-chat-head{height:67px}.g8m-chat-head{padding:9px 12px}.g8m-messages{padding:16px 12px}.g8m-lock{font-size:9px;padding:5px}.g8m-disclaimer{font-size:9px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}.g8m-message{max-width:86%}.g8m-compose{padding:7px 10px 4px}.g8m-panel-foot{display:none}}
.g8m-tablet-filter{display:none;padding:0 12px 10px;flex:none}.g8m-tablet-filter label{font-size:10px;color:var(--muted);display:block;margin-bottom:5px}.g8m-tablet-filter select{background:var(--field);border:1px solid var(--line);color:var(--ink);font:inherit;font-size:12px;padding:10px;border-radius:10px;width:100%}
@media(min-width:701px) and (max-width:1100px){.g8m-tablet-filter{display:block}}
@media(max-width:700px){.g8m-tablet-filter{display:block}}
/* Reflect select G8Code admin-published design signatures without sacrificing contrast. */
.g8m-app[data-design-theme="bauhaus"]{--accent:#e64128;--accent-soft:#fff2d5}
.g8m-app[data-design-theme="bauhaus"][data-theme="dark"]{--accent:#ffb84d;--accent-soft:#382e2c}
.g8m-app[data-design-theme="ocean"],.g8m-app[data-design-theme="blueprint-lab"]{--accent:#167cae;--accent-soft:#e3f5fc}
.g8m-app[data-design-theme="ocean"][data-theme="dark"],.g8m-app[data-design-theme="blueprint-lab"][data-theme="dark"]{--accent:#6ad2fa;--accent-soft:#18374a}
.g8m-app[data-design-theme="forest"]{--accent:#287855;--accent-soft:#e8f6e8}
.g8m-app[data-design-theme="forest"][data-theme="dark"]{--accent:#9bdc8d;--accent-soft:#223e33}
.g8m-app[data-design-theme="sakura"],.g8m-app[data-design-theme="valentine"]{--accent:#b24887;--accent-soft:#fdeaf4}
.g8m-app[data-design-theme="sakura"][data-theme="dark"],.g8m-app[data-design-theme="valentine"][data-theme="dark"]{--accent:#f8b9d8;--accent-soft:#47314a}
.g8m-app[data-design-theme="cyberpunk"],.g8m-app[data-design-theme="cyber-neon"],.g8m-app[data-design-theme="synthwave-80s"]{--accent:#bd50a4;--accent-soft:#fce8fc}
.g8m-app[data-design-theme="cyberpunk"][data-theme="dark"],.g8m-app[data-design-theme="cyber-neon"][data-theme="dark"],.g8m-app[data-design-theme="synthwave-80s"][data-theme="dark"]{--accent:#f09cef;--accent-soft:#392748}
.g8m-load-older{align-self:center;margin:5px 0 12px;background:var(--field);color:var(--accent);border:1px solid var(--line);border-radius:99px;padding:8px 18px;font-size:11px;font-weight:750}

/* G8Code Messages V1.1: optional in-page sign-in when file:// pages do not share Auth persistence. */
.g8m-quick-login{display:grid;gap:8px;margin:18px auto 0;max-width:305px;text-align:left}
.g8m-quick-login label{font-size:11px;font-weight:750;color:var(--ink);margin-top:5px}
.g8m-quick-login input,.g8m-quick-login select{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--field);color:var(--ink);font-size:13px;min-height:42px}
.g8m-quick-login button{margin-top:10px;background:var(--accent);color:white;font-weight:750;border:0;border-radius:11px;padding:12px 14px;min-height:42px}
.g8m-quick-login .g8m-login-error{font-size:12px;color:#dd3b5e;margin:3px 0}
.g8m-gate:has(.g8m-quick-login:not([hidden])){margin:20px auto;overflow-y:auto;max-height:calc(100dvh - 95px)}
@media(max-width:480px){.g8m-gate:has(.g8m-quick-login:not([hidden])){padding:20px 18px}.g8m-gate h1{font-size:21px}}

/* V3.8: never collapse messages during long chat histories; visible sync diagnostics. */
.g8m-messages>.g8m-message,.g8m-messages>.g8m-date,.g8m-messages>.g8m-load-older,.g8m-messages>.g8m-msg-render-error{flex-shrink:0}
.g8m-feed-state{background:var(--paper);border-bottom:1px solid var(--line);color:var(--muted);font-size:10px;padding:5px 16px;text-align:center;flex:none}
.g8m-feed-state.error{color:#dc4961}
.g8m-refresh{display:grid;place-items:center;min-width:32px;width:32px;height:32px;border:1px solid var(--line);border-radius:10px;background:var(--field);color:var(--ink);font-size:22px;flex:none}
.g8m-refresh:hover{border-color:var(--accent);color:var(--accent)}
.g8m-msg-render-error{align-self:center;font-size:11px;border-radius:8px;padding:8px 12px;color:#cc465d;background:var(--field)}

/* V4: fast chat & role-safe project sharing */
.g8m-attach-wrap{position:relative;flex:none;width:38px;height:38px}
.g8m-attach-wrap .g8m-attach-btn{border:0;cursor:pointer}
.g8m-attach-menu{position:absolute;bottom:48px;left:0;min-width:210px;z-index:20;display:grid;gap:4px;padding:7px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:14px}
.g8m-attach-menu button{background:transparent;color:var(--ink);text-align:left;border:0;border-radius:9px;padding:12px;font-size:12px;font-weight:700}
.g8m-attach-menu button:hover,.g8m-attach-menu button:focus-visible{background:var(--accent-soft);color:var(--accent)}
.g8m-project-selected{padding:8px 15px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:700}
.g8m-project-selected button{border:0;border-radius:6px;color:var(--ink);background:var(--paper);width:24px;height:24px;flex:none}
.g8m-project-card{display:flex;align-items:center;gap:10px;width:min(340px,100%);min-width:0;padding:12px;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--field);color:var(--ink);box-shadow:0 2px 10px #00000009}
.g8m-project-card:hover{border-color:var(--accent)}
.g8m-project-symbol{display:grid;place-items:center;width:39px;height:39px;flex:none;background:var(--accent-soft);color:var(--accent);font-size:22px;font-weight:800;border-radius:11px}
.g8m-project-info{display:block;flex:1;min-width:0}.g8m-project-info strong{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.g8m-project-info small{display:block;font-size:10px;color:var(--muted);margin-top:5px;line-height:1.4}.g8m-project-open-label{font-size:11px;color:var(--accent);white-space:nowrap;font-weight:750}
.g8m-project-modal{position:fixed;inset:0;z-index:6100;background:rgba(6,12,30,.75);display:flex;align-items:center;justify-content:center;padding:15px;overflow:auto}
.g8m-project-dialog{width:min(540px,100%);max-height:min(90dvh,850px);min-height:250px;overflow:hidden;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column;box-shadow:0 25px 90px #0005}
.g8m-project-dialog>header{display:flex;align-items:start;justify-content:space-between;gap:10px;padding:17px 20px;border-bottom:1px solid var(--line)}
.g8m-project-dialog>header h2{font-size:17px;margin:0}.g8m-project-dialog>header p{font-size:11px;color:var(--muted);margin:5px 0 0}
.g8m-project-dialog>header button{flex:none;border:1px solid var(--line);border-radius:10px;background:var(--field);color:var(--ink);font-size:22px;width:35px;height:35px}
.g8m-project-search{margin:12px 15px 8px;display:flex;gap:8px;align-items:center;padding:10px;border-radius:11px;background:var(--field);border:1px solid var(--line)}
.g8m-project-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font-size:13px}
.g8m-project-list{overflow:auto;min-height:0;padding:8px 15px 19px;display:grid;gap:7px}
.g8m-project-choice{display:flex;align-items:center;gap:10px;text-align:left;padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--side);color:var(--ink);min-width:0;width:100%}
.g8m-project-choice:hover{border-color:var(--accent)}.g8m-project-choice>span:last-child{font-size:11px;color:var(--accent);white-space:nowrap}
.g8m-project-view-dialog{width:min(1160px,100%);height:min(92dvh,870px)}
.g8m-viewer-loader,.g8m-viewer-error{margin:12px 18px;color:var(--muted);font-size:13px}.g8m-viewer-error{color:#dc4961}
.g8m-viewer-workspace{display:flex;flex:1;min-height:0;flex-direction:column}
.g8m-viewer-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}
.g8m-viewer-toolbar label{display:flex;gap:8px;align-items:center}.g8m-viewer-toolbar select{max-width:200px;min-width:90px;border:1px solid var(--line);border-radius:9px;background:var(--field);color:var(--ink);padding:8px;font-size:12px}.g8m-viewer-toolbar>span{margin-left:auto;font-weight:700}
.g8m-viewer-columns{display:grid;grid-template-columns:1.2fr 1fr;min-height:0;flex:1;gap:0}
.g8m-viewer-columns section{display:flex;min-height:0;min-width:0;flex-direction:column}
.g8m-viewer-columns section+section{border-left:1px solid var(--line)}
.g8m-viewer-columns h3{font-size:11px;padding:10px 15px;margin:0;border-bottom:1px solid var(--line);color:var(--muted)}
.g8m-viewer-columns iframe{width:100%;flex:1;min-height:0;border:0;background:white}
.g8m-viewer-columns pre{flex:1;min-height:0;overflow:auto;margin:0;background:var(--side);color:var(--ink);padding:12px;font-size:12px;line-height:1.55;white-space:pre;tab-size:2}
@media(max-width:700px){.g8m-project-modal{padding:0}.g8m-project-dialog{width:100%;height:100dvh;max-height:100dvh;border-radius:0}.g8m-project-view-dialog{height:100dvh}.g8m-viewer-columns{grid-template-columns:1fr;grid-template-rows:minmax(220px,1fr) minmax(150px,.75fr)}.g8m-viewer-columns section+section{border-left:0;border-top:1px solid var(--line)}.g8m-project-card{width:min(300px,100%)}.g8m-attach-menu{left:-4px;min-width:190px}}

/* V4.1: stable desktop-canvas project viewer on every device */
.g8m-viewer-columns{grid-template-columns:minmax(0, 1fr) minmax(220px, 320px)}
.g8m-viewer-columns section:first-child{overflow:hidden}
.g8m-viewer-columns h3{display:flex;align-items:center;justify-content:space-between;gap:8px}
.g8m-viewer-columns h3 small{font-size:10px;font-weight:500;color:var(--muted);text-align:right}
.g8m-preview-host{position:relative;flex:1;min-height:0;min-width:0;overflow:hidden;background:white;touch-action:auto;overscroll-behavior:contain}
.g8m-preview-host iframe{position:absolute;top:0;left:0;width:1280px;height:900px;display:block;border:0;background:white;max-width:none;max-height:none;min-width:1280px;min-height:0;transform-origin:top left}
.g8m-project-view-dialog{max-height:96dvh;height:min(94dvh,1020px)}
@media(max-width:700px){
 .g8m-project-view-dialog{height:100dvh;max-height:100dvh}
 .g8m-viewer-columns{grid-template-columns:1fr;grid-template-rows:minmax(260px, 1fr) minmax(100px, 22%)}
 .g8m-viewer-columns h3{padding:8px 10px}
 .g8m-viewer-toolbar{gap:5px;padding:7px 10px}
 .g8m-viewer-toolbar select{max-width:142px}
 .g8m-viewer-columns section+section{border-top:1px solid var(--line)}
}

/* V4.2 — one scrollable desktop canvas, full source, three view modes. */
.g8m-project-view-dialog{width:min(1440px,calc(100% - 6px));max-height:96dvh;height:96dvh}
.g8m-viewer-workspace{min-height:0;min-width:0;overflow:hidden}
.g8m-viewer-toolbar{flex:0 0 auto;gap:9px;padding:9px 13px;align-items:center}
.g8m-viewer-toolbar label{gap:5px;white-space:nowrap}
.g8m-viewer-toolbar label select{max-width:185px;min-width:80px}
.g8m-viewer-tabs{display:flex;gap:3px;border:1px solid var(--line);padding:3px;border-radius:11px;background:var(--field)}
.g8m-viewer-tabs button{border:0;border-radius:8px;padding:8px 11px;background:transparent;color:var(--ink);font:inherit;font-size:12px;font-weight:750;white-space:nowrap;cursor:pointer}
.g8m-viewer-tabs button.active{background:var(--accent);color:#fff}
.g8m-viewer-reload,.g8m-viewer-copy{font:inherit;border:1px solid var(--line);border-radius:9px;padding:8px 11px;background:var(--field);color:var(--ink);font-size:11px;cursor:pointer}
.g8m-viewer-lock{margin-left:auto;color:var(--muted);white-space:nowrap}
.g8m-viewer-columns{flex:1;min-height:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.g8m-viewer-columns[data-view="split"]{grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr)}
.g8m-viewer-columns[data-view="source"]{grid-template-columns:minmax(0,1fr)}
.g8m-viewer-columns[data-view="source"] .g8m-viewer-output-pane,.g8m-viewer-columns[data-view="output"] .g8m-viewer-source-pane{display:none!important}
.g8m-viewer-columns section{display:flex;min-height:0;min-width:0;flex-direction:column;overflow:hidden}
.g8m-viewer-columns section+section{border-left:1px solid var(--line);border-top:0}
.g8m-viewer-columns h3{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:9px 13px;min-height:39px;border-bottom:1px solid var(--line);color:var(--muted);font-size:11px}
.g8m-viewer-columns h3 small{font-weight:500;white-space:normal;text-align:right}
.g8m-preview-host{position:relative;flex:1;min-height:0;min-width:0;overflow:auto!important;touch-action:pan-x pan-y!important;overscroll-behavior:contain;background:#fff;scrollbar-width:thin}
.g8m-preview-stage{position:relative;width:1280px;height:800px;min-height:0;flex:none;background:white;overflow:visible}
.g8m-preview-stage iframe{position:absolute;top:0;left:0;display:block;width:1280px!important;min-width:1280px!important;max-width:none!important;min-height:0!important;height:800px;border:0;background:white;transform-origin:0 0}
.g8m-viewer-status{flex:none;padding:6px 12px;margin:0;color:var(--muted);font-size:11px;border-top:1px solid var(--line);background:var(--paper)}
.g8m-viewer-source-pane pre{flex:1;min-height:0;overflow:auto;margin:0;padding:13px 10px 24px 0!important;background:var(--side);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.7;tab-size:2;white-space:pre}
.g8m-viewer-source-pane code{display:block;min-width:max-content;counter-reset:source-line}
.g8m-source-line{display:block;min-height:1.7em;counter-increment:source-line;padding:0 20px 0 0}
.g8m-source-line::before{content:counter(source-line);display:inline-block;box-sizing:border-box;width:48px;margin-right:16px;padding-right:12px;text-align:right;color:var(--muted);opacity:.75;user-select:none;border-right:1px solid var(--line)}
.g8m-source-empty{display:block;color:var(--muted);padding-left:16px;white-space:normal}
.g8m-viewer-columns[data-view="output"] .g8m-source-choice{display:none}
.g8m-viewer-copy{padding:5px 9px}
.g8m-project-view-dialog>header{flex-shrink:0}
@media(max-width:850px){
 .g8m-project-view-dialog{height:100dvh;max-height:100dvh;width:100%;border-radius:0}
 .g8m-project-modal.g8m-project-view-modal{padding:0}
 .g8m-viewer-toolbar{gap:6px;padding:7px 9px}
 .g8m-viewer-tabs{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .g8m-viewer-tabs button{padding:8px 5px;font-size:11px}
 .g8m-viewer-lock{margin-left:auto;font-size:10px}
 .g8m-viewer-toolbar label select{max-width:min(38vw,170px);font-size:11px}
 .g8m-viewer-columns[data-view="split"]{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(165px,36%)}
 .g8m-viewer-columns[data-view="split"] .g8m-viewer-source-pane{border-left:0;border-top:1px solid var(--line)}
 .g8m-viewer-columns[data-view="split"] .g8m-viewer-output-pane{min-height:0}
 .g8m-viewer-columns[data-view="source"]{grid-template-rows:minmax(0,1fr)}
 .g8m-viewer-columns{grid-template-rows:minmax(0,1fr)!important}
 .g8m-viewer-columns[data-view="split"]{grid-template-rows:minmax(0,1fr) minmax(165px,36%)!important}
 .g8m-viewer-columns section+section{border-left:0}
}

/* V4.2: readable full source even when students save one very long line. */
.g8m-source-tools{display:flex;align-items:center;gap:5px}
.g8m-source-wrapped code{min-width:0!important}
.g8m-source-wrapped .g8m-source-line{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}

/* V4.3: show complete upload failures and progress instead of clipping them. */
.g8m-send-status{max-height:76px;min-height:0;overflow-y:auto;overflow-wrap:anywhere;line-height:1.4;padding-top:3px;padding-bottom:3px}
.g8m-send-status.error{font-weight:650}

/* G8Code Messages V4.5 — bounded chat viewport, live status, reactions and details.
   Keep the chat header/composer anchored. The conversation feed is the ONLY
   vertical scrolling surface of the chat screen. */
html,body{overflow:hidden;overscroll-behavior:none}
.g8m-app{min-height:0;max-height:100dvh}
.g8m-conversation{min-height:0;overflow:hidden;isolation:isolate}
.g8m-chat-head{position:relative;z-index:4;min-height:72px;height:auto;flex:0 0 72px}
.g8m-chat-identity{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;overflow:hidden}
.g8m-chat-identity small{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g8m-chat-identity .g8m-presence-line{font-weight:650;color:var(--muted)}
.g8m-chat-identity .g8m-presence-line.online{color:var(--success)}
.g8m-chat-identity .g8m-chat-extra{font-size:10px;opacity:.85}
.g8m-messages{min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y}
.g8m-compose{position:relative;z-index:4;min-height:48px;border-top:1px solid var(--line)}
.g8m-reply,.g8m-attachments,.g8m-project-selected,.g8m-send-status,.g8m-disclaimer{position:relative;flex-shrink:0;z-index:3}
.g8m-typing-indicator{display:flex;align-items:center;gap:8px;flex:0 0 30px;padding:3px 17px;background:var(--paper);color:var(--muted);font-size:11px;border-top:1px solid var(--line)}
.g8m-typing-dots{display:inline-flex;align-items:center;gap:3px;padding:6px 8px;border-radius:15px;background:var(--bubble)}
.g8m-typing-dots i{display:block;width:5px;height:5px;border-radius:50%;background:var(--accent);animation:g8m-dot-bounce 1.05s ease-in-out infinite alternate}
.g8m-typing-dots i:nth-child(2){animation-delay:.16s}.g8m-typing-dots i:nth-child(3){animation-delay:.32s}
@keyframes g8m-dot-bounce{0%{transform:translateY(1px);opacity:.5}100%{transform:translateY(-3px);opacity:1}}
.g8m-message{position:relative;isolation:isolate;overflow:visible;min-width:0}
.g8m-hover-actions{position:absolute;z-index:9;top:3px;left:calc(100% - 4px);display:flex;align-items:center;gap:2px;padding:4px;background:var(--paper);border:1px solid var(--line);border-radius:15px;box-shadow:0 8px 25px #0002;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(5px);transition:opacity .14s,transform .14s}
.g8m-message.own .g8m-hover-actions{left:auto;right:calc(100% - 4px)}
@media(hover:hover) and (pointer:fine){.g8m-message:hover .g8m-hover-actions,.g8m-message:focus-within .g8m-hover-actions{opacity:1;visibility:visible;pointer-events:auto;transform:none}}
.g8m-hover-actions button{display:grid;place-items:center;flex:none;width:30px;height:30px;border:0;border-radius:9px;background:transparent;color:var(--ink);font-size:19px}
.g8m-hover-actions button:hover{background:var(--accent-soft);color:var(--accent)}
.g8m-reaction-chip{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;width:max-content;min-height:23px;border-radius:99px;padding:2px 8px;background:var(--paper);border:1px solid var(--line);box-shadow:0 1px 6px #0001;color:var(--ink);font-size:12px}
.g8m-reaction-chip.mine{border-color:var(--accent);background:var(--accent-soft)}
.g8m-message.own .g8m-reaction-chip{align-self:flex-end}
.g8m-msg-more{border:0;background:transparent;color:var(--muted);font-weight:750;padding:1px 6px;font-size:15px;display:none}
.g8m-reaction-picker{position:fixed;z-index:6200;max-width:calc(100vw - 14px);width:max-content;min-width:230px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:0 12px 45px #0005;animation:g8m-popup .15s ease-out both}
.g8m-reaction-options{display:flex;justify-content:space-around;gap:1px}
.g8m-reaction-options button{flex:none;border:0;border-radius:14px;background:transparent;padding:7px 4px;font-size:25px;line-height:1.1;transition:transform .14s,background .14s}
.g8m-reaction-options button:hover,.g8m-reaction-options button.selected{background:var(--accent-soft);transform:translateY(-3px) scale(1.12)}
.g8m-reaction-actions{margin-top:4px;padding-top:7px;border-top:1px solid var(--line);display:flex;gap:5px}
.g8m-reaction-actions button{flex:1;border:0;background:var(--field);color:var(--ink);border-radius:10px;padding:8px;font-size:11px;font-weight:750}
@keyframes g8m-popup{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.g8m-details-overlay{position:fixed;inset:0;z-index:6500;display:flex;align-items:center;justify-content:center;background:rgba(5,12,27,.68);padding:16px}
.g8m-details-dialog{width:min(430px,100%);max-height:90dvh;overflow:auto;border-radius:19px;background:var(--paper);color:var(--ink);box-shadow:0 20px 70px #0005}
.g8m-details-dialog header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:16px 18px;font-size:15px}
.g8m-details-dialog header button{border:0;border-radius:9px;background:var(--field);color:var(--ink);font-size:24px;width:34px;height:34px}
.g8m-details-preview{margin:14px 16px 4px;border-radius:12px;background:var(--field);padding:12px;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.g8m-details-dialog dl{margin:8px 16px 18px}.g8m-details-dialog dl>div{display:flex;justify-content:space-between;align-items:start;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.g8m-details-dialog dt{color:var(--muted);font-size:12px;flex-shrink:0}.g8m-details-dialog dd{margin:0;text-align:right;font-size:12px;line-height:1.5;font-weight:650;overflow-wrap:anywhere}
@media(max-width:700px){
 html,body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden}
 .g8m-app{position:fixed;top:var(--g8m-visual-top,0px);left:0;right:0;height:var(--g8m-visual-height,100dvh);min-height:0;max-height:100dvh;overflow:hidden}
 .g8m-app[data-mobile-chat=true] .g8m-top{display:none}
 .g8m-workspace,.g8m-conversation{min-height:0;height:100%;overflow:hidden}
 .g8m-workspace.student .g8m-chat-head .g8m-mobile-back{display:grid;place-items:center}
 .g8m-chat-head{min-height:62px;flex:0 0 62px;padding:7px 10px}
 .g8m-chat-identity strong{font-size:13px}
 .g8m-chat-identity small{font-size:10px}
 .g8m-chat-identity .g8m-chat-extra{font-size:9px}
 .g8m-lock{display:none}
 .g8m-messages{flex:1 1 0;min-height:0;max-height:none;padding:13px 11px 20px}
 .g8m-message{max-width:89%;touch-action:pan-y}
 .g8m-hover-actions{display:none!important}
 .g8m-msg-more{display:inline-flex}
 .g8m-compose{padding:7px 9px calc(7px + env(safe-area-inset-bottom));gap:8px;align-items:center}
 .g8m-compose textarea{font-size:16px;line-height:20px;min-height:39px;max-height:min(95px,24dvh)}
 .g8m-typing-indicator{flex-basis:28px;padding:2px 11px}
 .g8m-disclaimer{display:none}
 .g8m-send-status{max-height:48px;overflow:hidden;overflow-wrap:anywhere;line-height:1.25;padding:2px 10px;word-break:break-word}
 .g8m-reaction-picker{min-width:min(290px,calc(100vw - 16px))}
 .g8m-reaction-options button{font-size:23px;padding:7px 3px}
 .g8m-details-overlay{align-items:flex-end;padding:0}
 .g8m-details-dialog{width:100%;max-height:82dvh;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom)}
}
@media(prefers-reduced-motion:reduce){.g8m-typing-dots i{animation:none}.g8m-hover-actions,.g8m-reaction-picker,.g8m-reaction-options button{transition:none;animation:none}}


/* V4.6 — Reaction + action controls anchored tightly to the actual bubble.
   This avoids the giant gap seen beside short messages; the metadata row is
   intentionally outside this anchor and does not shift it. */
.g8m-message .g8m-bubble-anchor{
 position:relative;display:flex;flex-direction:column;align-items:flex-start;
 width:max-content;max-width:100%;min-width:0;isolation:isolate;
}
.g8m-message.own .g8m-bubble-anchor{align-items:flex-end}
.g8m-message .g8m-bubble-anchor > :is(.g8m-text,.g8m-quoted,.g8m-photo-grid,.g8m-project-card,.g8m-ack-actions){max-width:100%}
.g8m-message .g8m-bubble-anchor .g8m-hover-actions{
 left:calc(100% - 1px);right:auto;top:50%;transform:translateY(calc(-50% + 4px));
 gap:0;padding:2px;border-radius:12px;white-space:nowrap;
 box-shadow:0 4px 16px #0002;
}
.g8m-message.own .g8m-bubble-anchor .g8m-hover-actions{left:auto;right:calc(100% - 1px)}
.g8m-message:hover .g8m-bubble-anchor .g8m-hover-actions,
.g8m-message:focus-within .g8m-bubble-anchor .g8m-hover-actions{transform:translateY(-50%)}
.g8m-message .g8m-bubble-anchor .g8m-hover-actions button{
 width:28px;height:29px;border-radius:8px;font-size:18px;
}
.g8m-message .g8m-bubble-anchor .g8m-reaction-chip{
 position:absolute;right:-7px;left:auto;bottom:-9px;z-index:2;
 min-height:21px;min-width:24px;padding:1px 5px;
 box-shadow:0 2px 9px #0003;
 font-size:13px;line-height:18px;
}
.g8m-message .g8m-reaction-chip[hidden]{display:none!important}
.g8m-message.has-reaction .g8m-bubble-anchor{margin-bottom:9px}
.g8m-message.has-reaction .g8m-msg-meta{margin-top:1px}
/* Keep the toolbar within easy reach on mid-size screens; mobile uses long press. */
@media(max-width:700px){
 .g8m-message .g8m-bubble-anchor .g8m-hover-actions{display:none!important}
 .g8m-message .g8m-bubble-anchor .g8m-reaction-chip{right:-4px;bottom:-8px}
}
@media(prefers-reduced-motion:reduce){.g8m-message .g8m-bubble-anchor .g8m-hover-actions{transition:none}}


/* G8Code Messages V5.0 — predictable fullscreen photo viewer.
   No forced image pixel size, no cropping, no page scroll while panning. */
.g8m-image-viewer{
 position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;
 padding:0;max-width:none;max-height:none;overflow:hidden;
 align-items:stretch;justify-content:flex-start;
 background:rgba(5,9,19,.97);color:#fff;overscroll-behavior:none;
}
.g8m-image-toolbar{
 flex:0 0 auto;min-height:60px;display:flex;gap:8px;align-items:center;
 justify-content:flex-end;padding:calc(9px + env(safe-area-inset-top)) 14px 9px;
 background:rgba(17,24,39,.93);z-index:2;
}
.g8m-image-hint{color:#bcc6d8;font-size:12px;margin-right:auto;white-space:nowrap}
.g8m-image-viewer .g8m-image-control{
 position:static;top:auto;right:auto;display:grid;place-items:center;
 height:40px;min-width:40px;padding:0 10px;border:1px solid #ffffff35;
 border-radius:10px;background:#ffffff16;color:#fff;font-weight:700;font-size:22px;
 cursor:pointer;touch-action:manipulation;
}
.g8m-image-viewer .g8m-image-control:hover{background:#ffffff30}
.g8m-image-viewer .g8m-image-control:focus-visible{outline:2px solid #b2a9ff;outline-offset:2px}
.g8m-image-viewer .g8m-image-control:disabled{opacity:.35;cursor:default}
.g8m-image-viewer .g8m-image-fit{font-size:13px;padding:0 13px}
.g8m-image-viewer .g8m-image-close{font-size:28px;margin-left:7px}
.g8m-image-zoom-label{font-size:13px;font-weight:700;color:#fff;min-width:72px;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.g8m-image-stage{
 position:relative;flex:1 1 auto;min-height:0;min-width:0;margin:0;
 overflow:hidden;touch-action:none;overscroll-behavior:contain;
 user-select:none;-webkit-user-select:none;cursor:default;
}
.g8m-image-stage.is-zoomed{cursor:grab}
.g8m-image-stage.is-zoomed:active{cursor:grabbing}
.g8m-image-viewer .g8m-image-stage img{
 position:absolute;left:50%;top:50%;display:block;
 width:var(--g8m-fit-width,auto);height:var(--g8m-fit-height,auto);
 max-width:none;max-height:none;min-width:0;min-height:0;object-fit:contain;
 transform-origin:center center;
 transform:translate(-50%,-50%) translate(var(--g8m-pan-x,0px),var(--g8m-pan-y,0px)) scale(var(--g8m-zoom,1));
 pointer-events:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;
 will-change:transform;image-rendering:auto;
}
.g8m-image-stage-status{
 position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
 background:#182337;border:1px solid #465370;padding:12px 16px;
 border-radius:12px;color:white;text-align:center;max-width:85vw;
}
@media(max-width:700px){
 .g8m-image-toolbar{min-height:52px;gap:6px;padding:calc(7px + env(safe-area-inset-top)) 8px 7px}
 .g8m-image-hint{display:none}
 .g8m-image-viewer .g8m-image-control{height:36px;min-width:36px;padding:0 7px}
 .g8m-image-viewer .g8m-image-fit{font-size:12px;padding:0 9px}
 .g8m-image-zoom-label{font-size:12px;min-width:66px}
 .g8m-image-viewer .g8m-image-close{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){
 .g8m-image-viewer *{scroll-behavior:auto}
}

/* V5.2 — Anchor desktop hover tools and reactions to the visible image/text/card,
   never to the wider acknowledgement, quote, metadata, or message row. */
.g8m-bubble-anchor > .g8m-action-target{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;align-self:flex-start;width:fit-content;max-width:100%;min-width:0;isolation:isolate}
.g8m-message.own .g8m-bubble-anchor > .g8m-action-target{align-self:flex-end;align-items:flex-end}
.g8m-action-target > :is(.g8m-text,.g8m-photo-grid,.g8m-project-card,.g8m-quoted){max-width:100%}
@media(min-width:701px) and (hover:hover) and (pointer:fine){
 .g8m-action-target > .g8m-hover-actions{top:50%;left:calc(100% + 3px);right:auto;transform:translateY(-50%);margin:0}
 .g8m-message.own .g8m-action-target > .g8m-hover-actions{right:calc(100% + 3px);left:auto}
 .g8m-action-target > .g8m-reaction-chip{right:-6px;bottom:-8px}
}
/* Camera preview is a separate overlay; video streams stop on close. */
.g8m-camera-overlay{position:fixed;inset:0;background:rgba(5,10,22,.83);z-index:6800;display:grid;place-items:center;padding:14px}
.g8m-camera-dialog{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:20px;width:min(570px,100%);max-height:94dvh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 15px 60px #0008}
.g8m-camera-dialog header{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line)}
.g8m-camera-dialog h2{font-size:17px;margin:0}
.g8m-camera-dialog header button{background:var(--field);color:var(--ink);border:0;border-radius:9px;width:34px;height:34px;font-size:23px}
.g8m-camera-stage{background:#070b13;min-height:200px;display:grid;place-items:center;overflow:hidden}
.g8m-camera-stage video{display:block;width:100%;height:auto;max-height:60dvh;object-fit:contain}
.g8m-camera-status{font-size:12px;color:var(--muted);padding:10px 18px;margin:0;line-height:1.5}
.g8m-camera-dialog footer{display:flex;gap:9px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line)}
.g8m-camera-dialog footer button{border:1px solid var(--line);padding:10px 15px;background:var(--field);color:var(--ink);border-radius:10px;font-size:13px;font-weight:700}
.g8m-camera-dialog footer #g8mCameraCapture{background:#6659e8;color:#fff;border-color:#6659e8}
@media(max-width:700px){.g8m-camera-dialog{max-height:90dvh}.g8m-camera-dialog footer{padding-bottom:calc(12px + env(safe-area-inset-bottom))}}

/* Explicit sizing avoids a percentage-width feedback loop on photo-only bubbles.
   The loaded image updates --g8m-action-width to its natural fitted width. */
.g8m-action-target:has(> .g8m-photo-grid:not(.is-multiple)){width:min(100%,var(--g8m-action-width,190px));}
.g8m-action-target:has(> .g8m-photo-grid.is-multiple){width:min(100%,390px)}
.g8m-action-target > .g8m-photo-grid{width:100%}
@media(max-width:700px){.g8m-action-target:has(> .g8m-photo-grid.is-multiple){width:min(100%,330px)}}

/* The parent must also own the explicit photo width. Otherwise its flex
   max-content sizing can shrink the image to the acknowledgement controls. */
.g8m-message .g8m-bubble-anchor:has(> .g8m-action-target > .g8m-photo-grid:not(.is-multiple)){width:min(100%,var(--g8m-action-width,190px))}
.g8m-message .g8m-bubble-anchor:has(> .g8m-action-target > .g8m-photo-grid.is-multiple){width:min(100%,390px)}
@media(max-width:700px){.g8m-message .g8m-bubble-anchor:has(> .g8m-action-target > .g8m-photo-grid.is-multiple){width:min(100%,330px)}}

/* Desktop only: allow the photo's intrinsic rendered width to determine the
   message flex item's minimum; this avoids acknowledgement labels controlling
   its shrink-to-fit width. Phone keeps its pre-existing bubble layout. */
@media(min-width:701px) and (hover:hover) and (pointer:fine){
 .g8m-message:has(.g8m-photo-grid:not(.is-multiple)){min-width:var(--g8m-action-width,190px)}
}
@media(max-width:700px){
 .g8m-bubble-anchor > .g8m-action-target{display:contents}
}

/* The camera dialog lives outside the chat root so it can cover the entire
   viewport; explicitly carry the active light/dark palette onto that overlay. */
.g8m-camera-overlay{--paper:#fff;--field:#f0f3fa;--ink:#202b46;--muted:#77849b;--line:#e4e9f3}
.g8m-camera-overlay[data-theme="dark"]{--paper:#161e30;--field:#222d43;--ink:#f2f5ff;--muted:#abb6ca;--line:#33405a}
@media(max-width:700px){
 /* Preserve the original phone bubble size/long-press layout. */
 .g8m-message .g8m-bubble-anchor:has(> .g8m-action-target > .g8m-photo-grid){width:max-content}
 .g8m-action-target > .g8m-photo-grid:not(.is-multiple){width:var(--g8m-action-width,190px);max-width:100%}
 .g8m-action-target > .g8m-photo-grid.is-multiple{width:min(100%,330px)}
}

/* V5.3: a local-only, instant sender preview. The backend is authoritative. */
.g8m-pending-photo{opacity:1}
.g8m-local-photo-grid{display:flex;flex-direction:column;align-items:flex-end;gap:6px;width:fit-content;max-width:100%;min-width:0}
.g8m-local-photo-grid.is-multiple{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,390px);align-items:start}
.g8m-local-photo-grid img{display:block;width:auto;height:auto;max-width:min(100%,390px);max-height:450px;object-fit:contain;border-radius:13px;background:var(--field)}
.g8m-local-photo-grid.is-multiple img{max-width:100%;max-height:290px;width:100%;height:auto;object-fit:contain}
.g8m-photo-job-status{display:flex;align-items:center;flex-wrap:wrap;gap:7px;max-width:100%;padding:6px 8px;border:1px solid var(--line);background:var(--field);border-radius:12px;color:var(--muted);font-size:11px;line-height:1.4}
.g8m-photo-job-status.in-progress::before{content:'';width:11px;height:11px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:g8m-photo-sending-spin .85s linear infinite;flex:none}
@keyframes g8m-photo-sending-spin{to{transform:rotate(360deg)}}
.g8m-photo-job-status-text{overflow-wrap:anywhere;min-width:0;flex:1}
.g8m-photo-job-status button{border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font-size:11px;font-weight:700;padding:6px 9px}
.g8m-photo-job-status .g8m-photo-retry{color:var(--accent);border-color:var(--accent)}
.g8m-pending-photo .g8m-bubble-anchor{max-width:min(100%,390px)}
@media(max-width:700px){.g8m-local-photo-grid.is-multiple{width:min(100%,330px)}}
@media(prefers-reduced-motion:reduce){.g8m-photo-job-status.in-progress::before{animation:none}}

/* V5.4 — clickable reply quotes, compact image stacks, and photo gallery. */
.g8m-quoted.g8m-quote-link{display:block;appearance:none;font:inherit;font-size:11px;color:var(--muted);text-align:left;cursor:pointer;border-top:0;border-right:0;border-bottom:0;line-height:1.5;white-space:normal}
.g8m-quoted.g8m-quote-link:hover{background:var(--field);filter:brightness(1.06)}
.g8m-quoted.g8m-quote-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@keyframes g8m-jump-pulse{0%{transform:scale(1);filter:brightness(1)}28%{transform:scale(1.035);filter:brightness(1.13)}60%{transform:scale(1.025);filter:brightness(1.09)}100%{transform:scale(1);filter:brightness(1)}}
.g8m-message.g8m-jump-focus>.g8m-bubble-anchor{animation:g8m-jump-pulse 1.15s ease-out;outline:2px solid var(--accent);outline-offset:5px;border-radius:14px}
.g8m-photo-stack{position:relative;isolation:isolate;max-width:100%;width:min(100%,var(--g8m-stack-width,190px));padding:0 7px 9px 0;box-sizing:content-box}
.g8m-photo-stack::before,.g8m-photo-stack::after{content:'';position:absolute;top:5px;left:5px;right:2px;bottom:5px;border-radius:13px;background:var(--field);border:1px solid var(--line);pointer-events:none}
.g8m-photo-stack::before{transform:translate(5px,4px);z-index:-2;opacity:.55}
.g8m-photo-stack::after{transform:translate(2px,2px);z-index:-1;opacity:.75}
.g8m-photo-stack>.g8m-photo-grid{position:relative;z-index:1;width:100%;max-width:100%}
.g8m-photo-stack>.g8m-photo-grid>button{max-width:100%;width:100%}
.g8m-photo-count{position:absolute;right:13px;bottom:16px;z-index:4;background:#101729d9;color:white;font-size:11px;font-weight:700;padding:5px 9px;border:1px solid #ffffff30;border-radius:999px;pointer-events:none;white-space:nowrap}
.g8m-local-photo-front{position:relative;display:block;width:min(100%,280px);max-width:100%;border:0;background:var(--field);padding:0;border-radius:14px;cursor:zoom-in}
.g8m-local-photo-front>img{display:block;max-width:100%;max-height:330px;width:auto;height:auto;object-fit:contain;border-radius:13px}
.g8m-local-photo-front.is-photo-stack{margin:0 8px 8px 0;box-shadow:4px 4px 0 var(--field),7px 7px 0 var(--line)}
.g8m-local-photo-front .g8m-photo-count{bottom:8px;right:8px}
.g8m-image-gallery-count{color:white;font-variant-numeric:tabular-nums;font-weight:700;font-size:12px;text-align:center;min-width:44px;white-space:nowrap}
.g8m-image-viewer .g8m-gallery-nav{font-size:29px;line-height:1}
.g8m-image-viewer [hidden]{display:none!important}
@media(max-width:700px){
 .g8m-photo-stack{max-width:calc(100% - 8px)}
 .g8m-image-gallery-count{min-width:33px;font-size:11px}
 .g8m-image-viewer .g8m-gallery-nav{height:34px;min-width:29px;padding:0 4px;font-size:24px}
}
@media(prefers-reduced-motion:reduce){.g8m-message.g8m-jump-focus>.g8m-bubble-anchor{animation:none}}


/* V5.5 — Mobile Sending photos use the same compact, natural proportions as
   their confirmed chat thumbnails. Desktop sizing and all viewer gestures stay
   unchanged. The temporary placeholder is bounded even before image decode. */
@media (max-width:700px){
 .g8m-pending-photo .g8m-local-photo-grid,
 .g8m-pending-photo .g8m-local-photo-grid.is-multiple{
  display:flex;flex-direction:column;align-items:flex-end;
  width:fit-content;max-width:100%;min-width:0;
 }
 .g8m-pending-photo .g8m-local-photo-front{
  flex:none;box-sizing:border-box;display:block;overflow:hidden;
  width:var(--g8m-pending-width,min(50vw,180px));
  height:var(--g8m-pending-height,auto);
  aspect-ratio:var(--g8m-pending-aspect,4 / 3);
  max-width:100%;max-height:300px;
 }
 .g8m-pending-photo .g8m-local-photo-front>img,
 .g8m-pending-photo .g8m-local-photo-grid.is-multiple .g8m-local-photo-front>img{
  display:block;width:100%;height:100%;max-width:none;max-height:none;
  object-fit:contain;object-position:center;
 }
 .g8m-pending-photo .g8m-photo-job-status{max-width:min(100%,270px)}
}


/* G8Code Messages V5.6 — genuine photo pile and clearly visible reply focus.
   Only the front image is a click target; rear photos never cover it. */
.g8m-photo-stack{
 position:relative;isolation:isolate;box-sizing:content-box;display:block;
 width:min(100%,var(--g8m-stack-width,190px));max-width:calc(100% - 15px);
 padding:17px 15px 5px 0;
}
.g8m-photo-stack::before,.g8m-photo-stack::after{display:none!important}
.g8m-stack-back{
 position:absolute;top:17px;bottom:5px;left:0;right:15px;
 overflow:hidden;border-radius:13px;background:var(--field);
 border:1px solid var(--line);pointer-events:none;
 box-shadow:0 2px 11px #0003;
}
.g8m-stack-back-1{z-index:1;transform:translate(7px,-8px)}
.g8m-stack-back-2{z-index:0;transform:translate(14px,-15px)}
.g8m-stack-back img{display:block;width:100%;height:100%;object-fit:cover;opacity:1}
.g8m-stack-back img:not([src]){visibility:hidden}
.g8m-photo-stack>.g8m-photo-grid,
.g8m-photo-stack>.g8m-local-photo-front{position:relative;z-index:2}
.g8m-photo-stack>.g8m-photo-grid{max-width:100%;width:100%}
.g8m-photo-stack>.g8m-photo-grid>button{width:100%;max-width:100%}
.g8m-photo-stack .g8m-photo-count{
 position:absolute;right:19px;bottom:12px;z-index:4;
 background:rgba(14,22,40,.82);border:1px solid #ffffff44;
 border-radius:999px;color:#fff;pointer-events:none;
 padding:2px 6px;font-size:9px;line-height:14px;font-weight:750;
 box-shadow:0 1px 5px #0003;
}
.g8m-local-photo-grid.is-multiple{display:block;width:fit-content;max-width:100%}
.g8m-pending-stack>.g8m-local-photo-front{
 box-sizing:border-box;margin:0;box-shadow:none;display:block;
 width:var(--g8m-pending-width,185px);height:var(--g8m-pending-height,auto);
 aspect-ratio:var(--g8m-pending-aspect,4 / 3);max-height:340px;
 border-radius:13px;overflow:hidden;
}
.g8m-pending-stack>.g8m-local-photo-front>img{
 display:block;width:100%;height:100%;max-width:100%;max-height:100%;
 object-fit:contain;border-radius:13px;
}
/* The old animation ran during smooth scrolling. This pulse only starts
   AFTER the original is positioned in the viewport. Glow then fades away. */
@keyframes g8m-v56-reply-focus{
 0%{transform:scale(1);filter:brightness(1)}
 19%{transform:scale(1.045);filter:brightness(1.17)}
 50%{transform:scale(1.035);filter:brightness(1.10)}
 100%{transform:scale(1);filter:brightness(1)}
}
.g8m-message.g8m-jump-focus>.g8m-bubble-anchor{
 transform-origin:left center;
 animation:g8m-v56-reply-focus 1.5s cubic-bezier(.2,.68,.3,1) both!important;
 outline:3px solid var(--accent);outline-offset:5px;
 box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 18%,transparent),
            0 0 30px color-mix(in srgb,var(--accent) 32%,transparent);
 background:color-mix(in srgb,var(--accent) 12%,transparent);
 border-radius:14px;
}
.g8m-message.own.g8m-jump-focus>.g8m-bubble-anchor{transform-origin:right center}
@media(max-width:700px){
 .g8m-photo-stack{max-width:calc(100% - 15px)}
 .g8m-pending-photo .g8m-pending-stack>.g8m-local-photo-front{
  width:var(--g8m-pending-width,185px);height:var(--g8m-pending-height,auto);
  max-height:300px;
 }
 .g8m-message.g8m-jump-focus>.g8m-bubble-anchor{
  outline-offset:3px;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 20%,transparent);
 }
}
@media(prefers-reduced-motion:reduce){
 .g8m-message.g8m-jump-focus>.g8m-bubble-anchor{animation:none!important}
}


/* G8Code Messages V5.7 — contextual long-press focus mode. The real message
   stays in its scrolling feed; a same-sized sharp clone is floated over a
   subtle blur. Focus layers are entirely local UI, not another DB listener. */
.g8m-message-focus{position:fixed;inset:0;z-index:6050;pointer-events:none}
.g8m-focus-backdrop{
 position:fixed;inset:0;width:100%;height:100%;margin:0;padding:0;
 border:0;border-radius:0;display:block;pointer-events:auto;
 background:rgba(6,12,27,.47);backdrop-filter:blur(4px);
 -webkit-backdrop-filter:blur(4px);cursor:default;
 animation:g8m-focus-reveal .16s ease-out both;
}
.g8m-focus-shell{
 position:fixed!important;z-index:1;max-width:none!important;min-width:0!important;
 width:max-content;align-self:auto!important;overflow:visible;
 pointer-events:none;filter:drop-shadow(0 8px 20px #0005);
 animation:g8m-focus-bubble-reveal .18s ease-out both;
}
.g8m-focus-shell>.g8m-bubble-anchor{max-width:none!important;min-width:0}
.g8m-focus-shell button,.g8m-focus-shell a{pointer-events:none!important}
.g8m-reaction-picker[data-focus-mode="true"]{
 z-index:6200;box-shadow:0 14px 38px #0008;
 border-color:color-mix(in srgb,var(--accent) 30%,var(--line));
}
.g8m-message.g8m-longpress-armed{user-select:none;-webkit-user-select:none}
@media(max-width:700px){
 .g8m-focus-shell .g8m-action-target{display:contents}
 .g8m-focus-shell .g8m-bubble-anchor{max-width:none!important}
 .g8m-focus-backdrop{background:rgba(5,10,24,.51);backdrop-filter:blur(3.5px);-webkit-backdrop-filter:blur(3.5px)}
 .g8m-reaction-picker[data-focus-mode="true"]{max-width:calc(100vw - 16px)}
}
@keyframes g8m-focus-reveal{from{opacity:0}to{opacity:1}}
@keyframes g8m-focus-bubble-reveal{from{opacity:.75}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
 .g8m-focus-backdrop,.g8m-focus-shell{animation:none!important;transition:none!important}
}


/* V5.11 — mobile chat theme control next to Refresh (teacher and student).
   Main header remains hidden during mobile chat to save screen space. */
.g8m-chat-theme{display:none;place-items:center;width:32px;height:32px;min-width:32px;
 border:1px solid var(--line);border-radius:10px;background:var(--field);
 color:var(--ink);font-size:21px;line-height:1;flex:none}
.g8m-chat-theme:hover,.g8m-chat-theme:focus-visible{border-color:var(--accent);color:var(--accent)}
@media(max-width:700px){
 .g8m-chat-head{gap:8px}
 .g8m-chat-theme:not([hidden]){display:grid}
 .g8m-chat-theme,.g8m-refresh{width:34px;height:34px;min-width:34px}
}
/* V5.11 — timestamps and Sent/Seen only. Reply/Details stay on hover/long press. */
.g8m-msg-meta{gap:6px;min-height:13px;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap}
.g8m-message.own>.g8m-msg-meta{justify-content:flex-end}


/* G8Code Messages V5.13 — date + first-message time divider, both phone and desktop.
   No additional network or database reads: constructed from existing timestamps. */
.g8m-messages>.g8m-date{
 display:flex;align-items:center;justify-content:center;gap:10px;
 align-self:stretch;width:100%;padding:5px 0;margin:9px 0 7px;
 text-align:center;min-width:0;line-height:1.3;
}
.g8m-date::before,.g8m-date::after{
 content:"";display:block;flex:1 1 30px;max-width:150px;min-width:8px;
 border-top:1px solid var(--line);
}
.g8m-date-label{
 display:inline-block;flex:0 1 auto;max-width:100%;min-width:0;
 padding:6px 12px;border-radius:999px;
 border:1px solid var(--line);background:var(--field);
 font-size:10px;font-weight:650;letter-spacing:.01em;color:var(--muted);
 white-space:normal;overflow-wrap:normal;
}
/* Desktop continues showing time and Seen below every message. */
@media(max-width:700px){
 /* Only ordinary text messages hide their metadata; picture/group/project metadata is always visible. */
 .g8m-message.g8m-text-only:not(.g8m-meta-revealed)>.g8m-msg-meta{display:none}
 .g8m-message.g8m-text-only .g8m-text-tap{
  cursor:pointer;-webkit-tap-highlight-color:transparent;
 }
 .g8m-message.g8m-text-only .g8m-text-tap:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
 }
 .g8m-message.g8m-meta-revealed>.g8m-msg-meta{animation:g8m-v513-meta-in .16s ease-out}
 .g8m-date-label{font-size:9.5px;padding:5px 9px}
}
@keyframes g8m-v513-meta-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.g8m-message.g8m-meta-revealed>.g8m-msg-meta{animation:none}}


/* V5.14 — enforce truly hidden metadata on mobile text-only messages.
   V5.13 shipped with V5.11 asset URLs, which could leave the old CSS cached. */
.g8m-msg-meta[hidden]{display:none!important}
@media(max-width:700px){
 .g8m-messages .g8m-message.g8m-text-only > .g8m-msg-meta{display:none!important}
 .g8m-messages .g8m-message.g8m-text-only.g8m-meta-revealed > .g8m-msg-meta:not([hidden]){display:flex!important}
}
/* Compact, centered floating down-arrow exactly above the composer. */
.g8m-compose{overflow:visible}
.g8m-compose .g8m-scroll-latest{
 position:absolute;left:50%;bottom:calc(100% + 10px);
 transform:translateX(-50%);width:34px;height:34px;min-width:34px;
 padding:0;display:grid;place-items:center;border-radius:50%;
 border:1px solid var(--line);background:var(--paper);color:var(--ink);
 box-shadow:0 3px 13px rgba(0,0,0,.18);z-index:30;
 font-size:17px;line-height:1;cursor:pointer;
 transition:background .15s,box-shadow .15s,opacity .15s;
}
.g8m-compose .g8m-scroll-latest[hidden]{display:none!important}
.g8m-compose .g8m-scroll-latest:hover,
.g8m-compose .g8m-scroll-latest:focus-visible{background:var(--field);box-shadow:0 4px 18px rgba(0,0,0,.22);outline-color:var(--accent)}
@media(max-width:700px){
 .g8m-compose .g8m-scroll-latest{width:33px;height:33px;min-width:33px;bottom:calc(100% + 8px);font-size:16px}
}
@media(prefers-reduced-motion:reduce){.g8m-compose .g8m-scroll-latest{transition:none}}


/* V5.15: prevent browser scroll anchoring from fighting our explicit restoration
   while rebuilding the chat tree; no mutation-triggered scroll loops. */
.g8m-messages{scroll-behavior:auto;overflow-anchor:none}
.g8m-deleted-bubble{background:var(--field);border:1px solid var(--line);color:var(--muted);
 padding:10px 13px;border-radius:16px;font-size:12px;font-style:italic;max-width:100%;}
.g8m-message.own .g8m-deleted-bubble{border-radius:16px 16px 5px 16px}
.g8m-message:not(.own) .g8m-deleted-bubble{border-radius:16px 16px 16px 5px}
.g8m-message.g8m-deleted-message .g8m-reaction-chip{display:none!important}
.g8m-deleted-message .g8m-msg-meta{font-size:10px}
.g8m-details-delete{display:block;margin:12px 0 0 auto;padding:9px 13px;border:1px solid var(--line);
 border-radius:10px;color:var(--ink);background:var(--field);cursor:pointer;font:inherit;font-size:12px}
.g8m-delete-dialog p{line-height:1.5;font-size:13px;color:var(--ink)}
.g8m-delete-dialog small{color:var(--muted);display:block;line-height:1.5;margin-top:10px}
.g8m-delete-choices{display:flex;flex-direction:column;gap:9px}
.g8m-delete-choices button{border:1px solid var(--line);background:var(--field);color:var(--ink);
 border-radius:10px;min-height:42px;padding:9px 14px;text-align:left;font:inherit;cursor:pointer}
.g8m-delete-choices #g8mDeleteForEveryone{color:#d54b53;font-weight:700}
.g8m-delete-choices #g8mDeleteCancel{background:transparent;text-align:center}
.g8m-delete-choices button[hidden],.g8m-reaction-actions button[hidden],.g8m-reaction-options[hidden]{display:none!important}


/* V5.16 — clean contextual More actions. Danger is its own subtle row, not
   squeezed into three tiny equal-width buttons. */
.g8m-reaction-picker{min-width:245px}
.g8m-reaction-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding-top:9px;margin-top:8px}
.g8m-reaction-actions button{min-height:36px;padding:8px 10px;font-size:11.5px;white-space:nowrap}
.g8m-reaction-delete{display:flex;gap:8px;align-items:center;justify-content:center;
 width:100%;margin-top:7px;padding:9px 12px;border:1px solid transparent;
 border-radius:10px;background:transparent;color:#db5265;font-size:11.5px;font-weight:700;
 cursor:pointer;transition:background .15s,border-color .15s}
.g8m-reaction-delete:hover,.g8m-reaction-delete:focus-visible{
 background:rgba(222,71,92,.10);border-color:rgba(222,71,92,.18);outline:none}
.g8m-reaction-delete[hidden]{display:none!important}
.g8m-reaction-delete>span{font-size:17px;line-height:1}
/* V5.16 — polished compact delete dialog, same usable spacing on phones and desktop. */
.g8m-delete-overlay{padding:20px 14px;overflow:auto;overscroll-behavior:contain}
.g8m-delete-dialog{width:min(410px,100%);max-height:min(92dvh,720px);overflow-y:auto;
 border:1px solid var(--line);border-radius:20px;background:var(--paper);
 box-shadow:0 22px 85px rgba(2,7,24,.38)}
.g8m-delete-dialog .g8m-delete-header{padding:17px 19px 15px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line)}
.g8m-delete-header-icon{width:36px;height:36px;flex:none;display:grid;place-items:center;
 border-radius:11px;background:var(--field);color:var(--ink);font-size:23px}
.g8m-delete-heading{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.g8m-delete-heading strong{font-size:15px;font-weight:750;line-height:1.2}
.g8m-delete-heading>span{font-size:11px;color:var(--muted);line-height:1.35}
.g8m-delete-dialog .g8m-delete-header #g8mDeleteClose{width:31px;height:31px;flex:none;
 display:grid;place-items:center;font-size:21px;border-radius:50%;background:var(--field);
 color:var(--ink)}
.g8m-delete-body{padding:16px 18px 12px}
.g8m-delete-dialog .g8m-delete-body>p{margin:0 0 14px;font-size:12px;line-height:1.5;color:var(--muted)}
.g8m-delete-choices{display:grid;gap:9px}
.g8m-delete-choices button{width:100%;display:flex;align-items:center;gap:10px;text-align:left;
 border:1px solid var(--line);border-radius:13px;padding:11px 12px;min-height:61px;
 color:var(--ink);background:var(--field);transition:background .15s,border-color .15s}
.g8m-delete-choices button:hover,.g8m-delete-choices button:focus-visible{background:var(--accent-soft);border-color:var(--accent);outline:none}
.g8m-delete-option-icon{display:grid;place-items:center;width:31px;height:31px;flex:none;
 border-radius:9px;background:var(--paper);font-size:18px;line-height:1;color:var(--muted)}
.g8m-delete-option-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.g8m-delete-option-copy strong{font-size:12.5px;line-height:1.15;font-weight:750}
.g8m-delete-dialog .g8m-delete-option-copy small{margin:0;display:block;color:var(--muted);
 font-size:10.5px;line-height:1.4}
.g8m-delete-option-chevron{font-size:21px;color:var(--muted);line-height:1}
.g8m-delete-choices #g8mDeleteForEveryone{color:#c34155;
 border-color:rgba(222,71,92,.20);background:rgba(222,71,92,.045)}
.g8m-delete-choices #g8mDeleteForEveryone .g8m-delete-option-icon{color:#c34155;
 background:rgba(222,71,92,.10)}
.g8m-delete-choices #g8mDeleteForEveryone .g8m-delete-option-copy strong{color:#c34155}
.g8m-delete-choices #g8mDeleteForEveryone:hover,.g8m-delete-choices #g8mDeleteForEveryone:focus-visible{
 border-color:rgba(222,71,92,.65);background:rgba(222,71,92,.10)}
.g8m-delete-footer{margin:0;padding:3px 18px 17px;display:grid;gap:9px}
.g8m-delete-footer #g8mDeleteCancel{background:var(--paper);color:var(--ink);
 border:1px solid var(--line);padding:10px 13px;min-height:39px;
 border-radius:11px;font-size:12px;font-weight:650;cursor:pointer}
.g8m-delete-footer #g8mDeleteCancel:hover{background:var(--field)}
.g8m-delete-footer p{font-size:10px;line-height:1.45;color:var(--muted);
 margin:0;padding:0 2px;text-align:center}
@media(max-width:700px){
 .g8m-delete-overlay{align-items:flex-end;justify-content:center;padding:0}
 .g8m-delete-dialog{width:100%;max-height:86dvh;border-radius:20px 20px 0 0;
  padding-bottom:env(safe-area-inset-bottom);border-bottom:0}
 .g8m-delete-body{padding:16px 16px 12px}
 .g8m-delete-footer{padding:3px 16px 14px}
}
@media(prefers-reduced-motion:reduce){.g8m-reaction-delete,.g8m-delete-choices button{transition:none}}


/* V5.17 — compact Messenger-style spacing for MOBILE TEXT. Hiding metadata
   must also remove its reserved layout space. Keep photo/project timestamps
   and larger boundaries between different participants and date dividers. */
@media(max-width:700px){
 .g8m-messages{gap:0}
 .g8m-messages>.g8m-message{margin:0}
 .g8m-messages>.g8m-message + .g8m-message{margin-top:8px}
 .g8m-messages>.g8m-message.g8m-text-only + .g8m-message.g8m-text-only{margin-top:3px}
 .g8m-messages>.g8m-message.own + .g8m-message:not(.own),
 .g8m-messages>.g8m-message:not(.own) + .g8m-message.own{margin-top:10px}
 .g8m-messages>.g8m-date{margin:13px 0 8px}
 .g8m-messages>.g8m-load-older{margin-bottom:9px}
 .g8m-message.g8m-text-only:not(.g8m-meta-revealed)>.g8m-msg-meta{display:none!important}
}
/* A small unread dot overlays the SAME 34px circle; no oversized floating UI. */
.g8m-compose .g8m-scroll-latest .g8m-new-message-count{
 position:absolute;top:-5px;right:-6px;min-width:15px;height:15px;
 border-radius:999px;padding:0 3px;display:grid;place-items:center;
 font-size:9px;font-weight:750;line-height:1;color:#fff;background:#6758e9;
 border:1.5px solid var(--paper);box-sizing:border-box;
 box-shadow:0 1px 4px rgba(0,0,0,.14);pointer-events:none;
}
.g8m-compose .g8m-scroll-latest .g8m-new-message-count[hidden]{display:none!important}


/* V5.18 — Messenger-style consecutive message groups (display only).
   Reserve a stable gutter for all incoming bubbles so letters never move
   neighboring bubbles when the group grows or after a Seen/reaction update. */
.g8m-messages>.g8m-message:not(.own){padding-left:37px;max-width:min(89%,500px)}
.g8m-message:not(.own) .g8m-thread-avatar{
 position:absolute;left:-36px;bottom:1px;width:28px;height:28px;
 display:grid;place-items:center;border-radius:50%;z-index:1;
 background:color-mix(in srgb,var(--accent) 16%,var(--paper));
 border:1px solid color-mix(in srgb,var(--accent) 12%,var(--line));
 color:var(--accent);font-size:12px;line-height:1;font-weight:800;
 box-shadow:0 1px 4px #0001;pointer-events:none;user-select:none;
}
.g8m-message:not(.own) .g8m-thread-avatar.is-teacher{
 background:#f3ddf5;color:#8547a1;border-color:#ebcbee;
}
.g8m-app[data-theme=dark] .g8m-thread-avatar.is-teacher{
 background:#4b355a;color:#f0c9ff;border-color:#655076;
}
/* Message group borders: joined left/right corners resemble Messenger. */
.g8m-message.g8m-group-has-next:not(.own) .g8m-text{border-bottom-left-radius:5px}
.g8m-message.g8m-group-joined:not(.own) .g8m-text{border-top-left-radius:5px}
.g8m-message.g8m-group-has-next.own .g8m-text{border-bottom-right-radius:5px}
.g8m-message.g8m-group-joined.own .g8m-text{border-top-right-radius:5px}
/* On desktop, remove the permanent 10px flex gap so grouped rows can sit
   within 3px. Mobile already uses zero gap since V5.17. */
@media(min-width:701px){
 .g8m-messages{gap:0}
 .g8m-messages>.g8m-message{margin-top:10px}
 .g8m-messages>.g8m-message.g8m-group-joined{margin-top:3px}
 .g8m-messages>.g8m-date{margin:14px 0 8px}
}
@media(max-width:700px){
 .g8m-messages>.g8m-message:not(.own){padding-left:35px;max-width:91%}
 .g8m-message:not(.own) .g8m-thread-avatar{left:-34px;width:27px;height:27px}
 .g8m-messages>.g8m-message.g8m-group-joined{margin-top:3px}
 /* Keep some breathing space for photo metadata without changing the ID grouping. */
 .g8m-messages>.g8m-message.g8m-group-joined:has(.g8m-photo-grid),
 .g8m-messages>.g8m-message.g8m-group-joined:has(.g8m-local-photo-grid){margin-top:6px}
}


/* V5.19 — Saved-project acknowledgment, matching the photo workflow.
   Both teacher controls and student chips remain visible on phone: the
   text-only metadata hiding rule never applies to shared project messages. */
.g8m-project-ack-actions{margin-top:3px;align-self:flex-start;max-width:100%}
.g8m-message.own .g8m-project-ack-actions{align-self:flex-end}
.g8m-project-ack-chip{display:inline-flex;align-items:center;align-self:flex-start;
 font-size:10px;font-weight:700;line-height:1.4;max-width:100%;white-space:normal;
 color:var(--success);overflow-wrap:anywhere;margin-top:3px}
.g8m-message.own .g8m-project-ack-chip{align-self:flex-end}
.g8m-project-ack-chip.is-pending{font-weight:500;color:var(--muted)}
@media(max-width:700px){
 .g8m-project-ack-actions{gap:5px;margin-top:3px}
 .g8m-project-ack-actions button{min-height:29px;padding:5px 8px;font-size:10px}
 .g8m-project-ack-chip{font-size:10px;margin-top:2px}
}


/* G8Code Messenger V4C-16 — touch-following, three-panel photo carousel.
   Neighbors peek into view; slides ease into position without replacing the
   single existing full-image zoom surface or breaking private photo caching. */
.g8m-feed-state[hidden]{display:none!important}
.g8m-image-stage{
 --g8m-gallery-stage-width:100vw;
 --g8m-gallery-peek:0px;
 --g8m-gallery-gap:0px;
 background:#020308;
}
.g8m-image-stage.has-gallery{
 --g8m-gallery-peek:clamp(38px,9vw,76px);
 --g8m-gallery-gap:12px;
}
.g8m-image-track{
 position:absolute;left:50%;top:0;height:100%;width:max-content;
 display:flex;gap:var(--g8m-gallery-gap);align-items:stretch;
 transform:translate3d(calc(-50% + var(--g8m-gallery-shift,0px)),0,0);
 will-change:transform;pointer-events:none;
}
.g8m-image-frame{
 position:relative;flex:none;height:100%;min-width:1px;
 width:calc(var(--g8m-gallery-stage-width) - var(--g8m-gallery-peek) - var(--g8m-gallery-peek));
 display:grid;place-items:center;overflow:hidden;
}
.g8m-image-neighbor{opacity:.74;transition:opacity .2s ease}
.g8m-image-neighbor.is-empty{opacity:0}
.g8m-image-viewer .g8m-image-stage .g8m-image-neighbor img{
 position:relative;display:block;width:100%;height:100%;max-width:100%;max-height:100%;
 object-fit:contain;pointer-events:none;border-radius:14px;
 transform:none;filter:brightness(.95);-webkit-user-drag:none;
}
.g8m-image-viewer .g8m-image-stage #g8mImageLarge{
 position:absolute;left:50%;top:50%;display:block;
 width:var(--g8m-fit-width,auto);height:var(--g8m-fit-height,auto);
 max-width:none;max-height:none;min-width:0;min-height:0;
 object-fit:contain;
 transform-origin:center center;
 transform:translate(-50%,-50%) translate(var(--g8m-pan-x,0px),var(--g8m-pan-y,0px)) scale(var(--g8m-zoom,1));
 will-change:transform;pointer-events:none;-webkit-user-drag:none;
}
.g8m-image-stage.is-zoomed .g8m-image-frame{overflow:visible}
.g8m-image-stage.is-zoomed .g8m-image-neighbor{opacity:0}
.g8m-image-stage-status{z-index:3;pointer-events:none}
@media(max-width:700px){
 .g8m-image-stage.has-gallery{--g8m-gallery-peek:clamp(40px,11vw,56px);--g8m-gallery-gap:10px}
 .g8m-image-neighbor{opacity:.82}
}
@media(prefers-reduced-motion:reduce){.g8m-image-neighbor{transition:none}}


/* V4C-17: true full-width immersive swipe — all three slides are the
   exact same viewport width. Neighbors are OFF SCREEN at rest; they
   become visible only as the user drags or the transition progresses. */
.g8m-image-stage.has-gallery{--g8m-gallery-peek:0px;--g8m-gallery-gap:0px}
.g8m-image-frame{
 width:var(--g8m-gallery-stage-width);
 background:#020308;
 border-radius:0;
}
.g8m-image-neighbor,.g8m-image-stage.has-gallery .g8m-image-neighbor{opacity:1}
.g8m-image-viewer .g8m-image-stage .g8m-image-neighbor img{
 filter:none;border-radius:0;
}
.g8m-image-stage .g8m-image-frame.is-loading::before{
 content:'';position:absolute;left:50%;top:50%;width:24px;height:24px;
 border:2px solid #ffffff30;border-top-color:#ffffffc0;border-radius:50%;
 transform:translate(-50%,-50%);animation:g8m-gallery-spin .85s linear infinite;
}
@keyframes g8m-gallery-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(max-width:700px){.g8m-image-stage.has-gallery{--g8m-gallery-peek:0px;--g8m-gallery-gap:0px}}
@media(prefers-reduced-motion:reduce){.g8m-image-stage .g8m-image-frame.is-loading::before{animation:none}}
/* Override legacy fullscreen img coordinates on neighbor slides. Without
   this, `top:50%;left:50%` inherited from the old single-image viewer pushes
   the next/previous photo out of sight while swiping. */
.g8m-image-viewer .g8m-image-stage .g8m-image-neighbor img{
 position:static;left:auto;top:auto;
 width:calc(100% - 8px);height:calc(100% - 8px);
 max-width:calc(100% - 8px);max-height:calc(100% - 8px);
 object-fit:contain;object-position:center;
}

/* V4C-18 | Teacher-only conversation search, media and project gallery */
.g8m-chat-head .g8m-admin-tools-open{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--field);color:var(--ink);border-radius:10px;padding:8px 11px;font-size:12px;font-weight:750;white-space:nowrap;min-height:36px}
.g8m-chat-head .g8m-admin-tools-open:hover,.g8m-admin-tools button:hover{filter:brightness(.98)}
.g8m-admin-tools-backdrop{position:fixed;inset:0;background:#0d142d92;z-index:5700;backdrop-filter:blur(2px)}
.g8m-admin-tools{position:fixed;z-index:5800;right:0;top:0;height:100dvh;width:min(460px,100vw);background:var(--paper);color:var(--ink);display:flex;flex-direction:column;border-left:1px solid var(--line);box-shadow:-20px 0 70px #02091c4d;overflow:hidden;animation:g8mAdminPanelIn .23s cubic-bezier(.2,.78,.23,1)}
@keyframes g8mAdminPanelIn{from{transform:translateX(35px);opacity:.6}to{transform:translateX(0);opacity:1}}
.g8m-admin-tools-head{padding:18px 18px 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.g8m-admin-tools-head>div{flex:1;min-width:0}.g8m-admin-tools-head strong{font-size:17px;display:block}.g8m-admin-tools-head small{font-size:12px;display:block;margin-top:3px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g8m-admin-tools-head button{width:37px;height:37px;border-radius:11px;border:1px solid var(--line);background:var(--field);color:var(--ink);font-size:25px;flex:none}
.g8m-admin-tools-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:10px 12px 0;gap:6px;flex:none}
.g8m-admin-tools-tabs button{background:var(--field);color:var(--muted);border:1px solid var(--line);padding:10px 3px;border-radius:10px;font-size:12px;font-weight:700;white-space:nowrap}
.g8m-admin-tools-tabs button.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.g8m-admin-tools-controls{padding:11px 13px 9px;border-bottom:1px solid var(--line)}
.g8m-admin-tools-input{display:flex;gap:7px;align-items:center;border:1px solid var(--line);background:var(--field);color:var(--muted);border-radius:12px;padding:0 12px;min-height:42px}
.g8m-admin-tools-input span{font-size:22px}.g8m-admin-tools-input input{min-width:0;width:100%;font-size:13px;background:transparent;border:0;outline:0;color:var(--ink)}
.g8m-admin-tools-input input::placeholder{color:var(--muted)}
.g8m-admin-tools-filter{display:flex;gap:5px;margin-top:9px;overflow-x:auto;scrollbar-width:none}.g8m-admin-tools-filter button{border:1px solid var(--line);background:var(--paper);color:var(--muted);font-size:11px;padding:7px 10px;border-radius:999px;white-space:nowrap;flex:none}
.g8m-admin-tools-filter button.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:750}
.g8m-admin-tools-status{background:var(--field);color:var(--muted);padding:9px 16px;font-size:11px;line-height:1.4;flex:none}
.g8m-admin-tools-results{flex:1;min-height:0;overflow:auto;padding:12px;overscroll-behavior:contain;scrollbar-width:thin}
.g8m-admin-tools-footer{display:flex;align-items:center;gap:10px;justify-content:space-between;border-top:1px solid var(--line);padding:12px 16px;font-size:11px;color:var(--muted);flex:none}
.g8m-admin-tools-footer button{background:var(--accent);border:0;border-radius:9px;color:#fff;font-weight:700;font-size:11px;padding:8px 12px}
.g8m-admin-result{width:100%;min-height:66px;background:var(--paper);border:1px solid var(--line);color:var(--ink);border-radius:13px;margin-bottom:8px;text-align:left;display:flex;align-items:center;gap:10px;padding:11px 12px}
.g8m-admin-result:hover{background:var(--field)}
.g8m-admin-result-icon{font-size:22px;color:var(--accent);background:var(--accent-soft);width:37px;height:37px;border-radius:11px;display:grid;place-items:center;flex:none}
.g8m-admin-result-body{flex:1;min-width:0}.g8m-admin-result-body strong{font-size:12px;font-weight:650;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;line-height:1.45}.g8m-admin-result-body small{display:block;font-size:10px;color:var(--muted);margin-top:5px}.g8m-admin-result-go{font-size:22px;color:var(--muted)}
.g8m-admin-photo-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.g8m-admin-photo-tile{position:relative;width:100%;aspect-ratio:1;background:var(--field);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:grid;place-items:center;color:var(--muted);font-size:10px;padding:0}
.g8m-admin-photo-tile:not(.is-ready):not(.is-error)::before{content:'';height:100%;width:100%;position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#ffffff24 48%,transparent 66%);animation:g8mAdminShimmer 1.5s infinite linear}
@keyframes g8mAdminShimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.g8m-admin-photo-tile img{height:100%;width:100%;object-fit:cover;display:block}
.g8m-admin-photo-tile.is-error{border-style:dashed;color:var(--muted)}
.g8m-admin-project-row{margin-bottom:10px;border:1px solid var(--line);border-radius:13px;overflow:hidden}.g8m-admin-project-row .g8m-admin-result{border:0;border-radius:0;margin:0}
.g8m-admin-inline-jump{display:block;border:0;border-top:1px solid var(--line);text-align:left;background:var(--field);color:var(--accent);font-size:11px;font-weight:750;width:100%;padding:9px 14px}
.g8m-admin-more{background:var(--field);color:var(--accent);font-size:12px;font-weight:750;border:1px solid var(--line);padding:10px 13px;width:100%;border-radius:12px}
.g8m-image-toolbar .g8m-image-find-message{font-size:12px!important;font-weight:700;min-width:96px;white-space:nowrap}
@media(max-width:780px){.g8m-chat-head .g8m-admin-tools-open{padding:7px 9px;font-size:17px}.g8m-chat-head .g8m-admin-tools-open span{display:none}.g8m-admin-tools{width:100%;border:0}.g8m-admin-tools-tabs button{font-size:12px}.g8m-image-toolbar .g8m-image-find-message{font-size:10px!important;min-width:65px;padding:0 4px!important}}
@media(max-width:420px){.g8m-chat-head{gap:7px;padding-left:9px;padding-right:9px}.g8m-chat-head .g8m-admin-tools-open{min-height:32px}.g8m-chat-head .g8m-chat-identity strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){.g8m-admin-tools{animation:none}.g8m-admin-photo-tile::before{animation:none!important}}
/* The drawer is a body-level overlay, so provide the same app theme variables
   explicitly rather than inheriting from the sibling .g8m-app. */
.g8m-admin-tools{--paper:#fff;--field:#f0f3fa;--ink:#202b46;--muted:#77849b;--line:#e4e9f3;--accent:#6659e8;--accent-soft:#efedff}
#g8mApp[data-theme=dark] ~ .g8m-admin-tools{--paper:#161e30;--field:#222d43;--ink:#f2f5ff;--muted:#abb6ca;--line:#33405a;--accent:#a395ff;--accent-soft:#302b50}
.g8m-admin-highlight{background:#f6e29b;color:#312500;border-radius:3px;padding:0 1px}
@media(max-width:540px){.g8m-workspace:not(.student) .g8m-chat-head .g8m-lock{display:none}}

/* Keep the existing V4C-17 zoom/swipe toolbar intact on narrow phones. */
.g8m-image-viewer #g8mImageFindMessage{position:absolute;top:auto;right:auto;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:7;height:36px;min-width:115px;padding:0 14px!important;font-size:12px!important;background:rgba(17,24,39,.86);border:1px solid #ffffff65;box-shadow:0 4px 24px #0006;backdrop-filter:blur(6px)}

/* V4C-19: full-slide gallery paint stability and direct project output. */
.g8m-image-viewer .g8m-image-track{backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.g8m-image-stage.has-gallery .g8m-image-frame:not(.is-zoomed){background:#020308;}
.g8m-image-viewer .g8m-image-stage .g8m-image-frame img{-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.g8m-project-view-dialog>header{align-items:center;}
.g8m-project-view-dialog>header>div{flex:1;min-width:0;}
.g8m-project-view-chat{border:1px solid var(--line);background:var(--accent-soft);color:var(--accent);border-radius:10px;padding:9px 12px;font-size:12px;font-weight:750;flex:none;}
@media(max-width:700px){.g8m-project-view-chat{font-size:11px;padding:9px 8px}.g8m-project-view-dialog>header{padding:11px 12px}.g8m-project-view-dialog>header h2{font-size:14px}}
/* Keep the gallery's View in Chat action readable beside the close control. */
.g8m-project-view-dialog>header .g8m-project-view-chat{
 display:inline-flex;align-items:center;justify-content:center;
 width:auto;height:35px;min-width:105px;white-space:nowrap;
 padding:0 10px;line-height:1.2;border-radius:10px;
}
@media(max-width:420px){
 .g8m-project-view-dialog>header .g8m-project-view-chat{min-width:89px;padding:0 7px;font-size:11px;}
 .g8m-project-view-dialog>header>div h2,.g8m-project-view-dialog>header>div p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}

/* V4C-20 — unified responsive project output scrolling. */
.g8m-project-view-dialog .g8m-preview-host{
 overflow-x:auto!important;
 overflow-y:auto!important;
 overscroll-behavior:contain;
 touch-action:pan-x pan-y;
 -webkit-overflow-scrolling:touch;
 scroll-behavior:auto;
 scroll-padding:0;
 scrollbar-width:thin;
 background:#fff;
}
.g8m-project-view-dialog .g8m-preview-stage{display:block;max-width:none;min-width:0;min-height:0;overflow:visible}
.g8m-project-view-dialog .g8m-preview-stage iframe{max-width:none;transform-origin:left top;will-change:transform}
.g8m-project-view-dialog .g8m-preview-host:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.g8m-project-view-dialog .g8m-preview-host::-webkit-scrollbar{height:8px;width:8px}
.g8m-project-view-dialog .g8m-preview-host::-webkit-scrollbar-thumb{background:#9aa9bd;border-radius:99px;border:2px solid #fff}
.g8m-project-view-dialog .g8m-preview-host::-webkit-scrollbar-track{background:#eff3f8}


/* V4C-21A — teacher-controlled screenshot policy.
   Visual deterrent only; browser pages cannot block OS screenshots. */
.g8m-screenshot-notice{display:none!important}
.g8m-capture-watermark,.g8m-image-screenshot-watermark{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;white-space:nowrap;text-align:center;text-transform:uppercase;pointer-events:none;user-select:none}
.g8m-capture-watermark{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) rotate(-20deg);z-index:2;color:var(--ink);opacity:.16;filter:drop-shadow(0 2px 10px rgba(0,0,0,.10))}
.g8m-capture-watermark span:first-child{font-size:clamp(34px,7vw,72px);font-weight:900;letter-spacing:.08em;line-height:1}
.g8m-capture-watermark span:last-child{font-size:clamp(18px,3.3vw,34px);font-weight:850;letter-spacing:.38em;line-height:1}
.g8m-image-screenshot-watermark{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%) rotate(-20deg);z-index:7;color:#fff;opacity:.25;text-shadow:0 3px 18px rgba(0,0,0,.45)}
.g8m-image-screenshot-watermark span:first-child{font-size:clamp(34px,8vw,86px);font-weight:900;letter-spacing:.08em;line-height:1}
.g8m-image-screenshot-watermark span:last-child{font-size:clamp(18px,4vw,38px);font-weight:850;letter-spacing:.38em;line-height:1}
.g8m-admin-screenshot-settings{padding:18px 15px;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.g8m-screenshot-settings-heading{display:flex;align-items:center;gap:12px;margin-bottom:19px}
.g8m-screenshot-settings-icon{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--accent-soft);font-size:23px;color:var(--accent)}
.g8m-screenshot-settings-heading strong{display:block;font-size:15px;line-height:1.4}
.g8m-screenshot-settings-heading small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.g8m-screenshot-setting-row{padding:16px 13px;border:1px solid var(--line);border-radius:14px;display:flex;gap:14px;align-items:center;justify-content:space-between;cursor:pointer}
.g8m-screenshot-setting-row>span{flex:1;min-width:0}
.g8m-screenshot-setting-row strong{font-size:12px;display:block;line-height:1.4}
.g8m-screenshot-setting-row small{font-size:11px;color:var(--muted);display:block;margin-top:4px;line-height:1.5}
.g8m-screenshot-setting-row input{appearance:none;-webkit-appearance:none;width:43px;height:25px;border-radius:999px;position:relative;background:var(--line);flex:none;border:1px solid var(--muted);transition:background .2s ease;cursor:pointer}
.g8m-screenshot-setting-row input::before{content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .2s ease}
.g8m-screenshot-setting-row input:checked{background:var(--accent);border-color:var(--accent)}
.g8m-screenshot-setting-row input:checked::before{transform:translateX(18px)}
.g8m-screenshot-setting-row input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.g8m-screenshot-setting-row input:disabled{opacity:.5;cursor:wait}
.g8m-screenshot-settings-feedback{font-size:11px;color:var(--muted);line-height:1.5;margin:10px 3px}
.g8m-screenshot-settings-feedback.is-error{color:#d14c63}
.g8m-screenshot-settings-caveat{font-size:11px;line-height:1.65;border:1px solid var(--line);background:var(--field);color:var(--muted);border-radius:12px;padding:12px;margin:16px 0}
.g8m-screenshot-settings-caveat strong{color:var(--ink)}
@media(max-width:420px){.g8m-admin-tools-tabs{gap:4px;padding:8px 8px 0}.g8m-admin-tools-tabs button{font-size:11px;padding:9px 2px}.g8m-capture-watermark{top:47%;opacity:.18}.g8m-capture-watermark span:first-child{font-size:clamp(30px,10vw,52px)}.g8m-capture-watermark span:last-child{font-size:clamp(14px,4.5vw,24px);letter-spacing:.28em}.g8m-image-screenshot-watermark span:first-child{font-size:clamp(32px,10vw,58px)}.g8m-image-screenshot-watermark span:last-child{font-size:clamp(15px,4.8vw,25px);letter-spacing:.28em}}
@media(prefers-reduced-motion:reduce){.g8m-screenshot-setting-row input,.g8m-screenshot-setting-row input::before{transition:none}}