/* ==========================================================================
   16 — AppShell 组件层（HAZ-163 执行轮，规则见 docs/process/rules/ui-spec.md）
   职责：分页器 / icon-btn / 右侧面板 / 工具栏等结构性组件。
   动效归 15 层与 motion-fx.js；token 归 01 层。
   ========================================================================== */

/* ── icon-btn / btn-ghost-icon：28×28 嵌入式幽灵图标钮（§5.1 / §12）──
   规则源：docs/process/rules/ui-spec.md §12 “icon action 嵌入式规范”。
   .btn-ghost-icon 是后续 UI 任务的官方别名；与 .icon-btn 完全等价，
   旧代码继续用 .icon-btn 不破坏，新代码两个都可写。
   ── */
.btn-ghost-icon,
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  /* §12: 嵌入式 icon action 绝不挂阴影；防御 05 等遗留层重新注入 */
  box-shadow: none;
}

.phosphor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  color: currentColor;
  font-size: 1em;
  line-height: 1;
}

.phosphor-icon::before {
  line-height: 1;
}

.nav-icon .phosphor-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.nav-item .nav-icon .phosphor-icon {
  color: var(--nav-icon);
}

.nav-item:hover .nav-icon .phosphor-icon {
  color: var(--nav-hover-icon);
}

.nav-item.active .nav-icon .phosphor-icon {
  color: var(--nav-active-icon);
}

/* Final sidebar nav state. 15 层的通用 hover 会把背景带回 --secondary（接近白色），
   这里在最后加载的组件层把侧栏导航压回中性灰反馈。 */
.sidebar .nav-item:hover,
.sidebar .nav-item:focus-visible {
  background: var(--nav-hover-bg);
  color: var(--nav-hover-text);
  border-color: var(--nav-hover-border);
}

.sidebar .nav-item:hover .nav-icon svg,
.sidebar .nav-item:focus-visible .nav-icon svg {
  stroke: var(--nav-hover-icon);
}

.sidebar .nav-item:hover .nav-icon .phosphor-icon,
.sidebar .nav-item:focus-visible .nav-icon .phosphor-icon {
  color: var(--nav-hover-icon);
}

.sidebar .nav-item.active,
.sidebar .nav-item.active:hover,
.sidebar .nav-item.active:focus-visible {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
  border-color: var(--nav-active-border);
}

.sidebar .nav-item.active .nav-icon svg,
.sidebar .nav-item.active:hover .nav-icon svg,
.sidebar .nav-item.active:focus-visible .nav-icon svg {
  stroke: var(--nav-active-icon);
}

.sidebar .nav-item.active .nav-icon .phosphor-icon,
.sidebar .nav-item.active:hover .nav-icon .phosphor-icon,
.sidebar .nav-item.active:focus-visible .nav-icon .phosphor-icon {
  color: var(--nav-active-icon);
}

.sidebar-shell-toggle .phosphor-icon {
  width: 15px;
  height: 15px;
  font-size: 15px;
  transition: transform 0.26s var(--sidebar-toggle-ease);
}

body.sidebar-collapsed .sidebar-shell-toggle .phosphor-icon {
  transform: rotate(180deg);
}

.auth-input-shell .phosphor-icon,
.sidebar-account-chevron .phosphor-icon,
.sidebar-account-menu-icon .phosphor-icon {
  flex: 0 0 auto;
}

.sidebar-account-menu-icon .phosphor-icon {
  width: 17px;
  height: 17px;
  font-size: 17px;
}

@keyframes aha-workbench-backdrop-in {
  from {
    opacity: 0;
    background: rgba(33, 32, 30, 0.22);
    backdrop-filter: blur(6px) saturate(0.96) brightness(0.98);
    -webkit-backdrop-filter: blur(6px) saturate(0.96) brightness(0.98);
  }
  to {
    opacity: 1;
    background: rgba(33, 32, 30, 0.46);
    backdrop-filter: blur(20px) saturate(0.92) brightness(0.95);
    -webkit-backdrop-filter: blur(20px) saturate(0.92) brightness(0.95);
  }
}

.workbench-overlay-modals {
  position: absolute;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}

/* Feedback / access pass modals live at workbench-panel level so the blur area
   is stable across pages and excludes the left sidebar. */
.workbench-panel > .workbench-overlay-modals > .feedback-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: auto;
  background: rgba(33, 32, 30, 0.46);
  backdrop-filter: blur(20px) saturate(0.92) brightness(0.95);
  -webkit-backdrop-filter: blur(20px) saturate(0.92) brightness(0.95);
  animation: aha-workbench-backdrop-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.btn-ghost-icon:hover,
.btn-ghost-icon:focus-visible,
.icon-btn:hover,
.icon-btn:focus-visible {
  /* §12: 中性灰 hover，不带陶土橙；token 在 09 层定义（亮/暗各一份） */
  background: var(--ghost-hover-bg);
  color: var(--text-main);
}

.btn-ghost-icon:not(:disabled):active,
.icon-btn:not(:disabled):active {
  transform: scale(0.92);
}

/* §12: 选中/active 态不再持久填充，与默认一致透明；可选 color 提示由具体组件
   按需附加（如 .panel-collapse-btn.active 只改 color 不改 background）。 */
.btn-ghost-icon[aria-pressed="true"],
.btn-ghost-icon.is-active,
.btn-ghost-icon.active,
.icon-btn[aria-pressed="true"],
.icon-btn.is-active,
.icon-btn.active {
  background: transparent;
  color: var(--text-main);
}

.btn-ghost-icon[aria-pressed="true"]:hover,
.btn-ghost-icon.is-active:hover,
.btn-ghost-icon.active:hover,
.icon-btn[aria-pressed="true"]:hover,
.icon-btn.is-active:hover,
.icon-btn.active:hover {
  /* active + hover 叠加时仍走中性 hover token，但稍深一档 */
  background: var(--ghost-active-bg);
}

.btn-ghost-icon:disabled,
.icon-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: transparent;
}

.btn-ghost-icon svg,
.btn-ghost-icon .phosphor-icon,
.icon-btn svg,
.icon-btn .phosphor-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

/* DEPRECATED · §12：保留旧 .icon-btn.bordered 仅作向后兼容，
   新代码请使用纯 .btn-ghost-icon（嵌入式无边框）。 */
.icon-btn.bordered {
  border-color: var(--color-border);
  background: var(--color-card);
}

.icon-btn.bordered:hover {
  border-color: var(--color-border-strong);
  background: var(--surface-muted);
}

/* ── 统一分页器（§5.2，R5 位置稳定） ──
   三区 grid：左 meta / 中页码 / 右预留；高度固定，钉在列表底部。
   上一页/下一页永远渲染，禁用时变灰不消失不挪位。 */
:root {
  --pagination-slot-size: 32px;
  --pagination-slot-gap: 4px;
}

.aha-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 48px;
  margin-top: auto;
  padding: 6px 0 0;
}

.aha-pagination-meta {
  justify-self: start;
  padding-left: 12px;
  font-size: var(--text-caption);
  color: var(--text-muted);
  white-space: nowrap;
}

.aha-pagination-pages {
  display: inline-flex;
  align-items: center;
  gap: var(--pagination-slot-gap);
  justify-self: center;
  flex-wrap: nowrap;
}

.aha-pagination-right {
  justify-self: end;
}

.aha-pagination .page-btn {
  width: var(--pagination-slot-size);
  min-width: var(--pagination-slot-size);
  height: var(--pagination-slot-size);
  flex: 0 0 var(--pagination-slot-size);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-control);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

.aha-pagination .page-btn:hover:not(:disabled) {
  background: var(--secondary);
  color: var(--text-main);
}

.aha-pagination .page-btn.active,
.aha-pagination .page-btn.is-active {
  background: var(--primary-accent);
  border-color: var(--primary-accent);
  color: #ffffff;
  font-weight: var(--weight-semibold);
}

.aha-pagination .page-btn:disabled {
  opacity: 0.4;
  cursor: default;
  background: transparent;
}

/* §5.2 单页态：disabled + active 同时挂时，opacity 0.4 + 白字会把"1"
   彻底糊在浅底上，看起来像空 outline。这里反压一次：保留位置，
   用中性灰展示，让单页状态读得出来不读成故障。 */
.aha-pagination .page-btn.active:disabled,
.aha-pagination .page-btn.is-active:disabled {
  opacity: 1;
  background: transparent;
  border-color: transparent;
  color: var(--text-subtle);
  font-weight: var(--weight-medium);
}

.aha-pagination .page-nav svg,
.aha-pagination .page-nav .phosphor-icon {
  width: 15px;
  height: 15px;
  font-size: 15px;
}

.aha-pagination .page-gap,
.aha-pagination .page-ellipsis {
  width: var(--pagination-slot-size);
  min-width: var(--pagination-slot-size);
  height: var(--pagination-slot-size);
  flex: 0 0 var(--pagination-slot-size);
  text-align: center;
  color: var(--text-subtle);
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── 顶部栏动作区（§3）：固定顺序 主动作 | icon 次动作 | 刷新 | 右栏开关 ── */
.topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ── 侧边栏拖拽边界（桌面端） ── */
.sidebar-resize-handle {
  display: none;
  position: relative;
  z-index: 20;
  width: 10px;
  flex: 0 0 10px;
  margin-left: -5px;
  margin-right: -5px;
  cursor: col-resize;
  touch-action: none;
  background: linear-gradient(
    90deg,
    transparent 0,
    transparent 42%,
    color-mix(in srgb, var(--color-border-strong) 36%, transparent) 50%,
    transparent 58%,
    transparent 100%
  );
  opacity: 0.72;
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle:focus-visible,
body.sidebar-resizing .sidebar-resize-handle {
  opacity: 1;
  background: linear-gradient(
    90deg,
    transparent 0,
    transparent 40%,
    color-mix(in srgb, var(--primary-accent) 26%, var(--color-border-strong)) 50%,
    transparent 60%,
    transparent 100%
  );
}

body.sidebar-resizing,
body.sidebar-resizing * {
  user-select: none !important;
  cursor: col-resize !important;
}

body.sidebar-resizing .sidebar,
body.sidebar-resizing .sidebar-nav,
body.sidebar-resizing .main-content {
  pointer-events: none;
}

body.sidebar-resizing .sidebar {
  transition: none !important;
}

body.sidebar-collapsed .sidebar-resize-handle {
  display: none !important;
}

@media (min-width: 1024px) {
  .sidebar-shell-toggle,
  .sidebar-resize-handle {
    display: none !important;
  }

  .sidebar {
    width: 204px !important;
    flex: 0 0 204px !important;
    flex-basis: 204px !important;
  }

  .sidebar-header {
    padding-right: 20px !important;
  }
}

/* ── 右侧上下文面板（§3，对齐 Multica issue-detail 的可折叠右栏） ── */
:root {
  --panel-width: 320px;
}

@media (min-width: 1440px) {
  :root {
    --panel-width: 340px;
  }
}

body.panel-collapsed .context-panel-host {
  display: none;
}

.panel-toggle-btn.active {
  color: var(--text-muted);
  background: transparent;
}

/* ── tooltip（§6）：body 级单例（js/core/tooltip.js），fixed 定位永不被 overflow 裁剪 ── */
.aha-tooltip {
  position: fixed;
  z-index: 9999;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  background: var(--text-main);
  color: var(--color-bg);
  font-size: var(--text-label);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.aha-tooltip[data-show="true"] {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .aha-tooltip {
    transition: none;
  }
}

/* ── 右侧面板折叠态：保留元素、轨道收为 0（配合 JS 列宽动画实现平滑回流） ── */
.context-panel-host {
  min-width: 0;
  overflow: hidden;
}

.context-panel-host[data-panel-collapsed="true"] {
  width: 0 !important;
  min-width: 0 !important;
  flex-basis: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-width: 0 !important;
  opacity: 0;
  pointer-events: none;
}

/* ── 空态/加载/错误图标（替换原 "..."/"⊘"/"!" 文字符号） ── */
.state-icon svg,
.state-icon .phosphor-icon {
  width: 22px;
  height: 22px;
  font-size: 22px;
  color: var(--text-subtle);
}

@keyframes state-loader-spin {
  to { transform: rotate(360deg); }
}

.state-loading .state-icon svg,
.state-loading .state-icon .phosphor-icon {
  animation: state-loader-spin 0.9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .state-loading .state-icon svg,
  .state-loading .state-icon .phosphor-icon {
    animation: none;
  }
}

/* ── 面板收放两件套：面板内「收起」钮 + 屏幕右缘「展开」钮 ── */
.context-panel-host {
  position: relative;
}

/* 收起钮住在 .context-panel-bar 右端，不再绝对定位压内容 */
.context-panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}

.context-panel-bar-title {
  font-size: var(--text-control);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  letter-spacing: 0.02em;
  user-select: none;
}

/* 顶排导航右端的面板开关：active = 面板展开（陶土 tint） */
.panel-collapse-btn {
  align-self: center;
}

.panel-collapse-btn.active {
  color: var(--text-muted);
  border-color: transparent;
  background: transparent;
}

/* review 顶排是 tabs 行，开关推到行最右 */
.review-tabs-container .panel-collapse-btn {
  margin-left: auto;
}

/* [hidden] 必须赢过 .icon-btn 的 display:inline-flex */
.icon-btn[hidden] {
  display: none !important;
}

/* 窄屏（<1024px）面板纵向堆叠展示，折叠机制停用，悬浮钮一并隐藏 */
@media (max-width: 1023px) {
  .sidebar-resize-handle {
    display: none !important;
  }

  .panel-collapse-btn,
  .context-panel-bar {
    display: none !important;
  }

  .context-panel-host[data-panel-collapsed="true"] {
    width: auto !important;
    opacity: 1;
    pointer-events: auto;
    padding: revert !important;
    border-width: revert !important;
  }
}

/* ── 按钮紧凑档（§5.1，仅桌面端）──
   移动端保留原 40px 高度以满足触控目标尺寸；桌面对齐 Multica 的 32px。 */
@media (min-width: 1024px) {
  .btn {
    min-height: 32px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: var(--radius-sm);
    font-weight: var(--weight-medium);
  }
}

/* ── 文案内容页：创作上下文面板（R14 新增，参考 ChatGPT 设计稿） ── */
.content-body-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  align-items: start;
}

.content-context-panel {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

body.content-page .content-context-panel {
  display: flex;
  flex-direction: column;
  min-height: 630px;
  margin-top: 0;
  align-self: stretch;
}

body.content-page .content-context-panel::after {
  content: "";
  flex: 1 1 auto;
}

.content-context-section {
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}

.content-context-section:last-child {
  border-bottom: none;
}

.content-context-section h4 {
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: 0.05em;
  color: var(--text-subtle);
  margin-bottom: 4px;
}

.content-context-section strong {
  display: block;
  font-size: var(--text-body);
}

.content-context-section p {
  font-size: var(--text-control);
  color: var(--text-muted);
  margin-top: 2px;
}

.content-context-muted {
  color: var(--text-subtle);
}

@media (max-width: 1023px) {
  .content-body-row {
    grid-template-columns: minmax(0, 1fr);
  }

  body.content-page .content-context-panel {
    min-height: auto;
    margin-top: 0;
  }
}

/* ── 文案库：详情顶部文案属性条 ── */
.copy-attr-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.copy-attr-chip {
  padding: 2px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--surface-muted);
  font-size: var(--text-caption);
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── 文案库：第四栏文案属性面板（R15，对照老板参考图） ── */
.copy-attr-panel {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px;
  overflow-y: auto;
  min-height: 0;
}

.copy-attr-strip-panel {
  margin-bottom: 2px;
}

.copy-attr-group {
  padding: 10px 0 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}

.copy-attr-group:last-child {
  border-bottom: none;
}

.copy-attr-group h5 {
  font-size: 0.68rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.05em;
  color: var(--text-subtle);
  margin-bottom: 8px;
}

.copy-attr-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 5px 0;
  font-size: 0.76rem;
}

.copy-attr-row span {
  color: var(--text-muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.copy-attr-row strong {
  font-weight: var(--weight-medium);
  line-height: 1.5;
  text-align: left;
  min-width: 0;
  overflow-wrap: anywhere;
}

.copy-attr-row-stack {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding-top: 2px;
}

.copy-attr-source {
  display: block;
  max-height: min(42vh, 340px);
  overflow-y: auto;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-muted) 68%, white 32%);
  font-size: 0.74rem;
  line-height: 1.6;
  white-space: normal;
}

.copy-attr-status {
  color: var(--color-success);
}

.copylibrary-tags-panel {
  margin-top: 0;
}

.copy-attr-empty {
  font-size: var(--text-control);
  color: var(--text-subtle);
  padding: 12px 0;
}

@media (max-width: 1023px) {
  .copylibrary-workspace-grid {
    grid-template-columns: 220px 330px minmax(0, 1fr);
  }

  .copy-attr-panel {
    display: none;
  }
}

/* 资源库等工具栏会给子按钮塞 padding（0 12px），把 28px 开关压成 2px 竖条——定点加固 */
.panel-collapse-btn.icon-btn {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
}

.panel-collapse-btn.icon-btn svg,
.panel-collapse-btn.icon-btn .phosphor-icon {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  flex: none;
}

/* R16 收口巡查发现：≤1366px 时文案库四列把阅读区挤到 ~135px，收紧两侧列宽保住阅读区 */
@media (min-width: 1024px) and (max-width: 1366px) {
  .copylibrary-workspace-grid {
    grid-template-columns: 170px 260px minmax(0, 1fr) 230px;
  }
}