/* PC toolbox: right rail, click to expand/collapse config (default open) */
.toolbox-settings-rail{display:none}
@media (min-width:992px) and (hover:hover) and (pointer:fine){
  .toolbox-settings-shell{
    grid-column:2;grid-row:1;position:sticky;top:16px;z-index:6;
    display:flex;flex-direction:row-reverse;align-items:stretch;align-self:start;
    width:52px;max-height:calc(100vh - 32px);box-sizing:border-box;
    transition:width 180ms ease;
  }
  .toolbox-settings-shell.is-open{width:min(372px,42vw)}
  .toolbox-settings-rail{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    flex:0 0 52px;width:52px;padding:12px 0;box-sizing:border-box;
    border:1px solid rgba(185,106,38,.22);border-radius:14px;
    background:linear-gradient(180deg,#fffdf8,#fff7ec);
    box-shadow:0 8px 24px rgba(57,37,21,.08);color:#8a5a2b;
    cursor:pointer;user-select:none;
  }
  .toolbox-settings-rail-btn{
    width:40px;min-height:40px;border:0;border-radius:12px;
    background:transparent;color:inherit;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    font:inherit;font-size:11px;line-height:1.2;padding:6px 4px;
  }
  .toolbox-settings-rail-btn i{font-size:16px}
  .toolbox-settings-rail-btn:hover,
  .toolbox-settings-shell.is-open .toolbox-settings-rail-btn.is-config{
    background:#fff0dc;color:#a6500b;
  }
  .toolbox-settings-rail-label{
    writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.12em;
    font-size:12px;font-weight:650;color:#9a6a3a;padding:6px 0 2px;
  }
  .toolbox-settings-shell > .ks-panel,
  .toolbox-settings-shell > .cz-panel,
  .toolbox-settings-shell > .uc-panel{
    flex:1 1 auto;width:0;min-width:0;opacity:0;overflow-y:auto;pointer-events:none;
    margin:0;border-radius:14px 0 0 14px;border-right:0;
    max-height:calc(100vh - 32px);position:relative;top:auto;
    transition:opacity 160ms ease,width 180ms ease,padding 180ms ease;
    box-sizing:border-box;scrollbar-width:thin;overscroll-behavior:auto;
  }
  .toolbox-settings-shell.is-open > .ks-panel,
  .toolbox-settings-shell.is-open > .cz-panel,
  .toolbox-settings-shell.is-open > .uc-panel{
    width:min(320px,calc(42vw - 52px));opacity:1;pointer-events:auto;
    padding-left:16px;padding-right:12px;
  }
  /* 面板内 sticky 元素（如打印确认条）在滚动容器内恢复 sticky */
  .toolbox-settings-shell.is-open > .ks-panel > .ks-actions,
  .toolbox-settings-shell.is-open > .cz-panel > .cz-actions,
  .toolbox-settings-shell.is-open > .uc-panel > .uc-actions{
    position:sticky;bottom:0;z-index:2;
    background:inherit;
  }

  /* 展开态下解除原页面面板的 sticky/max-height 干扰（滚动交给 shell 内部） */
  .kousuan-page .toolbox-settings-shell .ks-panel,
  .cizu-page .toolbox-settings-shell .cz-panel,
  .unit-conversion-page .toolbox-settings-shell .uc-panel{
    position:relative !important;top:auto !important;
  }

  /* keep sticky panel rules from fighting the shell */
  .kousuan-page .toolbox-settings-shell .ks-panel,
  .cizu-page .toolbox-settings-shell .cz-panel,
  .unit-conversion-page .toolbox-settings-shell .uc-panel{
    position:relative;top:auto;max-width:none;
  }
  .toolbox-settings-collapse{
    display:none;position:sticky;top:0;z-index:2;margin:0 0 10px;width:100%;
    min-height:36px;border:0;border-radius:10px;background:#fff4e5;color:#9a5b20;
    font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  }
  .toolbox-settings-shell.is-open .toolbox-settings-collapse{display:inline-flex;align-items:center;justify-content:center;gap:6px}
  /* page app columns: preview + shell */
  .kousuan-page .ks-app,
  .cizu-page .cz-app,
  .unit-conversion-page .uc-app{
    grid-template-columns:minmax(0,1fr) auto !important;
  }
  .kousuan-page .ks-panel{grid-column:unset;grid-row:unset}
  .kousuan-page .ks-preview-wrap{grid-column:1;grid-row:1}
  .cz-panel{grid-column:unset;grid-row:unset}
  .cz-preview-wrap{grid-column:1;grid-row:1}
  .uc-panel{grid-column:unset;grid-row:unset}
  .uc-preview-wrap{grid-column:1;grid-row:1}

  /* zitie / english-zitie workspace rail */
  .zt-settings-rail,.ez-settings-rail{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    grid-column:2;grid-row:1;position:sticky;top:132px;z-index:6;
    width:52px;max-height:calc(100dvh - 100px);padding:12px 0;box-sizing:border-box;
    border:1px solid var(--zt-border, rgba(185,106,38,.22));border-radius:14px;
    background:linear-gradient(180deg,#fffdf8,#fff7ec);color:#8a5a2b;
    box-shadow:0 8px 24px rgba(57,37,21,.08);
  }
  .english-zitie-page .ez-settings-rail{border-color:var(--ez-border, rgba(185,106,38,.22));color:var(--ez-text-2,#8a5a2b)}
  .zt-settings-rail-btn,.ez-settings-rail-btn{
    width:40px;min-height:40px;border:0;border-radius:12px;background:transparent;color:inherit;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    font:inherit;font-size:11px;cursor:pointer;padding:6px 4px;
  }
  .zt-settings-rail-btn:hover,.ez-settings-rail-btn:hover,
  .zitie-page.is-settings-open .zt-settings-rail-btn.is-config,
  .english-zitie-page.is-settings-open .ez-settings-rail-btn.is-config{background:#fff0dc;color:#a6500b}
  .zt-settings-rail-label,.ez-settings-rail-label{
    writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.12em;
    font-size:12px;font-weight:650;padding:6px 0 2px;
  }
  .zitie-page .zt-app{grid-template-columns:minmax(0,1fr) 52px !important;gap:12px !important}
  .english-zitie-page .ez-app{grid-template-columns:minmax(0,1fr) 52px !important;gap:12px !important}
  .zitie-page.is-settings-open .zt-app{grid-template-columns:minmax(0,1fr) 340px 52px !important;gap:12px !important}
  .english-zitie-page.is-settings-open .ez-app{grid-template-columns:minmax(0,1fr) 340px 52px !important;gap:12px !important}
  .zitie-page .zt-preview-wrap,.english-zitie-page .ez-preview-wrap{grid-column:1 !important}
  .zitie-page .zt-settings-drawer{grid-column:2 !important;grid-row:1 !important;width:340px}
  .english-zitie-page .ez-settings-drawer{grid-column:2 !important;grid-row:1 !important;width:340px}
  .zitie-page .zt-settings-rail,.english-zitie-page .ez-settings-rail{grid-column:2;grid-row:1}
  .zitie-page.is-settings-open .zt-settings-rail,
  .english-zitie-page.is-settings-open .ez-settings-rail{grid-column:3}
  .zitie-page .zt-settings-drawer:not([open]),
  .english-zitie-page .ez-settings-drawer:not([open]){display:none}
  [data-theme="dark"] .toolbox-settings-rail,
  [data-theme="dark"] .zt-settings-rail,
  [data-theme="dark"] .ez-settings-rail{
    background:linear-gradient(180deg,#3a312b,#2f2823);border-color:#675243;color:#e6b367;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
  }
  [data-theme="dark"] .toolbox-settings-rail-btn:hover,
  [data-theme="dark"] .toolbox-settings-shell.is-open .toolbox-settings-rail-btn.is-config,
  [data-theme="dark"] .zt-settings-rail-btn:hover,
  [data-theme="dark"] .ez-settings-rail-btn:hover{background:#4c3d31;color:#f0d2a0}
  [data-theme="dark"] .toolbox-settings-collapse{background:#4c3d31;color:#f0d2a0}
}
@media (max-width:991px){
  .toolbox-settings-shell{display:contents}
  .toolbox-settings-rail,.toolbox-settings-collapse,.zt-settings-rail,.ez-settings-rail{display:none!important}
}
@media print{
  .toolbox-settings-rail,.toolbox-settings-collapse,.zt-settings-rail,.ez-settings-rail{display:none!important}
  .toolbox-settings-shell{display:contents}
}

/* English copybook: keep the settings icon and label stacked in the narrow rail. */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .english-zitie-page .ez-settings-rail .ez-settings-rail-btn {
    width: 44px;
    min-height: 64px;
    padding: 8px 4px;
    display: flex;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    writing-mode: horizontal-tb;
  }
  .english-zitie-page .ez-settings-rail .ez-settings-rail-btn i {
    display: block;
    flex: 0 0 auto;
    font-size: 17px;
    line-height: 1;
  }
  .english-zitie-page .ez-settings-rail .ez-settings-rail-btn span {
    display: block;
    flex: 0 0 auto;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0;
  }
}

/* Desktop keeps the rail entry as the only collapse control. */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .toolbox-settings-collapse,
  .toolbox-mobile-panel-collapse {
    display: none !important;
  }
  .toolbox-mobile-panel-head {
    display: block;
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(185, 106, 38, 0.18);
  }
  .toolbox-mobile-panel-head h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
    color: #2f241b;
  }
  [data-theme="dark"] .toolbox-mobile-panel-head {
    border-bottom-color: #806a58;
  }
  [data-theme="dark"] .toolbox-mobile-panel-head h2 {
    color: #f5ece3;
  }
}

/* All desktop toolbars use the side configuration entry as the single collapse control. */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .zitie-page .zt-drawer-head #zt-settings-close,
  .english-zitie-page .ez-drawer-head #ez-settings-close {
    display: none !important;
  }
}