/* 介面細節升級：保留原本復古視窗風格，只加手感與動畫。 */

/* ---------- 按鈕按下的實體感 ---------- */
.action:active:not(:disabled),.ctrl-btn:active:not(:disabled),.option:active,.category-btn:active,.swatch:active,
.preview-bg-swatch:active,.mobile-mode-btn:active,.mobile-choice:active,.mobile-transform-btn:active,
.mobile-side-swatch:active,.mobile-background-swatch:active,.mobile-position-line button:active,
.design-confirm-actions button:active:not(:disabled),.save-design-code:active,.text-layer-row button:active:not(:disabled){transform:translate(1px,1px)}
.action:active:not(:disabled):not(.primary){box-shadow:inset 2px 2px 0 var(--shadow),inset -2px -2px 0 #fff}
.design-code-row button.copied{background:#111!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:none!important}

/* ---------- 上方選單 ---------- */
.menubar-menus{display:flex;align-items:center;gap:2px;word-spacing:normal}
.menu{position:relative}
.menu-trigger{padding:3px 8px;border:1px solid transparent;background:transparent;font:700 10px "Courier New",monospace;color:#111;cursor:pointer}
.menu-trigger:hover,.menu.open .menu-trigger{background:#111;color:#fff!important;-webkit-text-fill-color:#fff!important}
.menu-dropdown{position:absolute;left:0;top:calc(100% + 6px);z-index:80;display:grid;min-width:230px;padding:4px;border:2px solid #111;background:#fff;box-shadow:4px 4px 0 rgba(0,0,0,.28);transform-origin:top left;animation:menu-drop .12s steps(3,end)}
.menu-dropdown[hidden]{display:none}
.menu-dropdown button{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:7px 9px;border:0;background:transparent;text-align:left;font:900 10px "Courier New",monospace;color:#111;cursor:pointer}
.menu-dropdown button small{font-size:9px;font-weight:700;opacity:.6}
.menu-dropdown button:hover,.menu-dropdown button:focus-visible{background:#111;color:#fff!important;-webkit-text-fill-color:#fff!important;outline:0}
.menu-dropdown button:hover small,.menu-dropdown button:focus-visible small{opacity:.75}
.menu-dropdown button.current::before{content:"▸";margin-right:-10px}
.menu-dropdown button.current{justify-content:flex-start;gap:14px}
.menu-sep{height:2px;margin:4px 3px;background:#111}
@keyframes menu-drop{from{transform:scaleY(.4);opacity:.3}to{transform:none;opacity:1}}
button.sysbtn{padding:0;font-family:inherit;color:#111;cursor:pointer}
button.sysbtn:active{box-shadow:inset 2px 2px 0 var(--shadow),inset -2px -2px 0 #fff}
.preview-bg-panel.attention{animation:attention-blink .9s steps(2,end) 2}
@keyframes attention-blink{50%{outline:3px solid var(--accent);outline-offset:2px}}

/* ---------- 桌機：右側面板固定在螢幕內，DONE 一直看得到 ---------- */
.workspace>.subwindow.right-panel-fit{position:sticky;top:12px;align-self:start;display:flex;flex-direction:column;height:var(--right-panel-height,auto)}
.right-panel-fit>.right-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:0;scrollbar-gutter:stable}
.right-panel-fit .actionbar{position:sticky;bottom:0;z-index:6;margin:12px -12px 0;padding:10px 12px 12px;background:var(--panel);border-top:2px solid #111}
.right-panel-fit .design-save-status{position:sticky;bottom:70px;z-index:6}

/* ---------- 拖曳吸附中線 ---------- */
.snap-guide{position:absolute;z-index:2;pointer-events:none;opacity:0}
.snap-guide.visible{opacity:1}
.snap-guide-v{top:0;bottom:0;width:0;border-left:2px dashed #ff2d95;margin-left:-1px}
.snap-guide-h{left:0;right:0;height:0;border-top:2px dashed #ff2d95;margin-top:-1px}

/* ---------- 雲端素材載入中 ---------- */
.section-label-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cloud-loading-chip{display:none;align-items:center;gap:6px;padding:2px 6px;border:1px solid #111;background:#fff;font-size:8px;font-weight:900;letter-spacing:.4px;white-space:nowrap}
html.cloud-assets-loading .cloud-loading-chip{display:inline-flex}
.cloud-loading-blocks{display:inline-flex;gap:2px}
.cloud-loading-blocks i{width:5px;height:7px;background:#111;animation:loading-block .9s steps(1,end) infinite}
.cloud-loading-blocks i:nth-child(2){animation-delay:.3s}
.cloud-loading-blocks i:nth-child(3){animation-delay:.6s}
@keyframes loading-block{0%,32%{background:#111}33%,100%{background:#bbb}}

/* ---------- 建立設計代碼時的方塊進度條 ---------- */
.design-confirm-status[data-state="loading"]::after{content:"";display:block;height:10px;margin-top:8px;background:repeating-linear-gradient(90deg,#111 0 8px,transparent 8px 11px);animation:progress-fill 1.4s steps(10,end) infinite}
@keyframes progress-fill{from{width:0}to{width:100%}}

/* ---------- 設計單：像收據從印表機印出來 ---------- */
.design-receipt.printing{animation:receipt-print 1.1s steps(12,end) both}
@keyframes receipt-print{
  from{transform:translateY(-82%);clip-path:inset(82% -6px -24px -6px)}
  to{transform:none;clip-path:inset(-24px -6px -24px -6px)}
}

/* ---------- 繼續上次設計的對話框 ---------- */
.draft-restore-preview{width:132px;margin:14px auto 8px;padding:5px;border:3px solid #111;background:#fff;box-shadow:4px 4px 0 rgba(0,0,0,.22)}
.draft-restore-preview[hidden]{display:none}
.draft-restore-preview img{display:block;width:100%;height:auto}
.draft-restore-dialog small{display:block}

/* ---------- 手機：選項改成左右滑動的兩排，不再擠在小框裡上下捲 ---------- */
@media(max-width:960px),(hover:none) and (pointer:coarse) and (orientation:portrait){
  .mobile-choice-row{grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(2,86px);grid-auto-rows:86px;grid-auto-columns:calc((100% - 15px)/4.3);overflow-x:auto;overflow-y:hidden;max-height:none;padding:0 0 6px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .mobile-choice-row.single-row{grid-template-rows:86px}
  .mobile-choice-row .mobile-choice{scroll-snap-align:start}
  .mobile-choice-row::-webkit-scrollbar{height:6px}
  .mobile-choice-row::-webkit-scrollbar-thumb{background:#111}
  .mobile-choice-row::-webkit-scrollbar-track{background:#d1d1d1}
  .mobile-minihead .cloud-loading-chip{margin-left:auto;margin-right:8px;font-size:7px;padding:1px 5px}
}
@media(min-width:700px) and (max-width:1100px) and (orientation:portrait){
  .mobile-choice-row{grid-auto-columns:calc((100% - 30px)/7.3)}
}

/* ---------- 減少動態效果（系統設定） ---------- */
@media(prefers-reduced-motion:reduce){
  .menu-dropdown,.design-receipt.printing,.preview-bg-panel.attention,.design-confirm-dialog,.design-limit-dialog{animation:none!important}
  .cloud-loading-blocks i,.design-confirm-status[data-state="loading"]::after{animation:none}
  .design-confirm-status[data-state="loading"]::after{width:100%}
}