/* Reuse the product's tokens, controls and native handlers. Only tool chrome changes. */
/* 与 ObjectToolbar 同一圆盘尺寸：中心 AI，外围常用工具与学科；颜色只展开外环。 */
html.s1 body #gbBottomTools{width:196px;height:196px;padding:0;border:1px solid #62666d;border-radius:50%;background:rgba(31,35,41,.94);box-shadow:0 5px 18px #0003;isolation:isolate}
html.s1 body #gbBottomTools #gbAiDisc{position:absolute!important;left:78px!important;top:78px!important;inset:auto;transform:none!important;margin:0;padding:0;width:56px;height:56px;border-radius:50%;background:#f4f4f5;color:#18181b;z-index:2;display:grid;place-items:center}
html.s1 body #gbAiDisc span{width:auto;height:auto;background:none;color:inherit}
html.s1 body #gbBottomTools .gb-sub{position:absolute;right:auto;bottom:auto;width:44px;height:44px;min-width:44px;padding:0;margin:-22px 0 0 -22px;border:1px solid #ffffff24;border-radius:50%;background:#343b45;color:#f4f4f5;font:500 10px/1.1 var(--font-ui)}
html.s1 body #gbBottomTools #ai-assistant-reopen{display:none!important}
html.s1 body #gbAiRing{position:absolute;width:212px;height:212px;display:block;padding:0;border:0;background:none;box-shadow:none;pointer-events:none;z-index:1}
html.s1 body #gbAiRing > button{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:1px solid #ffffff24;border-radius:50%;background:#343b45;color:#f4f4f5;box-shadow:none;animation:none;font:500 10px/1.1 var(--font-ui);pointer-events:auto}
html.s1 body #gbAiRing > button[aria-pressed=true]{background:#f4f4f5;color:#18181b}
html.s1 body #gbColorRing{position:absolute;inset:0;width:196px;height:196px;display:block;padding:0;border:0;background:none;pointer-events:none}
html.s1 body #gbColorRing button{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border:10px solid #24272d;border-radius:50%;box-shadow:none;animation:none;pointer-events:auto}
html.s1 body #gbColorRing[hidden]{display:none}
html.otb-open body #gbBottomTools{visibility:hidden;pointer-events:none}
html.s1 body :is(#gbBottomTools,#gbAiRing,#subjectToolsPanel) button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
html.s1 body #subjectToolsPanel {box-sizing:border-box;border:1px solid var(--line);border-radius:var(--radius-panel);padding:var(--space-4);background:var(--glass-surface);color:var(--ink);backdrop-filter:blur(var(--glass-blur));box-shadow:0 4px 16px var(--shadow-ink);animation:mobile-tool-in var(--motion-panel) var(--motion-ease)}
html.s1 body #subjectToolsPanel h3 {margin:var(--space-1) 0 var(--space-3);color:var(--muted);font-size:12px;font-weight:500;line-height:1.5}
html.s1 body #subjectToolsPanel .st-grid {gap:var(--space-2);margin-bottom:var(--space-4)}
html.s1 body #subjectToolsPanel .st-grid button {min-height:64px;padding:var(--space-2) var(--space-1);gap:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:500 12px/1.4 var(--font-ui);transition:transform var(--motion-fast)}
html.s1 body #subjectToolsPanel .st-grid button:hover {background:var(--surface-hover)}
html.s1 body #subjectToolsPanel :is(.st-close,.st-back) {color:var(--muted);font-weight:500}
html.s1 body #subjectToolsPanel .st-close {width:40px;height:40px;top:var(--space-2);right:var(--space-2)}
html.s1 body #ai-assistant-bar {border:1px solid var(--line)!important;border-radius:var(--radius-panel)!important;background:var(--glass-surface)!important;color:var(--ink)!important;backdrop-filter:blur(var(--glass-blur));box-shadow:0 4px 16px var(--shadow-ink)!important}
html.s1 body:has(#ai-assistant-bar:not(.hidden)) #gbBottomTools {visibility:hidden;pointer-events:none}
@keyframes mobile-tool-in {from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:767.98px) {
  html.s1 body #gbBottomTools :is(.gb-sub,#gbAiDisc,#ai-assistant-reopen) {height:44px}
  html.s1 body #subjectToolsPanel {left:8px!important;right:8px;bottom:calc(var(--s1-bottom) + 8px)!important;max-height:min(60dvh,480px);width:auto;padding:var(--space-4);border-radius:var(--radius-panel);overflow:auto}
  /* S1Layout 已提供可拖拽手柄，去掉旧版装饰条，避免重复。 */
  html.s1 body #subjectToolsPanel::before {display:none}
}
@media(prefers-reduced-transparency:reduce) {html.s1 body :is(#gbBottomTools,#gbAiRing,#subjectToolsPanel,#ai-assistant-bar) {background:var(--surface)!important;backdrop-filter:none}}
@media(prefers-reduced-motion:reduce) {html.s1 body :is(#gbAiRing,#subjectToolsPanel) {animation:none}html.s1 body #gbBottomTools button {transition:none}}
html.s1 body #ai-assistant-bar #ai-assistant-input {color:var(--ink)}
html.s1 body #ai-assistant-bar #ai-assistant-input::placeholder {color:var(--muted)}
html.s1 body #ai-assistant-bar #ai-assistant-send {background:var(--accent-mint);color:var(--accent-mint-deep);border-radius:var(--radius-sm);width:40px;height:40px}
html.s1 body #ai-assistant-bar #ai-assistant-send svg {fill:var(--accent-mint-deep)}
html.s1 body #ai-assistant-bar button:not(#ai-assistant-send) {color:var(--muted)}
/* The compact AI card leaves its sibling entry available for switching to text. */
html.s1[data-s1-panel="gbAiRing"] body #gbBottomTools #ai-assistant-reopen {visibility:visible!important;pointer-events:auto!important}

/* Completion actions stay in the bottom tool lane and disappear during native writing. */
html.s1 body #ink-recognize-chip {max-width:calc(100vw - 24px);width:max-content;box-sizing:border-box;gap:var(--space-2);padding:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--glass-surface);color:var(--ink);backdrop-filter:blur(var(--glass-blur));box-shadow:0 2px 8px var(--shadow-ink);max-height:28dvh;overflow:auto}
html.s1 body #ink-recognize-chip[hidden] {display:none!important}
html.s1 body #ink-recognize-chip :is(.irc-tex,.irc-msg) {color:var(--ink)}
html.s1 body #ink-recognize-chip .irc-meta {color:var(--muted)}
html.s1 body #ink-recognize-chip button {min-height:40px;padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:500 13px var(--font-ui)}
html.s1 body #ink-recognize-chip [data-act=recognize] {background:var(--accent-mint);border-color:var(--accent-mint);color:var(--accent-mint-deep)}
html.s1 body #ink-recognize-chip .irc-close {width:40px;padding:0;background:transparent;border-color:transparent}
html.s1 body #ink-recognize-chip button:focus-visible {outline:2px solid var(--focus-ring);outline-offset:2px}
html.s1:not([data-s1-panel=""]) body #ink-recognize-chip {visibility:hidden;pointer-events:none}
@media(max-width:767.98px) {html.s1 body #ink-recognize-chip button {min-height:44px}html.s1 body #ink-recognize-chip .irc-tex {max-width:calc(100vw - 80px)}}

html.s1 body #gbBottomTools:has(#gbColorRing:not([hidden])){transform:translate(-50%,-48px)!important}

/* Phone controls need a complete finger target, including the page/undo rows. */
@media (max-width:767.98px), (hover:none) and (pointer:coarse) {
  html.s1 body:is(:has(#inlineCanvasTextWrapper),:has(.st-instrument)) #gbBottomTools {visibility:hidden!important;pointer-events:none!important;}
  html.s1 body #lecture-bar:not([hidden]) {
    display:grid;grid-template-columns:10px minmax(0,1fr) auto;
    gap:6px;width:calc(100vw - 24px);border-radius:16px;
  }
  html.s1 body #lecture-state {min-width:0;white-space:normal;overflow-wrap:anywhere;}
  html.s1 body #lecture-time {white-space:nowrap;}
  html.s1 body #lecture-heard {grid-row:3;grid-column:1/-1;max-width:none;}
  html.s1 body #lecture-pause {grid-row:2;grid-column:1/3;}
  html.s1 body #lecture-stop {grid-row:2;grid-column:3;}
  html body button {
    min-width:44px!important;min-height:44px!important;
  }
  html.s1 body .st-instrument :is(.st-x,.st-rot) {width:44px;height:44px;transform:scale(var(--st-control-scale,1));transform-origin:top left;}
  html.s1.s1 body #topNavbar :is(#redesignSidebar,#btnShareChalk,#s1TopMore,#redesignPresent) {
    min-width:44px!important;min-height:44px!important;
  }
  html.s1.s1 body #cookieBanner.cookie-banner:not(.is-dot) { max-height:140px!important; }
}
@media (max-width:767.98px) {
  html.s1.s1 { --s1-top:calc(44px + var(--s1-safe-t)); --s1-pages:44px; }
  /* Later legacy navigation rules still requested a 96px two-row header. */
  html.s1.s1.s1 body #topNavbar {height:var(--s1-top)!important;min-height:var(--s1-top)!important;flex-wrap:nowrap!important;padding:var(--s1-safe-t) 8px 0!important;}
  html.s1.s1 body #topNavbar :is(.redesign-start,.redesign-end) {width:auto!important;}
  html.s1.s1.s1.s1 body #topNavbar #r4Classroom {display:none!important;}
  html.s1.s1.s1.s1 body #topNavbar .redesign-end > :not(#r4LessonToolbar):not(#s1TopMore):not(#topAccountButton) {display:none!important;}
  html.s1.s1 body #pageManagerDock { height:44px!important; }
  html.s1.s1 body #pageManagerDock #pageIndicator { line-height:44px; }
}
@media (max-width:767.98px) and (max-height:430px) {
  /* A full 44px radial fits beside the page row on a landscape iPhone SE. */
  html.s1.s1 body #pageManagerDock {left:104px!important;right:248px!important;width:auto!important;gap:4px!important;}
  html.s1.s1 body #gbBottomTools:has(#gbColorRing:not([hidden])) {transform:translateX(-50%)!important;}
  html.s1.s1 body #gbBottomTools:has(#gbColorRing:not([hidden])) :is(#gbAiRing > button,.gb-sub) {visibility:hidden!important;pointer-events:none!important;}
}

/* The current pen chooser keeps a complete twelve-color ring on touch screens. */
#mobilePenColorRing {position:relative;width:220px;height:220px;margin:0 auto 12px;flex:none;}
#arcPenPanel #mobilePenColorRing button {position:absolute;width:44px;height:44px;min-height:44px;border:8px solid #30363f;border-radius:50%;background:var(--pen-color);padding:0;margin:-22px 0 0 -22px;}
#arcPenPanel #mobilePenColorRing button[aria-pressed=true] {background:var(--pen-color);outline:2px solid #8ab4f8;outline-offset:1px;}