/* This file contains styles for the case preview page */

:root {
  /* Design tokens — aligned with DESIGN.md strip spec.
	   Defined on :root so footer (rendered outside .a-site) also sees them. */
  --atom-primary: #1b6fe8;
  --atom-primary-dark: #165bc0;
  --atom-primary-soft: rgba(27, 111, 232, 0.12);


  --atom-bg: #0f1223;
  --atom-bg-soft: #181c33;
  --atom-bg-card: #f7f8fc;
  --atom-surface: #ffffff;
  --atom-bg-white: #ffffff;
  --atom-surface-soft: #f4f6fb;

  --atom-text: #333;
  --atom-text-soft: #4a5268;
  --atom-text-muted: #7a8398;
  --atom-text-white: #F5F8FC;
  --atom-white: #F5F8FC;



  --atom-border: #e2e8f0;
  --atom-shadow: 0 1px 3px rgba(27, 111, 232, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --atom-shadow-lg: 0 4px 16px rgba(27, 111, 232, 0.08);
  --atom-radius-lg: 14px;
  --atom-radius-md: 10px;
  --atom-radius-sm: 6px;
  --atom-radius-xl: 22px;
  --atom-radius-full: 9999px;
  --atom-container-width: 1408px;
  --atom-header-height: 100px;


  /* Other color */
  --atomic-wechat-color: #07C160;
}

body.page-template-page-case-preview>header.header,
body.page-template-page-case-preview>footer.footer {
  display: none;
}

/* 浮动工具栏容器 */
.floating-toolbar {
  position: fixed;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  user-select: none;
  touch-action: none;
}

/* 拖拽手柄特殊样式 */
.toolbar-toggle-position {
  cursor: grab !important;
  background: rgba(255, 255, 255, 0.8) !important;
  color: #333 !important;
  border: 1px solid #ccc !important;
}

.toolbar-toggle-position:hover {
  background: #fff !important;
}

.toolbar-toggle-position:active {
  cursor: grabbing !important;
}

/* 按钮组（纵向排列） */
.toolbar-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* 所有按钮统一样式（圆形） */
.floating-toolbar button,
.floating-toolbar .previewer-brand {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.floating-toolbar button:hover,
.floating-toolbar .previewer-brand:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.05);
}

/* 当前激活的设备按钮 */
.floating-toolbar .previewer-device-button.is-active {
  background: var(--atom-primary);
  box-shadow: 0 0 0 2px #fff, 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* 位置切换按钮独立样式 */
.toolbar-toggle-position {
  background: rgba(255, 255, 255, 0.8) !important;
  color: #333 !important;
  border: 1px solid #ccc !important;
}

.toolbar-toggle-position:hover {
  background: #fff !important;
}

/* 四个角落位置 */
.floating-toolbar[data-position="bottom-right"] {
  bottom: 2rem;
  right: 2rem;
}

.floating-toolbar[data-position="bottom-left"] {
  bottom: 2rem;
  left: 2rem;
}

.floating-toolbar[data-position="top-right"] {
  top: 2rem;
  right: 2rem;
}

.floating-toolbar[data-position="top-left"] {
  top: 2rem;
  left: 2rem;
}

/* 移动端适配 */
@media (max-width: 768px) {

  .floating-toolbar button,
  .floating-toolbar .previewer-brand {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .floating-toolbar {
    gap: 0.8rem;
    padding: 0.3rem;
  }

  .toolbar-buttons {
    gap: 0.8rem;
  }
}

/* ---------- preview-shell 宽度控制（沿用 class 方式） ---------- */
.previewer-site-shell {
  max-width: 100%;
  margin: 0 auto;
  transition: max-width 0.3s ease;
}

/* 桌面：全宽（默认） */
.previewer-site-shell.is-tablet {
  max-width: 768px;
}

.previewer-site-shell.is-mobile {
  max-width: 375px;
}


.previewer-site-shell {
  --atom-preview-width: 1920px;
  width: min(100%, var(--atom-preview-width));
  background: var(--atom-surface);
  transition: width 0.28s ease;
}

.previewer-site-shell.is-tablet {
  --atom-preview-width: 860px;
}

.previewer-site-shell.is-mobile {
  --atom-preview-width: 430px;
}