.root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 4px;
}

.bar {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  background: rgba(var(--bg-color), var(--bg-opacity));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(var(--border), 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: all 0.18s ease-out;
}

.barCollapsed {
  width: fit-content;
  padding: 0 4px;
  height: 32px;
}

/* 锁定时整条工具栏使用更醒目的边框色 */
.barLocked {
  border-color: rgba(var(--warning), 0.4);
  box-shadow: var(--shadow), 0 0 0 1px rgba(var(--warning), 0.2);
}

/* 禁用区域：降低透明度 + 屏蔽鼠标 */
.disabledRegion {
  pointer-events: none;
  opacity: 0.45;
}

.dragHandle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 100%;
  color: rgba(var(--fg-dim), 0.7);
  cursor: grab;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  transition: background 0.12s, color 0.12s;
  -webkit-app-region: drag;
}
.dragHandle:hover {
  background: rgba(var(--border), 0.08);
  color: rgb(var(--fg-color));
}
.dragHandle:active {
  cursor: grabbing;
  background: rgba(var(--border), 0.12);
}

/* 锁定态：拖动柄禁用。必须显式覆盖 -webkit-app-region，
   否则浏览器/WebView 在 mousedown 之前就已接管为原生拖动区，JS 拦不住 */
.dragHandleLocked {
  cursor: not-allowed !important;
  opacity: 0.4;
  -webkit-app-region: no-drag;
  app-region: no-drag;
}
.dragHandleLocked:hover,
.dragHandleLocked:active {
  background: transparent;
  color: rgba(var(--fg-dim), 0.7);
}

.iconBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: rgb(var(--fg-color));
  transition: background 0.12s ease, color 0.12s ease;
}
.iconBtn:hover {
  background: rgba(var(--border), 0.08);
}
.iconBtnActive {
  background: rgba(var(--accent), 0.18);
  color: rgb(var(--accent));
}

.iconBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.iconBtn:disabled:hover {
  background: transparent;
}

/* 锁定按钮启用态：黄色高亮提示当前锁定中 */
.lockBtnActive {
  background: rgba(var(--warning), 0.2);
  color: rgb(var(--warning));
}
.lockBtnActive:hover {
  background: rgba(var(--warning), 0.3) !important;
}

.divider {
  width: 1px;
  height: 22px;
  background: rgba(var(--border), 0.1);
  margin: 0 2px;
}

.shortcutsRegion {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 4px;
  padding: 0 2px;
  scrollbar-width: thin;
}

.shortcutsRegion::-webkit-scrollbar {
  height: 4px;
}

.panelWrap {
  margin-top: 6px;
  background: rgba(var(--bg-color), var(--bg-opacity));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(var(--border), 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  overflow: hidden;
}
