/* Notification toast */
#toast{
  position:fixed;
  left:28px;
  bottom:28px;
  z-index:999999;
  transform:translateY(20px) scale(var(--zoom));
  transform-origin:bottom left;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease, transform .35s var(--ease-bounce);
}
#toast.show{
  opacity:1;
  transform:translateY(0) scale(var(--zoom));
}
.toastInner{
  pointer-events:none;
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  border-radius:var(--r);
  border:1px solid rgba(140,160,210,.10);
  background:rgba(18,21,30,.95);
  box-shadow:var(--shadow2);
}
.toastIcon{width:18px; height:18px; display:flex; align-items:center; justify-content:center;}
.toastIcon .fa{font-size:14px; color:rgba(200,212,238,.78)!important; opacity:.95; transition:transform .3s var(--ease-bounce);}
#toast.show .toastIcon .fa{animation:toastIconIn .4s var(--ease-bounce);}
@keyframes toastIconIn{
  0%{transform:scale(0) rotate(-90deg);}
  60%{transform:scale(1.2) rotate(5deg);}
  100%{transform:scale(1) rotate(0);}
}
.toastMsg{
  font-size:13px;
  font-weight:600;
  letter-spacing:0;
  color:var(--text);
}

/* Toolbar icon buttons — borderless */
.toolbarIcon{
  width:36px; height:36px;
  border-radius:var(--r2);
  background:var(--surface-2);
  border:none;
  color:rgba(218,225,240,.85);
  font-size:14px;
  transition:all .2s var(--ease-bounce);
}
.toolbarIcon:hover{
  background:var(--surface-3);
  color:rgba(235,240,252,.95);
  transform:translateY(-1px);
}
.toolbarIcon:active{
  transform:scale(.9) translateY(0);
  transition-duration:.08s;
}

/* Tooltip */
.tooltip{
  position:fixed;
  pointer-events:none;
  z-index:99999;
  border-radius:var(--r);
  padding:14px 16px;
  opacity:0;
  transform:translateY(6px) scale(.96);
  transition:opacity .2s ease, transform .25s var(--ease-bounce), left .12s ease, top .12s ease;
  max-width:320px;
  font-family:var(--sans);
  background:rgba(18,21,30,.95);
  border:1px solid rgba(140,160,210,.10);
  box-shadow:var(--shadow2);
}
.tooltip.visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.tooltip::before{display:none;}
.tooltip::after{display:none;}
.tooltip-title{
  font-family:var(--brand);
  font-weight:700;
  font-size:14px;
  margin-bottom:6px;
  letter-spacing:-.01em;
  color:rgba(235,240,252,.95);
}
.tooltip-desc{
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  color:rgba(170,182,210,.82);
  line-height:1.55;
  letter-spacing:0;
  position:relative;
  z-index:1;
}
.tooltip-desc:empty{display:none;}
.tooltip-desc:empty ~ .tooltip-title{margin-bottom:0;}

.subsBox{position:relative;}
.subsMenu{
  position:absolute; left:50%; bottom:calc(100% + 10px);
  transform:translateX(-50%) scale(.95);
  min-width:220px; padding:8px;
  border-radius:var(--r); border:1px solid rgba(140,160,210,.10);
  background:rgba(18,21,30,.95);
  box-shadow:var(--shadow);
  display:none; z-index:30;
  opacity:0;
  transition:opacity .15s ease, transform .2s var(--ease-bounce);
}
.subsMenu.show{display:block; opacity:1; transform:translateX(-50%) scale(1);}
.subsMenuHeader{padding:6px 12px 4px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--textDim); transition:color .2s ease;}
.subsMenuItem{padding:10px 12px; border-radius:var(--r3); cursor:pointer; user-select:none; font-size:12px; font-weight:600; color:var(--text); letter-spacing:0; display:flex; align-items:center; gap:10px; transition:all .2s var(--ease-bounce);}
.subsMenuItem:hover{background:var(--surfaceHover); padding-left:16px;}
.subsMenuItem:active{transform:scale(.97); transition-duration:.08s;}
.subsMenuItem .fa{font-size:13px; color:var(--iconStrong)!important; opacity:.85; width:18px; text-align:center; transition:transform .2s var(--ease-bounce), opacity .15s ease;}
.subsMenuItem:hover .fa{transform:scale(1.15) rotate(-5deg); opacity:1;}
.subsMenuItem.embedded{color:rgba(150,185,230,.92);}
.subsDivider{height:1px; background:rgba(140,160,210,.06); margin:6px 4px;}
.subsEmpty{padding:10px 12px; color:var(--textDim); font-size:11px; text-align:center;}

.speedMenu{
  position:absolute; right:0; bottom:calc(100% + 10px);
  min-width:180px; padding:8px;
  border-radius:var(--r); border:1px solid rgba(140,160,210,.10);
  background:rgba(18,21,30,.95);
  box-shadow:var(--shadow);
  display:none; z-index:30;
  opacity:0;
  transform:scale(.95) translateY(4px);
  transition:opacity .15s ease, transform .2s var(--ease-bounce);
}
.speedMenu.show{display:block; opacity:1; transform:scale(1) translateY(0);}
.speedItem{padding:10px 10px; border-radius:var(--r3); cursor:pointer; user-select:none; font-family:var(--mono); font-size:14px; color:var(--text); letter-spacing:.02em; display:flex; align-items:center; justify-content:space-between; gap:10px; transition:all .2s var(--ease-bounce);}
.speedItem:hover{background:var(--surfaceHover); padding-left:14px;}
.speedItem:active{transform:scale(.97); transition-duration:.08s;}
.speedItem .dot{width:8px; height:8px; border-radius:999px; background:rgba(140,165,220,.06); border:none; flex:0 0 auto; transition:all .2s var(--ease-bounce);}
.speedItem:hover .dot{transform:scale(1.3);}
.speedItem.active .dot{background:rgba(136,164,196,.65);}
.speedItem.active:hover .dot{background:rgba(136,164,196,.80); box-shadow:0 0 6px rgba(136,164,196,.25);}

.subsMenuItem:focus-visible{background:var(--surfaceHover); padding-left:16px; outline:none;}
.speedItem:focus-visible{background:var(--surfaceHover); padding-left:14px; outline:none;}
.dropItem:focus-visible{background:var(--surfaceHover); padding-left:16px; outline:none;}

/* Keyboard shortcut help dialog */
.shortcutHelp{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
}
.shortcutHelpBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}
.shortcutHelpPanel{
  position:relative;
  z-index:1;
  padding:28px 32px;
  border-radius:var(--r);
  background:rgba(18,21,30,.97);
  border:1px solid rgba(140,160,210,.12);
  box-shadow:var(--shadow);
  max-width:420px;
  width:90%;
}
.shortcutHelpTitle{
  font-family:var(--brand);
  font-weight:700;
  font-size:16px;
  margin:0 0 20px;
  color:rgba(235,240,252,.95);
  letter-spacing:-.01em;
}
.shortcutGrid{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px 20px;
  align-items:baseline;
}
.shortcutKey{
  text-align:right;
  white-space:nowrap;
}
.shortcutKey kbd{
  display:inline-block;
  padding:3px 8px;
  border-radius:4px;
  background:rgba(140,165,220,.08);
  border:1px solid rgba(140,165,220,.12);
  font-family:var(--mono);
  font-size:12px;
  color:rgba(200,212,238,.88);
  line-height:1;
}
.shortcutDesc{
  font-size:13px;
  color:rgba(200,212,238,.78);
}
.shortcutHelpClose{
  margin-top:20px;
  text-align:center;
  font-size:11px;
  color:var(--textDim);
}
.shortcutHelpClose kbd{
  display:inline-block;
  padding:2px 6px;
  border-radius:3px;
  background:rgba(140,165,220,.06);
  border:1px solid rgba(140,165,220,.10);
  font-family:var(--mono);
  font-size:11px;
  color:rgba(170,182,210,.70);
}