/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Composer "+" menu (add file / skills) and attached-skill chips. Chrome tokens
 * only; each app imports this next to its other @lycero/ui sheets. */

.ai-plus {
  display: inline-flex;
  flex-shrink: 0;
}

.ai-plus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-30);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ai-plus-btn:hover,
.ai-plus-btn.open {
  background: var(--hover);
  color: var(--text);
}

.ai-plus-btn.has-skills {
  color: var(--accent);
}

.ai-plus-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
}

.ai-plus-pop {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: 280px;
  max-height: min(420px, 70vh);
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-menu);
  font-size: 12px;
}

.ai-plus-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: none;
  border-radius: var(--radius-6);
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.ai-plus-item:hover {
  background: var(--hover);
}

.ai-plus-item-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-plus-chevron {
  color: var(--text-secondary);
}

.ai-plus-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--border-subtle);
}

.ai-plus-search-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
}

.ai-plus-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius-6);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}

.ai-plus-back:hover {
  background: var(--hover);
  color: var(--text);
}

.ai-plus-search {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-6);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
}

.ai-plus-search:focus {
  outline: none;
  border-color: var(--accent);
}

.ai-plus-list {
  flex: 1;
  min-height: 0;
  margin-top: 4px;
  overflow-y: auto;
}

.ai-plus-empty {
  padding: 12px 8px;
  color: var(--text-secondary);
  text-align: center;
}

.ai-plus-skill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: var(--radius-6);
  background: none;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ai-plus-skill:hover {
  background: var(--hover);
}

.ai-plus-skill.on {
  background: var(--accent-soft);
}

.ai-plus-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--hover);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.ai-plus-skill-text {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.ai-plus-skill-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ai-plus-skill-name {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-plus-cloud-badge {
  flex-shrink: 0;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.ai-plus-skill.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ai-plus-skill-desc {
  color: var(--text-secondary);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-plus-check {
  flex-shrink: 0;
  color: var(--accent);
}

.ai-plus-manage {
  flex-shrink: 0;
  margin-top: 4px;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--radius-6) var(--radius-6);
  color: var(--text-secondary);
}

.ai-skill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 8px 0;
}

.ai-skill-chips-sent {
  padding: 0 0 6px;
}

.ai-skill-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  max-width: 220px;
  padding: 0 6px 0 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-30);
  background: var(--accent-soft);
  color: var(--text);
  font-size: 12px;
}

.ai-skill-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-skill-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}

.ai-skill-chip-remove:hover {
  background: var(--hover);
  color: var(--text);
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* 5-Hour Quota circular ring button & popover in the chat composer footer (Astryx Craft) */

.ai-quota-widget {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ai-quota-ring-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 7px 0 5px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(28, 27, 24, 0.14));
  background: var(--bg-subtle, rgba(28, 27, 24, 0.04));
  color: var(--text-secondary, #5c5952);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    background-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
    color 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-quota-ring-btn:hover,
.ai-quota-ring-btn.open {
  background: var(--accent-soft, rgba(139, 58, 26, 0.08));
  border-color: var(--accent-border, rgba(139, 58, 26, 0.28));
  color: var(--text-primary, #1c1b18);
}

.ai-quota-ring-svg {
  flex-shrink: 0;
  display: block;
}

.ai-quota-ring-track {
  stroke: var(--border, rgba(139, 58, 26, 0.2));
}

[data-theme='dark'] .ai-quota-ring-track {
  stroke: rgba(245, 244, 239, 0.18);
}

.ai-quota-ring-fill {
  transition: stroke-dashoffset 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-quota-ring-fill.tone-ok {
  stroke: var(--accent, #8b3a1a);
}

[data-theme='dark'] .ai-quota-ring-fill.tone-ok {
  stroke: #d97757;
}

.ai-quota-ring-fill.tone-warn {
  stroke: var(--warning, #b45309);
}

[data-theme='dark'] .ai-quota-ring-fill.tone-warn {
  stroke: #f59e0b;
}

.ai-quota-ring-fill.tone-danger {
  stroke: var(--danger, #b91c1c);
}

[data-theme='dark'] .ai-quota-ring-fill.tone-danger {
  stroke: #ef4444;
}

.ai-quota-ring-text {
  letter-spacing: -0.01em;
}

/* Popover displaying 5-Hour, Weekly & Monthly quota metrics */
.ai-quota-popover {
  position: fixed;
  z-index: 9999;
  width: 284px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #ddd9ce);
  background: var(--surface, #f9f8f3);
  color: var(--text-primary, #1c1b18);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(28, 27, 24, 0.14));
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: ai-quota-pop-in 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme='dark'] .ai-quota-popover {
  background: #262624;
  border-color: #3d3c38;
  color: #f5f4ef;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

@keyframes ai-quota-pop-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-quota-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, rgba(28, 27, 24, 0.1));
}

[data-theme='dark'] .ai-quota-pop-head {
  border-bottom-color: rgba(245, 244, 239, 0.1);
}

.ai-quota-pop-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-quota-pop-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #1c1b18);
}

[data-theme='dark'] .ai-quota-pop-title {
  color: #f5f4ef;
}

.ai-quota-tier-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--accent-soft, rgba(139, 58, 26, 0.1));
  color: var(--accent, #8b3a1a);
}

[data-theme='dark'] .ai-quota-tier-badge {
  background: rgba(217, 119, 87, 0.16);
  color: #d97757;
}

.ai-quota-sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid var(--border, rgba(28, 27, 24, 0.14));
  background: transparent;
  color: var(--text-secondary, #5c5952);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background-color 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-quota-sync-btn:hover:not(:disabled) {
  background: var(--accent-soft, rgba(139, 58, 26, 0.08));
  color: var(--text-primary, #1c1b18);
}

[data-theme='dark'] .ai-quota-sync-btn {
  border-color: rgba(245, 244, 239, 0.16);
  color: #b8b5ad;
}

[data-theme='dark'] .ai-quota-sync-btn:hover:not(:disabled) {
  background: rgba(217, 119, 87, 0.14);
  color: #f5f4ef;
}

.ai-quota-spin {
  animation: ai-quota-rotate 0.8s linear infinite;
}

@keyframes ai-quota-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.ai-quota-pop-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-quota-pop-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-quota-pop-item.featured {
  padding: 7px 8px;
  border-radius: 7px;
  background: var(--accent-soft, rgba(139, 58, 26, 0.06));
  border: 1px solid var(--accent-border, rgba(139, 58, 26, 0.16));
}

[data-theme='dark'] .ai-quota-pop-item.featured {
  background: rgba(217, 119, 87, 0.1);
  border-color: rgba(217, 119, 87, 0.24);
}

.ai-quota-pop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
}

.ai-quota-pop-label {
  font-weight: 600;
  color: var(--text-primary, #1c1b18);
}

[data-theme='dark'] .ai-quota-pop-label {
  color: #f5f4ef;
}

.ai-quota-pop-pct {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ai-quota-pop-pct.tone-ok {
  color: var(--accent, #8b3a1a);
}

[data-theme='dark'] .ai-quota-pop-pct.tone-ok {
  color: #d97757;
}

.ai-quota-pop-pct.tone-warn {
  color: var(--warning, #b45309);
}

[data-theme='dark'] .ai-quota-pop-pct.tone-warn {
  color: #f59e0b;
}

.ai-quota-pop-pct.tone-danger {
  color: var(--danger, #b91c1c);
}

[data-theme='dark'] .ai-quota-pop-pct.tone-danger {
  color: #ef4444;
}

.ai-quota-bar-track {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: var(--border, rgba(28, 27, 24, 0.12));
  overflow: hidden;
}

[data-theme='dark'] .ai-quota-bar-track {
  background: rgba(245, 244, 239, 0.14);
}

.ai-quota-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-quota-bar-fill.tone-ok {
  background: var(--accent, #8b3a1a);
}

[data-theme='dark'] .ai-quota-bar-fill.tone-ok {
  background: #d97757;
}

.ai-quota-bar-fill.tone-warn {
  background: var(--warning, #b45309);
}

[data-theme='dark'] .ai-quota-bar-fill.tone-warn {
  background: #f59e0b;
}

.ai-quota-bar-fill.tone-danger {
  background: var(--danger, #b91c1c);
}

[data-theme='dark'] .ai-quota-bar-fill.tone-danger {
  background: #ef4444;
}

.ai-quota-pop-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 10.5px;
  color: var(--text-secondary, #5c5952);
  font-variant-numeric: tabular-nums;
}

[data-theme='dark'] .ai-quota-pop-sub {
  color: #b8b5ad;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-ring-track {
    stroke: rgba(245, 244, 239, 0.18);
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-ring-fill.tone-ok {
    stroke: #d97757;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-ring-fill.tone-warn {
    stroke: #f59e0b;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-ring-fill.tone-danger {
    stroke: #ef4444;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-popover {
    background: #262624;
    border-color: #3d3c38;
    color: #f5f4ef;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-head {
    border-bottom-color: rgba(245, 244, 239, 0.1);
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-title,
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-label {
    color: #f5f4ef;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-tier-badge {
    background: rgba(217, 119, 87, 0.16);
    color: #d97757;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-sync-btn {
    border-color: rgba(245, 244, 239, 0.16);
    color: #b8b5ad;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-sync-btn:hover:not(:disabled) {
    background: rgba(217, 119, 87, 0.14);
    color: #f5f4ef;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-item.featured {
    background: rgba(217, 119, 87, 0.1);
    border-color: rgba(217, 119, 87, 0.24);
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-pct.tone-ok {
    color: #d97757;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-pct.tone-warn {
    color: #f59e0b;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-pct.tone-danger {
    color: #ef4444;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-bar-track {
    background: rgba(245, 244, 239, 0.14);
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-bar-fill.tone-ok {
    background: #d97757;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-bar-fill.tone-warn {
    background: #f59e0b;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-bar-fill.tone-danger {
    background: #ef4444;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-sub {
    color: #b8b5ad;
  }
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Lycero Mate — ThinkingBlock (reasoning accordion).
 * Auto-expands while reasoning streams, collapses when finished.
 * Uses design tokens from packages/ui/src/tokens.css.
 * Animations 200ms ease-out (anti-slop: no bounce, no elastic). */

.lycero-thinking-block {
  margin: 8px 0 10px 0;
  border-radius: var(--radius-8, 8px);
  border: 1px solid var(--color-border-subtle, #DDD9CE);
  background-color: var(--color-bg-secondary, #F9F8F3);
  overflow: hidden;
  font-size: 12px;
  transition:
    border-color var(--transition-medium),
    background-color var(--transition-medium);
}

.lycero-thinking-block.expanded {
  border-color: var(--accent, #8B3A1A);
}

.lycero-thinking-block.collapsed {
  /* gentle hover hint */
}

.lycero-thinking-block.collapsed:hover {
  border-color: var(--border-hover, #BDB7A7);
}

.lycero-thinking-block.lycero-thinking-active {
  /* animated gradient stripe when reasoning */
  background-image: linear-gradient(
    90deg,
    var(--color-bg-secondary, #F9F8F3) 0%,
    var(--bg-hover-accent, #F5EBE7) 50%,
    var(--color-bg-secondary, #F9F8F3) 100%
  );
  background-size: 200% 100%;
  animation: lycero-thinking-shimmer 2s linear infinite;
}

@keyframes lycero-thinking-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Dark mode: subtle terracotta-tinted shimmer */
@media (prefers-color-scheme: dark) {
  .lycero-thinking-block.lycero-thinking-active {
    background-image: linear-gradient(
      90deg,
      var(--surface, #2E2D2A) 0%,
      var(--bg-hover-accent, #3D2A24) 50%,
      var(--surface, #2E2D2A) 100%
    );
  }
}

.lycero-thinking-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary, #56544D);
  user-select: none;
  text-align: left;
  font-family: inherit;
  /* gentle hover */
}

.lycero-thinking-header:hover {
  background-color: var(--bg-hover-subtle, #F1EEE5);
}

.lycero-thinking-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lycero-thinking-pulse {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--accent, #8B3A1A);
  display: inline-block;
  position: relative;
  opacity: 0.9;
}

.lycero-thinking-pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--accent, #8B3A1A);
  opacity: 0.5;
  animation: lycero-thinking-pulse 1.2s ease-out infinite;
}

@keyframes lycero-thinking-pulse {
  0% { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

.lycero-thinking-title {
  font-weight: 600;
  color: var(--text-primary, #1C1B18);
  font-size: 12.5px;
  letter-spacing: 0;
}

.lycero-thinking-meta {
  font-size: 11px;
  color: var(--text-muted, #6B6860);
}

.lycero-thinking-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted, #6B6860);
}

.lycero-thinking-caret {
  transition: transform var(--transition-medium);
}

.lycero-thinking-caret.open {
  transform: rotate(180deg);
}

.lycero-thinking-content {
  padding: 8px 12px 10px 12px;
  border-top: 1px solid var(--color-border-subtle, #DDD9CE);
  max-height: 260px;
  overflow-y: auto;
  color: var(--text-secondary, #56544D);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--gs-font-mono, 'Be Vietnam Pro', 'Segoe UI', 'Cascadia Mono', Consolas, sans-serif);
  font-size: 11.5px;
  background-color: var(--color-bg-subtle, #F4F2EB);
}

.lycero-thinking-cursor {
  display: inline-block;
  width: 6px;
  height: 13px;
  margin-left: 3px;
  background-color: var(--accent, #8B3A1A);
  vertical-align: middle;
  animation: lycero-thinking-blink 1s steps(2) infinite;
}

@keyframes lycero-thinking-blink {
  50% { opacity: 0; }
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Lycero Mate — Floating Bubble Toolbar.
 * Positioned absolutely inside the host's overlay portal. Sits above the
 * user's text selection; flips below the selection when the top edge is
 * clipped by the viewport. Animations 200ms ease-out (anti-slop). */

.lycero-mate-bubble {
  position: fixed;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background-color: var(--bg-elevated, #FFFFFF);
  border: 1px solid var(--border, #DDD9CE);
  border-radius: 10px;
  box-shadow: 0 6px 20px -4px rgba(28, 27, 24, 0.12),
              0 2px 6px -2px rgba(28, 27, 24, 0.08);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary, #1C1B18);
  transform: translateY(-100%);
  /* Native-render right-to-left scripts (Arabic / Hebrew) inside the bubble */
  direction: inherit;
  user-select: none;
  /* Prevent selection clearing when clicking buttons */
  -webkit-user-select: none;
  pointer-events: auto;
  animation: lycero-mate-bubble-in 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lycero-mate-bubble.lycero-mate-bubble-below {
  transform: translateY(0);
}

.lycero-mate-bubble-btn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary, #1C1B18);
  cursor: pointer;
  transition:
    background-color var(--transition-fast, 150ms ease-out),
    border-color var(--transition-fast, 150ms ease-out),
    color var(--transition-fast, 150ms ease-out);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.lycero-mate-bubble-btn:hover {
  background-color: var(--bg-hover-subtle, #F1EEE5);
  border-color: var(--border-hover, #BDB7A7);
}

.lycero-mate-bubble-btn:active {
  background-color: var(--bg-hover-strong, #E8E3D6);
}

.lycero-mate-bubble-btn:focus-visible {
  outline: 2px solid var(--accent, #8B3A1A);
  outline-offset: 1px;
}

.lycero-mate-bubble-btn-cta {
  color: var(--accent, #8B3A1A);
  font-weight: 600;
}

.lycero-mate-bubble-btn-cta:hover {
  background-color: var(--bg-hover-accent, #F5EBE7);
  color: var(--accent-dark, #5F2812);
}

.lycero-mate-bubble-divider {
  width: 1px;
  height: 18px;
  background-color: var(--border, #DDD9CE);
  margin: 0 2px;
}

@keyframes lycero-mate-bubble-in {
  0% {
    opacity: 0;
    transform: translateY(-100%) translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(-100%) translateY(0);
  }
}

.lycero-mate-bubble.lycero-mate-bubble-below {
  animation-name: lycero-mate-bubble-in-below;
}

@keyframes lycero-mate-bubble-in-below {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .lycero-mate-bubble {
    background-color: var(--bg-elevated, #2E2D2A);
    border-color: var(--border, #3D3B36);
    box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.4),
                0 2px 6px -2px rgba(0, 0, 0, 0.25);
  }
  .lycero-mate-bubble-btn:hover {
    background-color: var(--bg-hover-subtle, #353431);
    border-color: var(--border-hover, #4D4A42);
  }
  .lycero-mate-bubble-btn:active {
    background-color: var(--bg-hover-strong, #3F3D38);
  }
  .lycero-mate-bubble-divider {
    background-color: var(--border, #3D3B36);
  }
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries. All rights reserved.
 *
 * Astryx Dynamic Capabilities Panel Styles
 */

.lycero-cap-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background-color: var(--surface);
  color: var(--text-primary);
  font-family: var(--gs-font-sans);
  border-radius: var(--radius-8);
  border: 1px solid var(--border);
  box-sizing: border-box;
}

.lycero-cap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lycero-cap-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.lycero-cap-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lycero-cap-active-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-30);
  background-color: var(--bg-hover-accent, #F5EBE7);
  color: var(--color-ai-action, #8B3A1A);
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.lycero-cap-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-6);
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.lycero-cap-refresh-btn:hover:not(:disabled) {
  background-color: var(--hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.lycero-cap-refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.lycero-cap-spin {
  animation: lycero-spin 1s linear infinite;
}

@keyframes lycero-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.lycero-cap-offline-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background-color: var(--danger-bg, #FAEEE8);
  border: 1px solid var(--danger-border, #E8C7BD);
  border-radius: var(--radius-6);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--danger, #B43A28);
  line-height: 1.45;
}

.lycero-cap-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lycero-cap-card {
  background-color: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color var(--transition-fast);
}

.lycero-cap-card.active {
  border-color: var(--color-border-brand, #8B3A1A);
  background-color: var(--surface);
}

.lycero-cap-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.lycero-cap-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lycero-cap-card-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lycero-cap-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.lycero-cap-category-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-4, 4px);
  background-color: var(--hover);
  color: var(--text-muted);
}

.lycero-cap-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* Astryx Toggle Switch */
.lycero-cap-toggle-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.lycero-cap-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.lycero-cap-toggle-track {
  width: 38px;
  height: 22px;
  background-color: var(--border-strong);
  border-radius: var(--radius-30);
  transition: background-color var(--transition-fast);
  position: relative;
}

.lycero-cap-toggle-input:checked + .lycero-cap-toggle-track {
  background-color: var(--color-ai-action, #8B3A1A);
}

.lycero-cap-toggle-thumb {
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.lycero-cap-toggle-input:checked + .lycero-cap-toggle-track .lycero-cap-toggle-thumb {
  transform: translateX(16px);
}

/* Dynamic Configuration Form */
.lycero-cap-config-form {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lycero-cap-config-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lycero-cap-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lycero-cap-field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-primary);
}

.lycero-cap-field-desc {
  font-size: 11px;
  color: var(--text-muted);
}

.lycero-cap-select {
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-6);
  background-color: var(--surface);
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
  transition: border-color var(--transition-fast);
}

.lycero-cap-select:focus {
  border-color: var(--color-border-brand, #8B3A1A);
}

.lycero-cap-slider-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lycero-cap-slider {
  flex: 1;
  accent-color: var(--color-ai-action, #8B3A1A);
  cursor: pointer;
}

.lycero-cap-slider-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ai-action, #8B3A1A);
  min-width: 24px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lycero-cap-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
}

.lycero-cap-checkbox {
  accent-color: var(--color-ai-action, #8B3A1A);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.lycero-cap-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--text-muted);
  font-size: 13px;
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Lycero Office design tokens — single source of truth for UI chrome colors.
 * Theme switching: light defaults in :root, [data-theme='dark'] overrides,
 * prefers-color-scheme fallback for system mode (no data-theme attribute).
 * Per-app accents (--accent / --accent-dark / --accent-soft) live in each
 * app's styles.css. Document content colors (paper, cells, exports, chart
 * palettes) never live here and never reference these tokens.
 *
 * Astryx palette (DESIGN.md §2):
 *   Day  — Matte Warm Ivory & Terracotta:    #F4F2EB bg, #F9F8F3 paper,
 *                                             #1C1B18 ink, #DDD9CE border,
 *                                             #8B3A1A terracotta accent.
 *   Night — Claude-Warm Charcoal & Radiant Terracotta:
 *                                             #262624 bg (not #000), #2E2D2A paper,
 *                                             #F5F4EF ink, #403E3A border,
 *                                             #D97757 terracotta accent.
 * Anti-slop: tints are warm (no cold blue/gray), and the brand terracotta is
 * the only saturated hue in the chrome. */

:root {
  --ui-scale: 1;
  --docs-revision-bar: #c00000;
  /* ── Day chrome (Warm Ivory) ─────────────────────────────────────────── */
  --surface: #F9F8F3;                /* paper — soft, gentle, anti-glare */
  --surface-subtle: #F4F2EB;         /* canvas background, behind paper */
  --chrome-bg: #F4F2EB;
  --canvas: #E8E4DA;
  --border: #DDD9CE;                 /* hairline — thin, warm */
  --border-subtle: #E5E1D6;
  --border-strong: #C9C4B6;
  --border-hover: #BDB7A7;

  /* Warm-ink text scale. Each step is a tint darker / lighter than the
   * previous, never pure black or pure white. */
  --text: #1C1B18;
  --text-primary: #1C1B18;
  --text-secondary: #56544D;
  --text-tertiary: #7A776C;
  --text-muted: #6B6860;
  --text-dim: #8E8B7E;

  /* Hover/pressed/active — warm gray tints, never cool blue */
  --hover: #EFECE3;
  --pressed: #E8E4D9;
  --active-bg: #E0DBCD;
  --bg-hover: #EFECE3;
  --bg-hover-subtle: #F1EEE5;
  --bg-hover-strong: #E8E4D9;
  --bg-hover-accent: #F5EBE7;
  --bg-content: #FBFAF6;
  --icon-muted: #A39E92;

  /* Semantic states — terracotta-tinted, not blue/red */
  --danger: #B43A28;
  --danger-bg: #FAEEE8;
  --danger-border: #E8C7BD;
  --success: #4D6B3D;
  --success-bg: #EEF3E4;
  --success-border: #C9D7B7;
  --search-hit-bg: #F5E6C8;
  --search-hit-active-bg: #D97757;
  --search-hit-active-ink: #FBFAF6;

  /* Shadows — soft, warm, never harsh black */
  --color-bg-overlay: rgb(28 27 24 / 45%);
  --shadow-modal-strong: 0 20px 25px rgb(60 50 35 / 12%);
  --shadow-btn-hover: 0 2px 8px rgb(60 50 35 / 12%);
  --shadow-menu: 0 8px 24px rgb(60 50 35 / 14%);

  /* ── AI panel & shared chrome aliases ────────────────────────────────── */
  /* Typography: Be Vietnam Pro is the system font (DESIGN.md §3). Falls back
   * to native UI sans (system fonts guarantee zero CLS). */
  --gs-font-sans:
    'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --gs-font-mono:
    'Be Vietnam Pro', 'Segoe UI', 'Cascadia Mono', 'JetBrains Mono', Consolas,
    sans-serif;
  --color-btn-primary: #1C1B18;
  --color-btn-primary-hover: #38362F;
  --color-btn-primary-text: #FBFAF6;
  --color-ai-action: #8B3A1A;        /* terracotta brand */
  --color-ai-action-hover: #6D2D14;
  --color-ai-action-text: #FBFAF6;
  --color-brand-secondary: #6B5A3E;  /* warm olive — used rarely */
  --color-text-primary: #1C1B18;
  --color-text-secondary: #56544D;
  --color-text-tertiary: #7A776C;
  --color-bg-page: #F9F8F3;
  --color-bg-subtle: #F4F2EB;
  --color-border-default: #DDD9CE;
  --color-border-strong: #C9C4B6;
  --color-border-brand: #8B3A1A;
  --color-error: #B43A28;
  --color-error-hover: #8E2D1E;

  /* ── Geometry ─────────────────────────────────────────────────────────── */
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-30: 30px;

  /* ── Motion (Astryx easing per DESIGN.md §6) ──────────────────────────── */
  /* cubic-bezier(0.16, 1, 0.3, 1) — gentle out-ease, never rubber-band */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-medium: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Type scale ───────────────────────────────────────────────────────── */
  --text-body-lg: 18px;
  --text-small: 14px;
  --text-caption: 12px;

  color-scheme: light;
}

/* ── Night chrome (Claude-Warm Charcoal) ────────────────────────────────── */
[data-theme='dark'] {
  --surface: #2E2D2A;                /* paper (elevated surface) */
  --surface-subtle: #262624;         /* canvas background */
  --chrome-bg: #262624;
  --canvas: #1F1E1C;
  --border: #403E3A;                 /* warm charcoal, never cool */
  --border-subtle: #35332F;
  --border-strong: #4F4C46;
  --border-hover: #5B574F;

  --text: #F5F4EF;                   /* warm off-white, never pure white */
  --text-primary: #F5F4EF;
  --text-secondary: #C8C5BB;
  --text-tertiary: #9A968A;
  --text-muted: #8A8780;
  --text-dim: #74716B;

  --hover: #34322E;
  --pressed: #3A3833;
  --active-bg: #42403B;
  --bg-hover: #34322E;
  --bg-hover-subtle: #2F2D29;
  --bg-hover-strong: #3A3833;
  --bg-hover-accent: #3D2A24;
  --bg-content: #1F1E1C;
  --icon-muted: #6E6B65;

  --danger: #D97757;                 /* terracotta-tinted danger in dark */
  --danger-bg: #3D2A24;
  --danger-border: #5B3D34;
  --success: #88B074;
  --success-bg: #2A3324;
  --success-border: #43533A;
  --search-hit-bg: #5C4A1F;
  --search-hit-active-bg: #D97757;
  --search-hit-active-ink: #1F1E1C;

  --color-bg-overlay: rgb(0 0 0 / 65%);
  --shadow-modal-strong: 0 20px 25px rgb(0 0 0 / 50%);
  --shadow-btn-hover: 0 2px 8px rgb(0 0 0 / 40%);
  --shadow-menu: 0 8px 24px rgb(0 0 0 / 55%);

  --color-btn-primary: #F5F4EF;
  --color-btn-primary-hover: #D9D6CB;
  --color-btn-primary-text: #1F1E1C;
  --color-ai-action: #D97757;        /* radiant terracotta in dark */
  --color-ai-action-hover: #C46647;
  --color-ai-action-text: #1F1E1C;
  --color-brand-secondary: #B8A47E;
  --color-text-primary: #F5F4EF;
  --color-text-secondary: #C8C5BB;
  --color-text-tertiary: #9A968A;
  --color-bg-page: #2E2D2A;
  --color-bg-subtle: #262624;
  --color-border-default: #403E3A;
  --color-border-strong: #4F4C46;
  --color-border-brand: #D97757;

  color-scheme: dark;
}

/* ── System dark fallback ──────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not([data-theme='dark']) {
    --surface: #2E2D2A;
    --surface-subtle: #262624;
    --chrome-bg: #262624;
    --canvas: #1F1E1C;
    --border: #403E3A;
    --border-subtle: #35332F;
    --border-strong: #4F4C46;
    --border-hover: #5B574F;

    --text: #F5F4EF;
    --text-primary: #F5F4EF;
    --text-secondary: #C8C5BB;
    --text-tertiary: #9A968A;
    --text-muted: #8A8780;
    --text-dim: #74716B;

    --hover: #34322E;
    --pressed: #3A3833;
    --active-bg: #42403B;
    --bg-hover: #34322E;
    --bg-hover-subtle: #2F2D29;
    --bg-hover-strong: #3A3833;
    --bg-hover-accent: #3D2A24;
    --bg-content: #1F1E1C;
    --icon-muted: #6E6B65;

    --danger: #D97757;
    --danger-bg: #3D2A24;
    --danger-border: #5B3D34;
    --success: #88B074;
    --success-bg: #2A3324;
    --success-border: #43533A;
    --search-hit-bg: #5C4A1F;
    --search-hit-active-bg: #D97757;
    --search-hit-active-ink: #1F1E1C;

    --color-bg-overlay: rgb(0 0 0 / 65%);
    --shadow-modal-strong: 0 20px 25px rgb(0 0 0 / 50%);
    --shadow-btn-hover: 0 2px 8px rgb(0 0 0 / 40%);
    --shadow-menu: 0 8px 24px rgb(0 0 0 / 55%);

    --color-btn-primary: #F5F4EF;
    --color-btn-primary-hover: #D9D6CB;
    --color-btn-primary-text: #1F1E1C;
    --color-ai-action: #D97757;
    --color-ai-action-hover: #C46647;
    --color-ai-action-text: #1F1E1C;
    --color-brand-secondary: #B8A47E;
    --color-text-primary: #F5F4EF;
    --color-text-secondary: #C8C5BB;
    --color-text-tertiary: #9A968A;
    --color-bg-page: #2E2D2A;
    --color-bg-subtle: #262624;
    --color-border-default: #403E3A;
    --color-border-strong: #4F4C46;
    --color-border-brand: #D97757;

    color-scheme: dark;
  }
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Office-style ScreenTip — themed via the shared tokens (light/dark automatic).
 * The element is a singleton created by installScreenTips(); visibility is
 * driven inline by the script, everything visual lives here. */

.ui-screentip {
  position: fixed;
  z-index: 100000;
  max-width: 280px;
  padding: 5px 10px;
  border-radius: var(--radius-6);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  font: 12px/1.45 var(--gs-font-sans);
  box-shadow: 0 4px 14px rgb(0 0 0 / 18%);
  pointer-events: none;
  visibility: hidden;
  /* some tips carry embedded newlines (e.g. pdf note pins: contents + hint) */
  white-space: pre-line;
}

.ui-screentip-kbd {
  margin-left: 6px;
  color: var(--text-tertiary);
}

.ui-screentip-detail {
  margin-top: 2px;
  color: var(--text-secondary);
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Composer model chip + its upward popover (AiModelPicker). Chrome tokens only;
 * each app imports this next to its other @lycero/ui sheets. */

.ai-model-picker {
  display: inline-flex;
  min-width: 72px;
  flex: 0 1 auto;
}

.ai-model-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  max-width: 200px;
  min-width: 0;
  padding: 0 7px 0 6px;
  flex: 0 1 auto;
  border: 1px solid transparent;
  border-radius: var(--radius-30);
  background: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--text-caption);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ai-model-chip:hover,
.ai-model-chip.open {
  background: var(--hover);
  color: var(--text);
}

.ai-model-chip:focus-visible {
  outline: none;
  border-color: var(--accent);
}

.ai-model-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-model-chip-caret {
  flex-shrink: 0;
  color: var(--text-dim);
}

.gs-provider-logo {
  flex-shrink: 0;
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: var(--text);
}

.gs-provider-logo svg {
  width: 100%;
  height: 100%;
}

.ai-model-pop {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: 260px;
  max-height: min(420px, 70vh);
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-menu);
  font-size: 12px;
}

.ai-model-pop-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.ai-model-group + .ai-model-group {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border-subtle);
}

.ai-model-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 3px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
}

.ai-model-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 8px 5px 28px;
  border: none;
  border-radius: var(--radius-6);
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.ai-model-item:hover,
.ai-model-item:focus-visible {
  background: var(--hover);
  outline: none;
}

.ai-model-item.selected {
  background: var(--accent-soft);
}

.ai-model-item-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-model-manage {
  flex-shrink: 0;
  margin-top: 4px;
  padding-left: 8px;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--radius-6) var(--radius-6);
  color: var(--text-secondary);
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Queued-messages strip above the AI composer (see AiQueueStrip.tsx) */

/*
 * Every rule is anchored on .ai-queue-strip. Written unqualified, these names
 * also matched the queued-edits panel that the Docs, HTML, Markdown and Slides
 * stylesheets style under the same `.ai-queue-*` names — and their sheet loads
 * after this one in every renderer entry, so the strip rendered one way in
 * Sheets and PDF and another way in the other four apps, while our own rules
 * reached into a component this sheet has nothing to do with. Scoping closes
 * both directions; keep new rules under the root, because a bare
 * `.ai-queue-head` here is a cross-component edit, not a local one.
 */
.ai-queue-strip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--color-bg-subtle);
}

.ai-queue-strip .ai-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* declared rather than absent: the apps style a `.ai-queue-head` too, and a
     padding they set would otherwise reach this element by name alone */
  padding: 0;
  gap: 6px;
}

.ai-queue-strip .ai-queue-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px;
  border: none;
  border-radius: 5px;
  background: none;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.ai-queue-strip .ai-queue-toggle:hover {
  background: var(--hover);
  color: var(--color-text-primary);
}

.ai-queue-strip .ai-queue-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--icon-muted);
  cursor: pointer;
}

.ai-queue-strip .ai-queue-clear:hover {
  background: var(--hover);
  color: var(--color-text-primary);
} /* holds the queue where it is; pressed = held */

.ai-queue-strip .ai-queue-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--icon-muted);
  cursor: pointer;
}

.ai-queue-strip .ai-queue-pause:hover {
  background: var(--hover);
  color: var(--color-text-primary);
}

.ai-queue-strip .ai-queue-pause[aria-pressed='true'] {
  background: var(--hover);
  color: var(--color-text-primary);
}

.ai-queue-strip .ai-queue-hint {
  margin-right: auto;
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  /* as above: the apps' `.ai-queue-hint` carries a padding of its own */
  padding: 0;
}

.ai-queue-strip .ai-queue-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 120px;
  overflow-y: auto;
}

.ai-queue-strip .ai-queue-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ai-queue-strip .ai-queue-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.ai-queue-strip .ai-queue-edit {
  flex: 1;
  min-width: 0;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--canvas);
  color: var(--color-text-primary);
  font-size: var(--text-caption);
}

.ai-queue-strip .ai-queue-edit:focus {
  outline: none;
  border-color: var(--border-strong);
}

.ai-queue-strip .ai-queue-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--icon-muted);
  cursor: pointer;
}

.ai-queue-strip .ai-queue-action:hover {
  background: var(--hover);
  color: var(--color-text-primary);
} /* reordering: hold a row to pick it up, Alt+arrows for keyboards */

.ai-queue-strip .ai-queue-item {
  cursor: grab;
}

.ai-queue-strip .ai-queue-item:focus-visible {
  outline: 1px solid var(--accent);
}

.ai-queue-strip .ai-queue-items.ai-queue-dragging,
.ai-queue-strip .ai-queue-items.ai-queue-dragging .ai-queue-item {
  cursor: grabbing;
  user-select: none;
}

.ai-queue-strip .ai-queue-item[data-dragging='true'] {
  opacity: 0.55;
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Shared Word-style color picker panel (packages/ui color-picker.tsx).
 * Appearance only — anchor/fixed positioning comes from the per-app class
 * passed through the className prop. Selection outlines use the app accent.
 *
 * Interactive elements use a doubled .gcp-palette prefix: the panel is
 * anchored inside app ribbon rows whose generic resets (e.g. sheets'
 * `.inline-tools button { border: none; height: 30px; }` and its :hover
 * rules) would otherwise outrank single-class rules here. */

.gcp-palette {
  display: block;
  box-sizing: border-box;
  width: 260px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-modal-strong);
  color: var(--text);
  text-align: left;
  cursor: default;
}

.gcp-palette.gcp-palette .gcp-auto {
  display: block;
  min-width: 0;
  width: 100%;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
}

.gcp-palette.gcp-palette .gcp-auto:hover {
  background: var(--hover);
}

/* Selected (color unset / no fill applied): the per-app accent tint, matching
   the shared dropdown's selected option (each app's --accent-soft) */
.gcp-palette.gcp-palette .gcp-auto.selected {
  background: var(--accent-soft);
}

.gcp-section-title {
  margin: 12px 0 6px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
}

.gcp-section-title:first-child {
  margin-top: 2px;
}

.gcp-theme-base,
.gcp-theme-shades,
.gcp-standard-row {
  display: grid;
  grid-template-columns: repeat(10, 20px);
  column-gap: 4px;
  row-gap: 0;
}

.gcp-theme-base {
  margin-bottom: 8px;
}

.gcp-row {
  display: contents;
}

.gcp-palette.gcp-palette .gcp-swatch {
  display: block;
  box-sizing: border-box;
  min-width: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 0;
  cursor: pointer;
}

.gcp-palette.gcp-palette .gcp-swatch:hover,
.gcp-palette.gcp-palette .gcp-swatch:focus-visible,
.gcp-palette.gcp-palette .gcp-swatch.selected {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.gcp-palette.gcp-palette .gcp-more {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px -12px -10px;
  padding: 9px 14px;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  background: none;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 400;
  cursor: pointer;
}

.gcp-palette.gcp-palette .gcp-more:hover {
  background: var(--hover);
}

.gcp-palette.gcp-palette .gcp-more-icon,
.gcp-palette.gcp-palette .gcp-more-icon:hover {
  display: inline-flex;
  min-width: 0;
  width: auto;
  height: auto;
  padding: 0;
  background: none;
  line-height: 1;
}

/* Invisible but covering the whole row (not pointer-events: none): pointer
   events must land on the input itself so callers' moreInputProps hooks
   (onPointerDown arming / selection save) fire before the OS dialog opens. */
.gcp-more input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Shared select-replacement dropdown (Dropdown in dropdown.tsx): themed
 * trigger + anchored popover. Colors are chrome tokens only; apps size the
 * control via a class on the .gs-dd wrapper. */

.gs-dd {
  position: relative;
  display: inline-flex;
  anchor-name: --gs-dd;
  anchor-scope: --gs-dd;
}

.gs-dd-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  height: 26px;
  /* right 5px: caret glyph right edge lands 6px from the outer edge, matching
   * the format-pane caret alignment line */
  padding: 0 5px 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.gs-dd-btn:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.gs-dd-btn:disabled {
  color: var(--text-dim);
  cursor: default;
}

.gs-dd-value {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

.gs-dd-caret {
  flex-shrink: 0;
  display: flex;
  color: var(--text-dim);
}

/* fixed + anchored so scroll-container overflow never clips the popover or
 * its shadow; flips above the trigger near the viewport bottom */
.gs-dd-pop {
  position: fixed;
  position-anchor: --gs-dd;
  top: calc(anchor(bottom) + 2px);
  left: anchor(left);
  min-width: anchor-size(width);
  /* flip-inline: a popover wider than its trigger near the window's right edge would
   * otherwise run offscreen and clip (fixed positioning clips at the viewport) —
   * flipping right-aligns it to the trigger so it grows leftwards instead */
  position-try-fallbacks:
    flip-block,
    flip-inline,
    flip-block flip-inline;
  position-visibility: anchors-visible;
  z-index: 80;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  box-shadow: var(--shadow-menu);
}

/* with a filter box the popover stops scrolling itself: the box stays put
 * above an inner scroller, so it never rides out of view with the list */
.gs-dd-pop.has-search {
  overflow: hidden;
}

.gs-dd-list {
  display: contents;
}

.gs-dd-pop.has-search .gs-dd-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  overflow-y: auto;
}

.gs-dd-search {
  box-sizing: border-box;
  flex-shrink: 0;
  margin: 0 0 2px;
  padding: 4px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  outline: none;
}

.gs-dd-search:focus {
  border-color: var(--accent);
}

.gs-dd-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--text);
  border-radius: 3px;
  padding: 5px 6px;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.gs-dd-item.active {
  background: var(--hover);
}

.gs-dd-item:disabled {
  color: var(--text-dim);
  cursor: default;
}

.gs-dd-item.selected {
  background: var(--accent-soft);
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Word for Mac "Collapse ribbon" (see ribbon-collapse.tsx for the markup contract) */
.ribbon-collapsible {
  position: relative;
}
.ribbon-collapsible [data-ribbon-body] {
  anchor-name: --ribbon-body;
}
.ribbon-collapsible.ribbon-collapsed [data-ribbon-body] {
  display: none;
}
.ribbon-collapse-btn {
  position: absolute;
  position-anchor: --ribbon-body;
  bottom: calc(anchor(bottom) + 3px);
  right: calc(anchor(right) + 4px);
  z-index: 61;
}
.ribbon-collapse-btn,
.ribbon-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-app-region: no-drag;
}
.ribbon-collapse-btn:hover,
.ribbon-expand-btn:hover {
  background: var(--hover);
  color: var(--text);
}
.ribbon-expand-btn {
  margin-left: 4px;
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Block-level markdown in AI chat bubbles (tables, fenced code); inline chips stay per-app */
.ai-md-table-wrap {
  overflow-x: auto;
  margin: 0 0 16px;
}
.ai-md-table {
  border-collapse: collapse;
  font-size: 0.95em;
  line-height: 1.45;
}
.ai-md-table th,
.ai-md-table td {
  border: 1px solid var(--border);
  padding: 4px 10px;
  text-align: left;
  vertical-align: top;
}
.ai-md-table th {
  background: var(--surface-subtle);
  font-weight: 600;
}
.ai-md-pre {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--color-bg-subtle);
  overflow-x: auto;
  line-height: 1.5;
  font-size: 13px;
  font-family: var(--gs-font-mono, 'Be Vietnam Pro', 'Segoe UI', 'Cascadia Mono', Consolas, sans-serif);
}
.ai-md .ai-md-pre code {
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  white-space: pre;
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* AI panel text size (Settings → General). The chat log and composer are
   scaled as a block so the per-app px type scale keeps its proportions;
   the factor comes from applyAiPanelPrefs() via --ai-font-zoom. */
html[data-ai-font-size] .ai-chat,
html[data-ai-font-size] .ai-composer {
  zoom: var(--ai-font-zoom, 1);
}

/* Move only the assistant; document navigation retains its existing ordering. */
html[data-ai-panel-side='right'] {
  --ai-panel-border-left: 1px;
  --ai-panel-border-right: 0px;
}

html[data-ai-panel-side='right'] .ai-dock {
  order: 1;
}

html[data-ai-panel-side='right'] .ai-panel-resizer {
  left: 0;
  right: auto;
}

/* Sheets has a two-column grid instead of the other apps' flex docks. */
html[data-ai-panel-side='right'] .sheet-body {
  grid-template-columns: minmax(0, 1fr) var(--copilot-width, 360px);
}

html[data-ai-panel-side='right'] .sheet-body > .copilot {
  order: 1;
}

html[data-ai-panel-side='right'] .app-shell.copilot-collapsed .sheet-body {
  grid-template-columns: minmax(0, 1fr) 34px;
}

html[data-ai-panel-side='right'] .ai-panel-collapse svg {
  transform: scaleX(-1);
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Quote block on a user bubble: the document selection the message targeted */
.ai-msg-scope {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 6px;
  padding-left: 9px;
  border-left: 2px solid var(--color-brand-secondary);
  white-space: normal;
}

.ai-msg-scope-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-brand-secondary);
}

.ai-msg-scope-label::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.ai-msg-scope-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--text-caption);
  line-height: 1.45;
  color: var(--color-text-secondary);
  word-break: break-word;
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Shared chrome/AI-panel tokens come from @lycero/ui/tokens.css (imported
 * before this file in main.tsx); only pdf-specific values live here. */
:root {
  --accent: #c43e1c;
  --accent-dark: #a33517;
  --accent-soft: #fbeae5;

  /* pdf-local chrome shades */
  --pdf-error: #c0392b;
  --pdf-error-border: rgb(192 57 43 / 45%);
  --pdf-error-bg-hover: rgb(192 57 43 / 8%);
  --pdf-ok: #217346;
  --pdf-sig-warn: #a05a00;
  --pdf-thumb-border-hover: #a8a6a4;
  --pdf-prop-bg: rgb(0 0 0 / 3%);
  --pdf-focus-ring: rgb(35 36 37 / 20%);
  --pdf-shimmer-base: #666;
  --pdf-shimmer-hi: #d9d9d9;
  --pdf-statusbar-bg: #f3f4f6;
  --pdf-statusbar-border: #e1e4e8;
  --pdf-statusbar-hover: rgb(0 0 0 / 8%);
  --pdf-swatch-ring: rgb(0 0 0 / 15%);
  --pdf-scroll-thumb: rgb(0 0 0 / 25%);

  /* content-side constants: pages are paper, page overlays sit on paper —
   * these never follow the theme */
  --pdf-paper: #fff;
  --pdf-on-accent: #fff;
  --pdf-select: #c43e1c;
  --pdf-select-glow: rgb(196 62 28 / 90%);
  --pdf-ink-highlight: #ffde59;
  /* annotation ink previews match MARKUP_COLORS in annotations.ts */
  --pdf-ink-underline: #2b66ff;
  --pdf-ink-strike: #db3830;
  --pdf-redaction-stripe-dark: rgba(0, 0, 0, 0.72);
  --pdf-redaction-stripe-light: rgba(58, 58, 58, 0.78);
  --pdf-redaction-border: #d93333;
  --pdf-form-border: rgb(60 120 216 / 55%);
  --pdf-form-bg: rgb(235 243 255 / 55%);
  --pdf-form-text: #222;
  --pdf-form-control-border: #333;
  --pdf-form-control-mark: #111;
  --pdf-formdesign-fill: rgb(60 120 216 / 14%);
  --pdf-formdesign-fill-selected: rgb(60 120 216 / 24%);
  --pdf-sign-drop-bg: rgb(196 62 28 / 6%);
  --pdf-search-hit-bg: rgb(255 214 0 / 35%);
  --pdf-search-hit-cur-bg: rgb(255 150 50 / 55%);
  --pdf-search-hit-cur-outline: #f08c00;
  --pdf-link-hover-bg: rgb(196 62 28 / 12%);
  --pdf-link-hover-ring: rgb(196 62 28 / 35%);
  --pdf-text-selection: rgb(56 108 255 / 32%);
  --pdf-page-hover-outline: rgb(0 0 0 / 35%);
  /* text edit overlays sit on the rendered page, so paper/ink stay unthemed like form-text */
  --pdf-textedit-paper: #fff;
  --pdf-textedit-ink: #111;
  --pdf-textedit-ring: rgb(196 62 28 / 90%);
  --pdf-textedit-hover-bg: rgb(196 62 28 / 10%);
  --pdf-textblock-ring: rgb(96 99 102 / 40%);
  --pdf-textblock-ring-hover: rgb(196 62 28 / 65%);
  --pdf-textblock-hover-bg: rgb(196 62 28 / 5%);

  /* image edit overlays also sit on paper; unthemed like the text-edit set */
  --pdf-imgedit-hover-bg: rgb(196 62 28 / 8%);
  --pdf-imgedit-veil-bg: rgb(255 255 255 / 62%);
  --pdf-imgedit-ghost-bg: rgb(196 62 28 / 6%);

  /* dark chrome in both themes */
  --pdf-toast-bg: rgb(32 33 36 / 92%);
  --pdf-toast-text: #fff;
  --pdf-toast-action: #8ab4f8;

  /* black translucent masks/shadows hold in both themes */
  --pdf-mask-bg: rgb(0 0 0 / 50%);
  --pdf-shadow-menu: 0 8px 24px rgb(0 0 0 / 18%);
  --pdf-shadow-popup: 0 4px 16px rgb(0 0 0 / 15%);
  --pdf-shadow-toast: 0 4px 16px rgb(0 0 0 / 25%);
  --pdf-shadow-modal: 0 3px 30px rgb(0 0 0 / 8%);
  --pdf-shadow-modal-gs: 0 12px 40px rgb(0 0 0 / 16%);
  --pdf-input-focus: #0f7fff;
  --pdf-input-ring: rgb(15 127 255 / 10%);
  --pdf-error-ring: rgb(239 68 68 / 10%);
  --pdf-shadow-page: 0 1px 4px rgb(0 0 0 / 18%);
  --pdf-shadow-pin: 0 1px 4px rgb(0 0 0 / 30%);
  --pdf-shadow-drop: 0 6px 20px rgb(0 0 0 / 14%), 0 1px 3px rgb(0 0 0 / 8%);
  --pdf-shadow-composer: 0 6px 30px rgb(0 0 0 / 8%);
}

[data-theme='dark'] {
  --accent: #e8663f;
  --accent-dark: #d4552f;
  --accent-soft: #43261d;
  --pdf-error: #e57373;
  --pdf-error-border: rgb(229 115 115 / 50%);
  --pdf-error-bg-hover: rgb(229 115 115 / 12%);
  --pdf-ok: #58b380;
  --pdf-sig-warn: #e0a94f;
  --pdf-thumb-border-hover: #777;
  --pdf-prop-bg: rgb(255 255 255 / 5%);
  --pdf-focus-ring: rgb(255 255 255 / 30%);
  --pdf-shimmer-base: #8a8a8a;
  --pdf-shimmer-hi: #d0d0d0;
  --pdf-statusbar-bg: #252525;
  --pdf-statusbar-border: #3a3a3a;
  --pdf-statusbar-hover: rgb(255 255 255 / 10%);
  --pdf-swatch-ring: rgb(255 255 255 / 30%);
  --pdf-scroll-thumb: rgb(255 255 255 / 28%);
  --pdf-shadow-modal-gs: 0 20px 50px rgb(0 0 0 / 65%);
  --pdf-input-focus: #4a9eff;
  --pdf-input-ring: rgb(74 158 255 / 20%);
  --pdf-error-ring: rgb(242 139 130 / 20%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not([data-theme='dark']) {
    --accent: #e8663f;
    --accent-dark: #d4552f;
    --accent-soft: #43261d;
    --pdf-error: #e57373;
    --pdf-error-border: rgb(229 115 115 / 50%);
    --pdf-error-bg-hover: rgb(229 115 115 / 12%);
    --pdf-ok: #58b380;
    --pdf-sig-warn: #e0a94f;
    --pdf-thumb-border-hover: #777;
    --pdf-prop-bg: rgb(255 255 255 / 5%);
    --pdf-focus-ring: rgb(255 255 255 / 30%);
    --pdf-shimmer-base: #8a8a8a;
    --pdf-shimmer-hi: #d0d0d0;
    --pdf-statusbar-bg: #252525;
    --pdf-statusbar-border: #3a3a3a;
    --pdf-statusbar-hover: rgb(255 255 255 / 10%);
    --pdf-swatch-ring: rgb(255 255 255 / 30%);
    --pdf-scroll-thumb: rgb(255 255 255 / 28%);
    --pdf-shadow-modal-gs: 0 20px 50px rgb(0 0 0 / 65%);
    --pdf-input-focus: #4a9eff;
    --pdf-input-ring: rgb(74 158 255 / 20%);
    --pdf-error-ring: rgb(242 139 130 / 20%);
  }
}

* {
  box-sizing: border-box;
}

/* UI CJK fonts per language (documentElement.lang is set at bootstrap and on switch);
 * the zh expansion must keep the historical stack byte-identical */
:root {
  --ui-cjk: 'PingFang SC', 'Microsoft YaHei';
}

:root:lang(ja) {
  --ui-cjk: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo';
}

:root:lang(ko) {
  --ui-cjk: 'Apple SD Gothic Neo', 'Malgun Gothic';
}

:root:lang(zh-TW) {
  --ui-cjk: 'PingFang TC', 'Microsoft JhengHei';
}

html,
body,
#root {
  height: 100%;
  margin: 0;
}

body {
  font-family:
    'Segoe UI',
    -apple-system,
    BlinkMacSystemFont,
    var(--ui-cjk),
    sans-serif;
  font-size: 13px;
  color: var(--text);
  background: var(--chrome-bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pdf-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 14px;
}

/* ================= ribbon (aligned with docs/slides chrome) ================= */

.ribbon {
  flex-shrink: 0;
  background: var(--chrome-bg);
  border-bottom: 1px solid var(--border-strong);
  user-select: none;
}

.ribbon-tabs {
  display: flex;
  align-items: center;
  /* Same 35px total row as the slides menu row (5px top padding + 30px tab line),
     so the ribbon bottom divider lands on the same y across tabs */
  /* 10px inset + 2px gap: QAT buttons land at the same x as slides */
  padding: 5px 10px 0;
  min-height: 35px;
  gap: 2px;
}

.ribbon-tabs-spacer {
  flex: 1;
}

.qa-btn {
  width: 30px;
  height: 28px;
  border: none;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
}

.qa-btn svg {
  display: block;
  margin: 0 auto;
}

.qa-btn:hover:not(:disabled) {
  background: var(--hover);
}

.qa-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.qa-sep {
  width: 1px;
  height: 16px;
  margin: 0 6px;
  background: var(--border-strong);
  flex-shrink: 0;
}

/* ── ribbon tab strip (docs/Word-style: semibold labels, accent underline on the active tab) ── */
.ribbon-tab {
  position: relative;
  border: none;
  background: none;
  padding: 7px 9px 6px;
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  /* transparent border keeps the row height; the visible underline is the
     ::after, sized to the label text rather than the padded button */
  border-bottom: 2.5px solid transparent;
}

.ribbon-tab:hover {
  color: var(--accent);
}

.ribbon-tab.active {
  color: var(--accent);
}

/* active underline: exactly the text width (insets = horizontal padding) */
.ribbon-tab.active::after {
  content: '';
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: -2.5px;
  height: 2.5px;
  border-radius: 1px;
  background: var(--accent);
}

.ribbon-body {
  display: flex;
  align-items: stretch;
  /* band metrics shared with the docs/slides ribbons (PowerPoint parity) */
  padding: 6px 12px;
  /* HARD-fixed height like docs/slides: the ribbon height stays constant, and a
     narrow window scrolls the row inside the ribbon instead of squeezing the
     band */
  height: 80px;
  /* `scroll`, not `auto`: styled scrollbars are classic (non-overlay), so
     `scroll` keeps the 5px lane reserved even without overflow — the content
     area never changes and crossing the overflow threshold cannot cause a
     vertical layout jump (same reasoning as .ai-attachments). */
  overflow-x: scroll;
  overflow-y: hidden;
  /* Slim visible scrollbar so mouse users can reach overflowed groups
     (#55). Its 5px lane is carved out of the bottom
     padding, keeping the 80px band and the content area unchanged; Chromium
     paints a thumb only while the row actually overflows. */
  padding-bottom: 1px;
}

.ribbon-body::-webkit-scrollbar {
  height: 5px;
}

.ribbon-body::-webkit-scrollbar-track {
  background: transparent;
}

.ribbon-body::-webkit-scrollbar-thumb {
  border-radius: 2.5px;
  background: var(--pdf-scroll-thumb);
}

.ribbon-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2px 4px;
  flex-shrink: 0;
}

.ribbon-group-items {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.ribbon-sep {
  width: 1px;
  flex-shrink: 0;
  background: var(--border);
  margin: 8px 6px;
}

.rb-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  border-radius: 4px;
  /* PowerPoint-density: minimal side padding (docs/slides ribbon parity) */
  padding: 4px 7px 6px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
  white-space: nowrap;
}

.rb-big-icon {
  min-height: 28px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  /* hover/active plate box: sheets .tool-icon-row parity — stretches edge to
     edge of the button and rounds, while the label below stays outside */
  align-self: stretch;
  border-radius: 4px;
  padding: 3px 4px;
  margin: 0 -4px;
}

.rb-big:hover:not(:disabled) .rb-big-icon {
  background: var(--hover);
}

.rb-big:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Active state paints only the gray icon plate — label/ink stays the standard color */
.rb-big.active .rb-big-icon {
  background: var(--active-bg);
}

/* AI button: brand logo only — no accent plate behind the icon, label stays black (same as docs) */
.rb-big.rb-ai {
  font-size: 11px;
  font-weight: 500;
}

.rb-big.rb-ai > span:not(.rb-big-icon) {
  margin-top: -1px;
}

.rb-big.rb-ai.active,
.rb-big.rb-ai:hover:not(:disabled) {
  background: none;
  color: var(--color-text-primary);
}

.rb-big.rb-ai.active .rb-big-icon,
.rb-big.rb-ai:hover:not(:disabled) .rb-big-icon {
  background: none;
}

/* The AI entry buttons read as one piece: hover/press tint the whole button
   (icon + label together), unlike the other tall buttons where only the icon
   row is painted. Same treatment as the docs ribbon. */
.rb-big.ai-entry {
  border-radius: 4px;
}

.rb-big.ai-entry:hover:not(:disabled) {
  background: var(--hover);
}

.rb-big.ai-entry.active {
  background: var(--active-bg);
  color: var(--text);
}

.rb-big.ai-entry:hover:not(:disabled) .rb-big-icon,
.rb-big.ai-entry.active .rb-big-icon {
  background: transparent;
}

.ai-feature-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--color-brand-secondary);
}

.ai-feature-icon svg {
  /* 24px renders the 24-unit viewBox 1:1, so the 1.5 stroke paints 1.5px */
  width: 24px;
  height: 24px;
}

.rb-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rb-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.rb-small {
  display: flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: none;
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
}

.rb-small:hover:not(:disabled) {
  background: var(--hover);
}

/* ---- Compact ribbon (⌥⌘K / Ctrl+Alt+K), docs parity, see #362 ----
 * The middle density: the band stays and every command stays reachable, it
 * just drops to icon-only on a shorter band. The band keeps the HARD-fixed
 * height contract (switching tabs, including the contextual fill/form tabs,
 * never resizes the row) and the horizontal scroll.
 */
.ribbon-compact .ribbon-body {
  /* same fixed-height contract as the full band, only shorter (docs measured
     45px as the smallest band that holds every tab unclipped; pdf's tallest
     compact content is the 26px zoom row, so it fits the same band) */
  height: 45px;
  padding-top: 5px;
  padding-bottom: 1px;
}

.ribbon-compact .rb-big {
  /* the label is taken out of flow entirely (below), so the button is just
     the icon row plus its padding */
  gap: 0;
  padding: 2px 5px;
}

.ribbon-compact .rb-big-icon {
  min-height: 22px;
  flex: none;
  /* the base padding is sized for the full band's taller icon plate */
  padding: 1px 3px;
  margin: 0 -2px;
}

/* Keep the label in the accessibility tree and in the DOM (Playwright's
 * hasText and getByRole(name) both read it) but take it out of the visual
 * flow. display: none here would strip the accessible name. */
.ribbon-compact .rb-big > span:not(.rb-big-icon) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Groups centre on the shorter band. */
.ribbon-compact .ribbon-group {
  padding: 0 3px;
}

/* `.rb-col` stacks two rows (the page-number/zoom block) that cannot fit a
 * short band — side by side, exactly the docs treatment of .rb-col. */
.ribbon-compact .rb-col {
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

/* the highlight split caret is absolutely placed against the full band's
 * 30px icon plate; recentre it on the shorter one, and keep the gutter its
 * padding carved out of the right edge (the compact .rb-big padding above
 * would otherwise reclaim it) */
.ribbon-compact .rb-highlight-main {
  padding-right: 16px;
}

.ribbon-compact .rb-highlight-caret {
  top: 2px;
  height: 22px;
}

.rb-icon {
  min-width: 27px;
  height: 26px;
  border: none;
  background: none;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-primary);
  padding: 0 5px;
}

.rb-icon:hover:not(:disabled) {
  background: var(--hover);
}

.tb-page-input {
  width: 40px;
  height: 24px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
  background: var(--surface);
  color: var(--text);
}

.tb-page-input:focus {
  outline: none;
  border-color: var(--accent);
}

.tb-page-total {
  color: var(--text-dim);
  font-size: 12px;
  margin: 0 4px;
  white-space: nowrap;
}

.tb-zoom {
  min-width: 42px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
}

.tb-save-error {
  color: var(--pdf-error);
  font-size: 12px;
  margin-right: 4px;
}

.tb-save-ok {
  color: var(--pdf-ok);
  font-size: 12px;
  margin-right: 4px;
}

.tb-save-pending {
  color: var(--text-dim);
  font-size: 12px;
  margin-right: 4px;
}

.tb-form-warning {
  color: var(--pdf-error);
  font-size: 11px;
  font-weight: 600;
  margin-right: 4px;
}

.form-ribbon-progress {
  min-width: 72px;
  padding: 0 8px;
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}

/* ── Thumbnail context menu ── */

.thumb-menu {
  position: fixed;
  z-index: 60;
  min-width: 170px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: var(--pdf-shadow-menu);
  padding: 5px;
}

.thumb-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  border: none;
  background: none;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text);
}

.thumb-menu button:hover:not(:disabled) {
  background: var(--hover);
}

.thumb-menu button:disabled {
  opacity: 0.4;
  cursor: default;
}

.thumb-menu-sep {
  height: 1px;
  margin: 4px 0;
  background: var(--border);
}

/* ── Markup floating bar for selected text ── */

.pdf-sel-popup {
  position: fixed;
  z-index: 30;
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--pdf-shadow-popup);
  transform: translateX(-50%);
  user-select: none;
}

.pdf-sel-popup button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  border: none;
  background: none;
  border-radius: 5px;
  cursor: pointer;
}

.pdf-sel-popup button:hover {
  background: var(--hover);
}

/* Word-style toggle state: the selection already carries this markup; clicking removes it */
.pdf-sel-popup button.is-active {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.sel-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
}

/* Background comes inline from the currently selected highlight color */
.sel-swatch-hl {
  background: var(--pdf-ink-highlight);
}

.sel-swatch-ul {
  color: var(--pdf-ink-underline);
  text-decoration: underline;
}

.sel-swatch-st {
  color: var(--pdf-ink-strike);
  text-decoration: line-through;
}

/* ── Unsaved markup overlay ── */

/* pointer-events: none so the text underneath stays selectable (stacking more
   markups on already-marked text); clicks select via hit-testing in App.tsx */
.pdf-markup {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}

.pdf-markup-highlight {
  mix-blend-mode: multiply;
}

.pdf-markup-strikeout {
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 46%;
}

/* ── Annotation selection (click selects; deletion via the popup or Delete key) ── */

.pdf-markup-selected,
.pdf-markup-selected:hover,
.pdf-stamp-selected,
.pdf-stamp-selected:hover,
.pdf-note-pin-selected {
  outline: 1px solid var(--pdf-select);
  outline-offset: 1px;
}

.pdf-draw-selected {
  filter: drop-shadow(0 0 3px var(--pdf-select-glow));
}

.pdf-del-popup {
  position: fixed;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--pdf-shadow-popup);
  transform: translateX(-50%);
  user-select: none;
}

.pdf-del-popup button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}

.pdf-del-popup button svg {
  flex: none;
  opacity: 0.8;
}

.pdf-del-popup button:hover {
  background: var(--hover);
}

.pdf-del-popup .pdf-del-popup-danger:hover {
  background: var(--pdf-error-bg-hover);
  color: var(--pdf-error);
}

.pdf-del-popup-sep {
  align-self: stretch;
  width: 1px;
  margin: 3px 2px;
  background: var(--border);
}

/* Transparency presets fold-out under the image selection popup */
.pdf-opacity-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--pdf-shadow-popup);
}

/* ── Transient toast (deleted annotation + undo) ── */

.pdf-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--pdf-toast-bg);
  color: var(--pdf-toast-text);
  font-size: 13px;
  border-radius: 8px;
  box-shadow: var(--pdf-shadow-toast);
}

.pdf-toast button {
  border: none;
  background: none;
  padding: 0;
  color: var(--pdf-toast-action);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.pdf-toast button:hover {
  text-decoration: underline;
}

/* Message toast (save failures, skipped text edits): sits above the delete toast slot
   so the two never overlap, and wraps long reasons instead of spanning the window */
.pdf-toast-notice {
  bottom: 64px;
  max-width: min(70vw, 560px);
}

/* ── AcroForm form overlay ── */

.pdf-form-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.pdf-form-input {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--pdf-form-border);
  background: var(--pdf-form-bg);
  border-radius: 2px;
  padding: 0 3px;
  font-family: inherit;
  color: var(--pdf-form-text);
  resize: none;
}

.pdf-form-input:focus {
  outline: none;
  border-color: var(--pdf-select);
  background: var(--pdf-paper);
}

.pdf-form-checkbox {
  position: absolute;
  box-sizing: border-box;
  appearance: none;
  margin: 0;
  border: 1px solid var(--pdf-form-control-border);
  border-radius: 0;
  background: var(--pdf-paper);
  cursor: pointer;
}

.pdf-form-checkbox:checked {
  background: var(--pdf-paper);
}

.pdf-form-checkbox:checked::after {
  position: absolute;
  inset: 17%;
  background: var(--pdf-form-control-mark);
  content: '';
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 8.4 2.5 6l3 3L13.2 1 16 3.3 5.6 15z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 8.4 2.5 6l3 3L13.2 1 16 3.3 5.6 15z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.pdf-form-checkbox:disabled {
  cursor: default;
}

.pdf-form-radio {
  position: absolute;
  margin: 0;
  accent-color: var(--pdf-select);
}

.pdf-form-input.is-required-empty,
.pdf-form-input.is-invalid,
.pdf-form-select.is-required-empty .gs-dd-btn {
  border-color: var(--pdf-error);
}

.pdf-form-date-pick {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.pdf-form-date-pick:hover {
  color: var(--pdf-select);
}

.pdf-form-date-pick svg {
  width: 70%;
  height: 70%;
}

.pdf-form-date-native {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pdf-form-date-error {
  position: absolute;
  z-index: 2;
  padding: 2px 6px;
  border: 1px solid var(--pdf-error);
  border-radius: 3px;
  background: var(--surface);
  color: var(--pdf-error);
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: var(--shadow-menu);
}

.pdf-form-checkbox.is-required-empty,
.pdf-form-radio.is-required-empty {
  outline: 1px solid var(--pdf-error);
  outline-offset: 1px;
}

.pdf-form-input.is-active:focus-within,
.pdf-form-select.is-active:focus-within,
.pdf-form-radio.is-active:focus-within,
.pdf-form-signature.is-active:focus-within {
  outline: 2px solid var(--pdf-select);
  outline-offset: 1px;
}

.pdf-form-checkbox.is-active:focus-within {
  outline: 1px dotted var(--pdf-form-control-mark);
  outline-offset: 3px;
}

.pdf-form-input.is-comb {
  letter-spacing: 0.15em;
}

.pdf-form-signature {
  position: absolute;
  box-sizing: border-box;
  border: 1px dashed var(--pdf-form-border);
  border-radius: 2px;
  background: var(--pdf-form-bg);
  color: var(--pdf-form-text);
  font: inherit;
  cursor: pointer;
}

.pdf-form-signature:hover:not(:disabled) {
  border-style: solid;
}

.pdf-form-signature.is-signed {
  border-color: transparent;
  background: transparent;
  color: transparent;
}

/* Choice widget: shared dropdown (@lycero/ui gs-dd) sized to the AcroForm
 * rect — the wrapper carries the absolute position, the trigger the field look */
.pdf-form-select {
  position: absolute;
  box-sizing: border-box;
}

.pdf-form-select .gs-dd {
  width: 100%;
  height: 100%;
}

.pdf-form-select .gs-dd-btn {
  height: 100%;
  border: 1px solid var(--pdf-form-border);
  background: var(--pdf-form-bg);
  border-radius: 2px;
  padding: 0 2px;
  font-size: inherit;
  color: var(--pdf-form-text);
}

.pdf-form-select .gs-dd-btn:focus {
  outline: none;
  border-color: var(--pdf-select);
  background: var(--pdf-paper);
}

/* ================= Body: thumbnail sidebar + page scroll area ================= */

.pdf-body {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  background: var(--canvas);
}

.pdf-thumbs {
  /* width set inline (drag-resizable, persisted) */
  width: 150px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 10px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  user-select: none;
}

/* drag handle between the sidebar and the page area — resize the sidebar
 * horizontally (overlaps the pane's right border; cursor-only affordance),
 * same pattern as slides' .thumb-resizer */
.pdf-side-resizer {
  width: 6px;
  margin-left: -3px;
  flex-shrink: 0;
  cursor: col-resize;
  z-index: 20;
  background: transparent;
}

.pdf-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding-bottom: 10px;
  cursor: pointer;
  /* focusable for arrow-key page stepping; the active red border is the visual cue */
  outline: none;
}

.pdf-thumb-box {
  /* fluid: follows the resizable sidebar width (aspect ratio set inline per page) */
  position: relative;
  width: 100%;
  background: var(--pdf-paper);
  border: 2px solid var(--border-strong);
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
}

/* Same live-preview patch as the page canvas, scaled into the thumb (percent coords) */
.pdf-thumb-livepreview {
  position: absolute;
  pointer-events: none;
}

/* Read-only mirror of the canvas pending-edit overlays, scaled into the thumb.
   Inner layers set pointer-events: auto on themselves, so the kill must reach
   every descendant or overlay children would eat thumbnail clicks/drags. */
.pdf-thumb-overlay {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

.pdf-thumb-overlay,
.pdf-thumb-overlay * {
  pointer-events: none !important;
}

.pdf-thumb-box canvas {
  display: block;
}

.pdf-thumb:hover .pdf-thumb-box {
  border-color: var(--pdf-thumb-border-hover);
}

.pdf-thumb-active .pdf-thumb-box {
  border-color: var(--accent);
}

.pdf-thumb-no {
  font-size: 11px;
  color: var(--text-dim);
}

.pdf-thumb-active .pdf-thumb-no {
  color: var(--accent);
  font-weight: 600;
}

/* the page stays ltr under an RTL UI — the chrome mirrors, the content does not */

.pdf-scroll {
  direction: ltr;
  flex: 1;
  overflow: auto;
  padding: 0 24px;
  background: var(--canvas);
}

/* One row: one page in single-page mode, two side by side in two-page mode.
   `safe` keeps the row left-anchored (scrollable) instead of clipping the page's
   left edge when the comments margin makes the row wider than the viewport. */
.pdf-row {
  display: flex;
  justify-content: center;
  justify-content: safe center;
  align-items: flex-start;
  gap: 16px;
  margin-top: 16px;
}

.pdf-row:last-child {
  margin-bottom: 16px;
}

/* Night reading: invert only the page bitmap; overlays (markup/form/drawing) are separate in the DOM */
.pdf-night .pdf-page-content canvas {
  filter: invert(1) hue-rotate(180deg);
}

.pdf-night {
  background: #1e1e1e;
}

.pdf-night .pdf-page {
  box-shadow: 0 1px 4px rgb(0 0 0 / 55%);
}

.pdf-sign-drop {
  position: absolute;
  inset: 0;
  z-index: 8;
  cursor: crosshair;
  background: var(--pdf-sign-drop-bg);
}

/* Translucent preview of the pending signature following the cursor */
.pdf-sign-ghost {
  position: absolute;
  pointer-events: none;
  opacity: 0.65;
}

.pdf-sign-ghost img,
.pdf-sign-ghost svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pdf-page {
  /* pdf.js setLayerDimensions uses these vars to give textLayer its unrotated size */
  --user-unit: 1;
  --total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
  --scale-round-x: 1px;
  --scale-round-y: 1px;

  position: relative;
  flex-shrink: 0;
  background: var(--pdf-paper);
  box-shadow: var(--pdf-shadow-page);
}

.pdf-page-content {
  position: absolute;
  inset: 0;
}

.pdf-page-content canvas {
  position: absolute;
  left: 0;
  top: 0;
}

/* ── Outline sidebar ── */

.pdf-outline-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 4px;
}

.pdf-outline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 0 4px 6px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.pdf-outline-header .rb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* All-document comments panel (sidebar pane, same chrome as the outline pane) */
.pdf-comments {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  overflow-y: auto;
}
.pdf-comments-filter {
  margin-bottom: 4px;
}
.pdf-comment-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.pdf-comment-row:hover {
  background: var(--hover);
}
.pdf-comment-page {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.pdf-comment-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pdf-comment-author {
  font-size: 11px;
  color: var(--text-secondary);
}
.pdf-comment-text {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdf-comment-replies {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 11px;
  color: var(--text-secondary);
}

.pdf-outline {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

.pdf-outline-item {
  flex-shrink: 0;
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 5px 8px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text);
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-outline-item:hover {
  background: var(--hover);
}

.pdf-outline-note {
  flex-shrink: 0;
  padding: 2px 8px 8px;
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Encrypted document password ── */

/* ---- encrypted-PDF password dialog (Lycero DS form dialog, matching the
   docs PasswordDialog and mockups/protect-dialogs-genspark.html §1/2) ---- */

/* base .pdf-modal-mask (defined below) top-aligns dialogs; this one centers */
.pdf-modal-mask.pdf-pwd-mask {
  align-items: center;
}

.pdf-modal.pdf-pwd-dialog {
  margin-top: 0;
  width: 440px;
  padding: 24px;
  gap: 0;
  border: none;
  box-shadow: var(--pdf-shadow-modal-gs);
}

.pdf-pwd-dialog h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.pdf-pwd-desc {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

.pdf-pwd-fld {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.pdf-pwd-wrap {
  position: relative;
  display: block;
  margin-top: 6px;
}

.pdf-pwd-wrap input {
  display: block;
  width: 100%;
  height: 38px;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  padding: 0 40px 0 12px;
  font-size: 13px;
  background: var(--surface);
  color: var(--color-text-primary);
  outline: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.pdf-pwd-wrap input:hover:not(:focus):not(.invalid) {
  border-color: var(--border-strong);
}

.pdf-pwd-wrap input:focus {
  border-color: var(--pdf-input-focus);
  box-shadow: 0 0 0 3px var(--pdf-input-ring);
}

.pdf-pwd-wrap input.invalid {
  border-color: var(--color-error);
}

.pdf-pwd-wrap input.invalid:focus {
  box-shadow: 0 0 0 3px var(--pdf-error-ring);
}

/* wrong password: shake the field */
.pdf-pwd-fld.has-error .pdf-pwd-wrap {
  animation: pdf-pwd-shake 0.4s ease;
}

@keyframes pdf-pwd-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}

/* show/hide toggle inside the field */
.pdf-pwd-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}

.pdf-pwd-eye:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.pdf-pwd-eye:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--pdf-focus-ring);
}

.pdf-pwd-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-error);
}

.pdf-pwd-error svg {
  flex-shrink: 0;
}

/* mockup g-actions spec: 36px buttons, 12px gap, 24px above the footer */
.pdf-pwd-dialog .pdf-modal-actions {
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.pdf-pwd-dialog .pdf-modal-btn {
  height: 36px;
  padding: 0 18px;
}

.tb-readonly {
  color: var(--text-dim);
  font-size: 12px;
  margin-right: 6px;
}

/* ── Generic small dialogs (extract range etc.) ── */

.pdf-modal-mask {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: var(--pdf-mask-bg);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.pdf-modal {
  margin-top: 96px;
  min-width: 300px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: var(--pdf-shadow-modal);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pdf-modal-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.pdf-modal-hint {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Label + control rows and check/radio labels in page-operation dialogs */
.pdf-modal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
}

.pdf-modal-row > span {
  flex: none;
  color: var(--text-secondary);
}

.pdf-modal-row .pdf-modal-input {
  flex: 1;
  min-width: 0;
}

.pdf-print-field > span {
  flex: 1;
}

.pdf-print-field select.pdf-modal-input {
  flex: 1.6;
  color: var(--text);
}

.pdf-print-copies {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.pdf-print-copies .pdf-modal-input {
  width: 64px;
}

.pdf-print-divider {
  border-top: 1px solid var(--border);
  margin: 2px 0;
}

.pdf-print-empty {
  color: var(--danger);
}

.pdf-modal-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.pdf-modal-check input {
  accent-color: var(--accent);
  margin: 0;
}

/* N-up option buttons fill the row instead of hugging the right edge */
.pdf-modal-actions.merge-pages-options {
  justify-content: stretch;
}

.merge-pages-options .pdf-modal-btn {
  flex: 1;
}

.pdf-modal-input {
  height: 28px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 0 8px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
}

.pdf-modal-input:focus {
  outline: none;
  border-color: var(--accent);
}

.pdf-modal-input.invalid {
  border-color: var(--pdf-error);
}

.pdf-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Attachments panel: rows with a pending tag while the edit has not been saved */
.pdf-attachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  overflow-y: auto;
}

.pdf-attachments-add {
  align-self: flex-start;
}

.pdf-attachments-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pdf-attachment {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
}

.pdf-attachment:hover {
  background: var(--hover);
}

.pdf-attachment.removing {
  opacity: 0.55;
}

.pdf-attachment-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92em;
}

.pdf-attachment-tag {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--pdf-prop-bg);
  color: var(--text-secondary);
  font-size: 0.78em;
}

.pdf-attachment-size {
  color: var(--text-secondary);
  font-size: 0.8em;
}

/* Label rows inside form dialogs: control left, label beside it, one per line */
.pdf-perm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.pdf-perm-row > span:first-child {
  min-width: 150px;
}

.pdf-perm-row > input[type='text'],
.pdf-perm-row > input[type='number'],
.pdf-perm-row > input[type='password'] {
  flex: 1;
}

/* Bates preview: a page outline with the number strips where the position puts them */
.pdf-bates-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.pdf-bates-preview-page {
  height: 64px;
  border: 1px dashed var(--border-strong);
  border-radius: 4px;
}

.pdf-bates-preview-strip {
  font-family: ui-monospace, monospace;
  white-space: nowrap;
  overflow: hidden;
}

.pdf-bates-positions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
}

/* Lycero DS modal footer buttons: secondary = bg-subtle, primary = black (#232425) */
.pdf-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pdf-modal-btn:hover:not(:disabled) {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.pdf-modal-btn:active:not(:disabled) {
  filter: brightness(0.88);
  transform: scale(0.98);
}

.pdf-modal-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--pdf-focus-ring);
}

.pdf-modal-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pdf-modal-btn.primary {
  border-color: var(--color-btn-primary);
  background: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
}

.pdf-modal-btn.primary:hover:not(:disabled) {
  border-color: var(--color-btn-primary-hover);
  background: var(--color-btn-primary-hover);
  color: var(--color-btn-primary-text);
}

/* ── Full-text search ── */

.pdf-search-bar {
  position: absolute;
  top: 8px;
  right: 20px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--pdf-shadow-popup);
}

.pdf-search-input {
  width: 180px;
  height: 26px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 0 8px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
}

.pdf-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

.pdf-search-count {
  min-width: 52px;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* Option toggles (Aa / W): same word-style active plate as the selection markup bar */
.pdf-search-bar .pdf-search-opt {
  font-size: 12px;
}

.pdf-search-bar .pdf-search-opt.is-active {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.pdf-search-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.pdf-search-hit {
  position: absolute;
  background: var(--pdf-search-hit-bg);
  border-radius: 2px;
  mix-blend-mode: multiply;
}

.pdf-search-hit-cur {
  background: var(--pdf-search-hit-cur-bg);
  outline: 1.5px solid var(--pdf-search-hit-cur-outline);
}

/* ── Drawing annotation layer ── */

.pdf-draw-layer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}

.pdf-redaction-layer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  overflow: visible;
}

.pdf-formdesign-layer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  touch-action: none;
}

.pdf-formdesign-layer.is-drawing {
  cursor: crosshair;
}

.pdf-formdesign-field {
  position: absolute;
  box-sizing: border-box;
  border: 1px dashed var(--pdf-form-border);
  background: var(--pdf-formdesign-fill);
  cursor: move;
  overflow: visible;
}

.pdf-formdesign-field.is-selected {
  border-style: solid;
  background: var(--pdf-formdesign-fill-selected);
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

.pdf-formdesign-field.is-live {
  pointer-events: none;
}

.pdf-formdesign-field.is-existing {
  border-style: dotted;
}

.pdf-formdesign-layer.is-preview .pdf-formdesign-preview {
  position: absolute;
  pointer-events: auto;
}

.pdf-formdesign-marquee {
  position: absolute;
  pointer-events: none;
  border: 1px dashed var(--accent);
  background: var(--pdf-formdesign-fill);
}

.pdf-formdesign-guide {
  position: absolute;
  pointer-events: none;
  background: var(--accent);
  opacity: 0.7;
}

.pdf-formdesign-guide.is-v {
  top: 0;
  bottom: 0;
  width: 1px;
}

.pdf-formdesign-guide.is-h {
  left: 0;
  right: 0;
  height: 1px;
}

.pdf-formdesign-field.is-signature {
  border-style: dashed;
}

.pdf-formdesign-field:hover,
.pdf-formdesign-field.is-selected {
  z-index: 1;
}

.pdf-formdesign-field.is-live,
.pdf-formdesign-marquee,
.pdf-formdesign-guide {
  z-index: 2;
}

.pdf-formdesign-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border: 1px solid var(--accent);
  background: var(--surface);
  border-radius: 1px;
}

.pdf-formdesign-handle.is-nw {
  left: -4px;
  top: -4px;
  cursor: nwse-resize;
}

.pdf-formdesign-handle.is-n,
.pdf-formdesign-handle.is-s {
  left: calc(50% - 4px);
  cursor: ns-resize;
}

.pdf-formdesign-handle.is-n {
  top: -4px;
}

.pdf-formdesign-handle.is-s {
  bottom: -4px;
}

.pdf-formdesign-handle.is-e,
.pdf-formdesign-handle.is-w {
  top: calc(50% - 4px);
  cursor: ew-resize;
}

.pdf-formdesign-handle.is-e {
  right: -4px;
}

.pdf-formdesign-handle.is-w {
  left: -4px;
}

.pdf-formdesign-handle.is-ne {
  right: -4px;
  top: -4px;
  cursor: nesw-resize;
}

.pdf-formdesign-handle.is-sw {
  left: -4px;
  bottom: -4px;
  cursor: nesw-resize;
}

.pdf-formdesign-handle.is-se {
  right: -4px;
  bottom: -4px;
  cursor: nwse-resize;
}

.pdf-formdesign-props {
  position: absolute;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: max-content;
  min-width: 220px;
  max-width: 320px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--pdf-shadow-popup);
  font-size: 12px;
  color: var(--text);
  cursor: default;
}

.pdf-formdesign-props label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pdf-formdesign-props label > span {
  color: var(--text-muted);
}

.pdf-formdesign-props textarea,
.pdf-formdesign-props select {
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  resize: vertical;
}

.pdf-formdesign-props input:not([type='checkbox']) {
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.pdf-formdesign-props .pdf-formdesign-check {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.pdf-formdesign-props .pdf-formdesign-check > span {
  color: var(--text);
}

.pdf-formdesign-props input:disabled {
  color: var(--text-muted);
}

.pdf-formdesign-hint {
  color: var(--text-muted);
  font-size: 11px;
}

.pdf-formdesign-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.pdf-formdesign-actions .pdf-formdesign-remove {
  margin-right: auto;
}

.pdf-formdesign-actions button {
  height: 24px;
  padding: 0 8px;
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.pdf-formdesign-actions button:hover {
  background: var(--hover);
}

.pdf-formdesign-actions .pdf-formdesign-done {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--pdf-on-accent);
}

.pdf-formdesign-remove {
  align-self: flex-start;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.pdf-formdesign-remove:hover {
  background: var(--hover);
}

.pdf-redaction-mark {
  position: absolute;
  box-sizing: border-box;
  background: repeating-linear-gradient(
    135deg,
    var(--pdf-redaction-stripe-dark),
    var(--pdf-redaction-stripe-dark) 7px,
    var(--pdf-redaction-stripe-light) 7px,
    var(--pdf-redaction-stripe-light) 14px
  );
  border: 2px solid var(--pdf-redaction-border);
  pointer-events: none;
}

/* With a tool active, take over the pointer and disable text selection so dragging doesn't select text */
.pdf-draw-active {
  pointer-events: auto;
  cursor: crosshair;
}

.pdf-scroll.pdf-drawing .textLayer {
  user-select: none;
  pointer-events: none;
}

.pdf-draw-shape {
  cursor: move;
}

.pdf-draw-shape:hover {
  opacity: 0.65;
}

.pdf-note-pin {
  position: absolute;
  z-index: 5;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px 4px 4px 0;
  box-shadow: var(--pdf-shadow-pin);
  cursor: pointer;
  padding: 0;
}

.pdf-note-pin:hover {
  opacity: 0.75;
}

/* ── WPS-style comments margin: cards beside the page, leader lines to their pins ── */

.pdf-note-margin {
  position: relative;
  z-index: 6;
  flex-shrink: 0;
  align-self: stretch;
  /* Only the cards themselves are interactive; the column must not block page clicks */
  pointer-events: none;
}

/* 1px viewport with overflow visible: the line draws at negative x, over the page */
.pdf-note-lead {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
}

.pdf-note-card {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  /* Top stripe carries the annotation color (inline, document data like the pin) */
  border-top-width: 3px;
  border-radius: 8px;
  box-shadow: var(--pdf-shadow-page);
  font-size: 12.5px;
  pointer-events: auto;
  cursor: pointer;
  transition: top 0.16s ease;
}

.pdf-note-card:hover {
  box-shadow: var(--pdf-shadow-popup);
}

.pdf-note-card-active {
  cursor: default;
  border-color: var(--accent);
  box-shadow: var(--pdf-shadow-popup);
}

.pdf-note-card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 8px 4px 12px;
}

.pdf-note-card-title {
  flex: 1;
  font-weight: 600;
  color: var(--text);
}

.pdf-note-card-close {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  align-self: center;
}

.pdf-note-card-close:hover {
  background: var(--hover);
  color: var(--text);
}

.pdf-note-card-head .pdf-note-author {
  flex: 1;
}

.pdf-note-thread {
  overflow: hidden;
  max-height: 150px;
  padding: 0 0 6px;
}

.pdf-note-card-active .pdf-note-thread {
  overflow-y: auto;
  max-height: 320px;
}

.pdf-note-draft-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 10px 8px;
}

/* Inline rewrite of an existing comment; sits inside the comment's own padding */
.pdf-note-edit-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.pdf-note-draft-box textarea,
.pdf-note-edit-box textarea {
  resize: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.pdf-note-draft-box textarea:focus,
.pdf-note-edit-box textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.pdf-note-draft-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.pdf-note-pin-ghost {
  pointer-events: none;
}

.pdf-note-comment {
  padding: 6px 12px;
}

.pdf-note-comment-reply {
  margin-left: 16px;
  border-left: 2px solid var(--border);
}

.pdf-note-comment-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pdf-note-author {
  font-weight: 600;
  color: var(--accent);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-note-time {
  flex: 1;
  color: var(--text-muted);
  font-size: 11px;
}

/* Edit/delete live here; hidden until the pointer is over the comment (or a button
   has keyboard focus) so the thread stays readable */
.pdf-note-comment-actions {
  display: inline-flex;
  align-self: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s;
}

.pdf-note-comment:hover .pdf-note-comment-actions,
.pdf-note-comment-actions:focus-within {
  opacity: 1;
}

.pdf-note-comment-del,
.pdf-note-comment-edit {
  display: inline-flex;
  align-items: center;
  align-self: center;
  border: none;
  background: none;
  color: var(--text-muted);
  line-height: 1;
  padding: 3px 5px;
  border-radius: 4px;
  cursor: pointer;
}

.pdf-note-comment-del:hover {
  background: var(--hover);
  color: var(--danger);
}

.pdf-note-comment-edit:hover {
  background: var(--hover);
  color: var(--accent);
}

.pdf-note-comment-body {
  margin-top: 2px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.pdf-note-reply-box {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--border);
}

.pdf-note-reply-box textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.pdf-note-reply-box textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.pdf-note-reply-send {
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12.5px;
}

/* ── Text edit (content-stream replacement) ── */

/* Covers the original run with page background; the saved PDF gets the real rewrite */
/* Blanks the matched run's real ink; the preview/editor boxes only cover the layout rect */
.pdf-textedit-cover {
  position: absolute;
  z-index: 3;
  background: var(--pdf-textedit-paper);
  pointer-events: none;
}

.pdf-textedit-preview {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: pre;
  line-height: 1;
  background: var(--pdf-textedit-paper);
  color: var(--pdf-textedit-ink);
  cursor: pointer;
}

.pdf-textedit-preview:hover,
.pdf-textedit-selected {
  outline: 1px solid var(--pdf-textedit-ring);
}

.pdf-textinsert-preview {
  position: absolute;
  z-index: 4;
  min-width: 2px;
  color: var(--pdf-textedit-ink);
  /* Draggable to reposition (click selects, double-click edits) */
  cursor: move;
  touch-action: none;
}

.pdf-textinsert-preview:hover,
.pdf-textinsert-preview.is-selected {
  outline: 1px solid var(--pdf-textedit-ring);
  outline-offset: 1px;
}

.pdf-textinsert-placement-preview {
  position: absolute;
  z-index: 7;
  min-width: 2px;
  opacity: 0.72;
  pointer-events: none;
}

.pdf-inserting-text {
  cursor: text;
}

.pdf-textedit-input {
  position: absolute;
  z-index: 6;
  padding: 0 2px;
  border: 1px solid var(--pdf-textedit-ring);
  border-radius: 2px;
  background: var(--pdf-textedit-paper);
  color: var(--pdf-textedit-ink);
  line-height: 1;
  font-family: inherit;
  box-sizing: content-box;
  min-width: 60px;
}

.pdf-editing-text .textLayer span:hover {
  cursor: text;
}

/* Paragraph boxes in edit-text mode (see text-block.ts): a faint outline on every
   block so editable units read at a glance (WPS-style); page-anchored chrome, so
   the ring colors stay unthemed like the rest of the text-edit set */
.pdf-textblock-box {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  outline: 1px dashed var(--pdf-textblock-ring);
  outline-offset: 2px;
  border-radius: 2px;
  transition: opacity 0.15s;
}
.pdf-textblock-box.is-hover {
  outline-color: var(--pdf-textblock-ring-hover);
  background: var(--pdf-textblock-hover-bg);
}
.pdf-textblock-box.is-faded {
  opacity: 0.2;
}

/* Border grips of the hovered block (WPS-style move): the frame itself is
   pointer-transparent so clicks inside still reach the text layer; only the
   four edge strips take the pointer and start a drag-to-move */
.pdf-textblock-frame {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}
.pdf-textblock-grip {
  position: absolute;
  pointer-events: auto;
  cursor: move;
  touch-action: none;
}
.pdf-textblock-grip.grip-t {
  top: -7px;
  right: -5px;
  left: -5px;
  height: 9px;
}
.pdf-textblock-grip.grip-b {
  right: -5px;
  bottom: -7px;
  left: -5px;
  height: 9px;
}
.pdf-textblock-grip.grip-l {
  top: -5px;
  bottom: -5px;
  left: -7px;
  width: 9px;
}
.pdf-textblock-grip.grip-r {
  top: -5px;
  right: -7px;
  bottom: -5px;
  width: 9px;
}

/* Live ghost while a block is border-dragged: its text lines ride along on a
   paper backdrop so the block visibly lifts off the page */
.pdf-textblock-ghost {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  background: var(--pdf-textedit-paper);
  outline: 1px dashed var(--pdf-textblock-ring-hover);
  outline-offset: 2px;
}
.pdf-textblock-ghost-line {
  position: absolute;
  display: flex;
  align-items: center;
  white-space: pre;
  color: var(--pdf-textedit-ink);
}

/* Hover affordance for edit-text mode: one box over the whole merged line
   (see text-line.ts), replacing the per-run span outline */
.pdf-textline-hover {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  outline: 1px dashed var(--pdf-textedit-ring);
  background: var(--pdf-textedit-hover-bg);
}

/* Wrapper for the multiline editor: hosts the floating style bar above the textarea */
.pdf-textedit-editor {
  position: absolute;
  z-index: 6;
}

.pdf-textedit-editor .pdf-textedit-input {
  position: static;
  display: block;
  /* x scrolls once auto-grow hits the page-edge cap; height already fits all lines */
  overflow: auto hidden;
  white-space: pre;
  line-height: 1.2;
  resize: none;
}

/* Block (paragraph) editor: width is locked to the block, so the textarea's own
   soft wrap is the reflow preview — no x-scroll, break anywhere like the committed
   CJK-aware wrap */
.pdf-textedit-editor .pdf-textedit-input.pdf-textedit-block {
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Selection-color mirror: sits exactly over the textarea (same box metrics, border
   kept but transparent) and paints the per-run colors while the textarea's own text
   is transparent — caret and selection highlight stay the textarea's */
.pdf-textedit-editor .pdf-textedit-ghost {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  padding: 0 2px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  line-height: 1.2;
  font-family: inherit;
  box-sizing: content-box;
  min-width: 60px;
  white-space: pre;
  pointer-events: none;
}

.pdf-textedit-editor .pdf-textedit-ghost.pdf-textedit-block {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Style bar: font size + text color, floats above the run being edited */
.pdf-textedit-bar {
  position: absolute;
  bottom: 100%;
  left: 0;
  display: flex;
  gap: 5px;
  align-items: center;
  margin-bottom: 5px;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--pdf-shadow-pin);
  white-space: nowrap;
}

.pdf-textedit-sizenum {
  width: 48px;
  padding: 2px 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
}

/* Font picker: shared dropdown (@lycero/ui gs-dd) sized to the 22px bar row */
.pdf-textedit-fontsel {
  max-width: 130px;
}

.pdf-textedit-fontsel .gs-dd-btn {
  height: 22px;
  padding: 0 4px;
  border-color: var(--border);
  border-radius: 4px;
}

.pdf-textedit-toggle {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.pdf-textedit-toggle-i {
  font-style: italic;
  font-weight: 400;
  font-family: Georgia, 'Times New Roman', serif;
}

.pdf-textedit-toggle:hover {
  background: var(--hover);
}

.pdf-textedit-toggle.active {
  background: var(--pdf-textedit-hover-bg);
  border-color: var(--pdf-textedit-ring);
  color: var(--text);
}

/* Trash button at the end of the style bar: deletes the whole run */
.pdf-textedit-trash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pdf-textedit-trash svg {
  width: 13px;
  height: 13px;
}
.pdf-textedit-trash:hover {
  color: var(--danger);
}

.pdf-text-color-wrap {
  position: relative;
}

.pdf-color-trigger-compact {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
}

.pdf-textedit-swatch {
  width: 16px;
  height: 16px;
  border: 1px solid var(--border);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
}

.pdf-textedit-swatch.active {
  outline: 2px solid var(--pdf-textedit-ring);
  outline-offset: 1px;
}

/* Style-bar trigger for the shared color picker */
.pdf-textedit-colorwrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.pdf-textedit-colorwrap .pdf-color-popover {
  z-index: 8;
}

.pdf-color-trigger-compact:hover,
.pdf-color-trigger-compact.active {
  border-color: var(--accent);
  background: var(--hover);
}

.pdf-color-trigger-compact > span {
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
}

/* ── Image edit (content-stream image ops) ── */

.pdf-imgedit-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* Below-text previews: multiply with the page raster so existing ink shows
   through, matching how the saved PDF paints text over the image */
.pdf-imgedit-under {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Night mode inverts the page bitmap (ink becomes light); screen keeps it visible */
.pdf-night .pdf-imgedit-under {
  mix-blend-mode: screen;
}

.pdf-imgedit-img,
.pdf-imgedit-ghostbox,
.pdf-imgedit-hit,
.pdf-imgedit-handle,
.pdf-imgedit-liveghost,
.pdf-imgedit-veil {
  position: absolute;
  box-sizing: border-box;
}

/* Covers the old spot of a moved/replaced image until the live page patch erases it */
.pdf-imgedit-veil {
  background: var(--pdf-imgedit-veil-bg);
  pointer-events: none;
}

/* Purely visual copy of an existing image while it is dragged/resized; the
   transparent hit box on top keeps the pointer capture */
.pdf-imgedit-liveghost {
  pointer-events: none;
}

.pdf-imgedit-img,
.pdf-imgedit-ghostbox,
.pdf-imgedit-hit,
.pdf-imgedit-handle {
  pointer-events: auto;
}

/* Another tool owns the pointer (draw/sign/place/text-edit): previews stay visible but inert */
.pdf-imgedit-passive .pdf-imgedit-img,
.pdf-imgedit-passive .pdf-imgedit-ghostbox,
.pdf-imgedit-passive .pdf-imgedit-hit,
.pdf-imgedit-passive .pdf-imgedit-handle {
  pointer-events: none;
}

.pdf-imgedit-img,
.pdf-imgedit-ghostbox,
.pdf-imgedit-hit {
  cursor: move;
  touch-action: none;
}

.pdf-imgedit-img:hover,
.pdf-imgedit-hit:hover,
.pdf-imgedit-selected {
  outline: 1.5px solid var(--pdf-textedit-ring);
}

.pdf-imgedit-hit:hover {
  background: var(--pdf-imgedit-hover-bg);
}

/* Ghost of a moved existing image while its pixels are still loading */
.pdf-imgedit-ghostbox {
  border: 1.5px dashed var(--pdf-textedit-ring);
  background: var(--pdf-imgedit-ghost-bg);
}

/* Live-preview patch: the touched region re-rendered by pdfium without the
   moved/resized/deleted images (document content, so it also inverts at night) */
.pdf-page-livepreview {
  position: absolute;
  pointer-events: none;
}

.pdf-night .pdf-page-livepreview {
  filter: invert(1) hue-rotate(180deg);
}

.pdf-imgedit-handle {
  z-index: 5;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: var(--pdf-paper);
  touch-action: none;
}

/* ── Stamp (watermark/header-footer) preview and config ── */

.pdf-stamp-preview {
  position: absolute;
  z-index: 1;
  cursor: pointer;
  pointer-events: auto;
}

.pdf-stamp-preview:hover {
  outline: 1px dashed var(--pdf-page-hover-outline);
}

.pdf-modal-wide {
  min-width: 440px;
  max-height: 78vh;
  overflow-y: auto;
}

.pdf-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text);
}

.pdf-field > span:first-child {
  flex-shrink: 0;
  min-width: 74px;
  color: var(--text-dim);
}

.pdf-field .pdf-modal-input {
  flex: 1;
  min-width: 0;
}

/* Shared dropdown (@lycero/ui gs-dd) in modal field rows: matches the
 * .pdf-modal-input frame (28px, radius 4, 13px) */
.pdf-field .pdf-modal-dd {
  flex: 1;
  min-width: 0;
}

.pdf-modal-dd .gs-dd-btn {
  height: 28px;
  border-radius: 4px;
  padding: 0 6px 0 8px;
  font-size: 13px;
}

.pdf-field input[type='range'] {
  flex: 1;
  accent-color: var(--accent);
}

.pdf-field em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--text-dim);
  min-width: 40px;
  text-align: right;
}

.pdf-input-sm {
  max-width: 84px;
}

.pdf-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

.pdf-field-grid .pdf-field > span:first-child {
  min-width: 56px;
}

.pdf-color-field {
  position: relative;
}

.pdf-color-trigger {
  display: flex;
  flex: 1;
  min-width: 0;
  height: 30px;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.pdf-color-trigger-swatch {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
}

.pdf-form-color-popup {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 4;
}

.pdf-text-color-popup {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 8;
}

/* Positioning-only wrapper: the shared @lycero/ui .gcp-palette inside
   draws the panel chrome (background, border, radius, shadow). */
.pdf-color-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 4;
}

.pdf-wm-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--pdf-paper);
  font-weight: 600;
  overflow: hidden;
}

/* ── Read-only document properties area ── */

.pdf-prop-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: var(--pdf-prop-bg);
  border-radius: 6px;
}

.pdf-prop-row {
  display: flex;
  gap: 10px;
  font-size: 12px;
}

.pdf-prop-row > span {
  min-width: 74px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.pdf-prop-row > em {
  font-style: normal;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Thumbnail drag-to-reorder ── */

.pdf-thumb[draggable='true'] {
  cursor: grab;
}

.pdf-thumb-dropbefore {
  position: relative;
}

.pdf-thumb-dropbefore::before {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: -5px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}

/* ── Signature dialog ── */

.pdf-sign-tabs {
  display: flex;
  gap: 4px;
}

.pdf-sign-tab {
  height: 26px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
}

.pdf-sign-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--pdf-on-accent);
}

.pdf-sign-pad {
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  background: var(--pdf-paper);
  cursor: crosshair;
  touch-action: none;
}

.pdf-sign-hint {
  font-size: 11.5px;
  color: var(--text-dim);
}

.pdf-sign-fontgrid {
  width: 420px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pdf-sign-fontcard {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--pdf-paper);
  font-size: 26px;
  white-space: nowrap;
  cursor: pointer;
}

.pdf-sign-fontcard.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1.5px var(--accent) inset;
}

.pdf-sign-imgbox {
  width: 420px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  background: var(--pdf-paper);
  cursor: pointer;
  overflow: hidden;
  padding: 6px;
}

.pdf-sign-imgbox-empty {
  flex-direction: column;
  gap: 6px;
  color: var(--text-dim);
  font-size: 12.5px;
}

.pdf-sign-imgplus {
  font-size: 26px;
  line-height: 1;
  color: var(--text-dim);
}

.pdf-sign-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.pdf-sign-bw {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.pdf-sign-bw.disabled {
  color: var(--text-dim);
  cursor: default;
}

/* ── Saved signatures (persisted in userData, reusable across documents) ── */

.pdf-sign-saved-label {
  font-size: 11.5px;
  color: var(--text-dim);
}

.pdf-sign-saved {
  width: 420px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.pdf-sign-saved-item {
  position: relative;
  flex: 0 0 auto;
}

.pdf-sign-saved-pick {
  width: 120px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--pdf-paper);
  cursor: pointer;
  overflow: hidden;
}

.pdf-sign-saved-pick:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.pdf-sign-saved-pick img,
.pdf-sign-saved-pick svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.pdf-sign-saved-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.pdf-sign-saved-item:hover .pdf-sign-saved-del {
  display: flex;
}

.pdf-sign-saved-del:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

.pdf-draw-handle {
  fill: var(--pdf-paper);
  stroke: var(--accent);
  stroke-width: 1.5;
}

/* ── Drawing color split button + palette (same pattern as slides' font color) ── */

.rb-caret {
  flex-shrink: 0;
  display: block;
}

.rb-big-icon .rb-caret {
  margin-left: 3px;
  color: var(--text-dim);
}

/* color strip under the glyph showing the current draw color */
.rb-big-icon-colored {
  position: relative;
  display: flex;
}

.rb-big-icon-colored .rb-color-bar {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: -3px;
  height: 4px;
  border-radius: 1px;
  border: 1px solid var(--pdf-swatch-ring);
}

.rb-drop-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  /* Anchor for the .rb-drop panel (see slides: scope keeps each panel on its own wrap) */
  anchor-name: --rb-drop-wrap;
  anchor-scope: --rb-drop-wrap;
}

.rb-highlight-main {
  padding-right: 16px;
}

.rb-highlight-caret {
  position: absolute;
  top: 5px;
  right: 1px;
  z-index: 1;
  display: flex;
  width: 16px;
  height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

.rb-highlight-caret:hover:not(:disabled),
.rb-highlight-caret.active {
  background: var(--hover);
}

.rb-highlight-caret:disabled {
  opacity: 0.4;
  cursor: default;
}

.rb-drop {
  /* Fixed + anchored to the parent .rb-drop-wrap so the panel escapes the
     ribbon-body scroll clip while still tracking its trigger. */
  position: fixed;
  position-anchor: --rb-drop-wrap;
  top: calc(anchor(bottom) + 6px);
  left: anchor(left);
  position-try-fallbacks: flip-inline;
  position-visibility: anchors-visible;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--pdf-shadow-drop);
  padding: 8px;
}

/* Plain command list inside a ribbon dropdown (converter menu) */
.rb-menu {
  display: flex;
  flex-direction: column;
  min-width: 148px;
  padding: 4px;
}

.rb-menu button {
  border: none;
  background: none;
  text-align: left;
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
}

.rb-menu button:hover:not(:disabled) {
  background: var(--hover);
}

.rb-menu button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Dialog color well (stamp dialog): swatch trigger + the shared picker popover.
   The popover is fixed + anchored so it escapes the modal's overflow-y clip. */
.pdf-color-well-wrap {
  position: relative;
  anchor-name: --pdf-color-well;
}

.pdf-color-well {
  width: 48px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  cursor: pointer;
}

.pdf-color-popover.pdf-color-well-pop {
  position: fixed;
  position-anchor: --pdf-color-well;
  top: calc(anchor(bottom) + 6px);
  left: anchor(left);
  right: auto;
  position-try-fallbacks: flip-block, flip-inline;
  position-visibility: anchors-visible;
  z-index: 60;
}

/* Shared color picker anchored to a ribbon trigger: the .rb-drop rules give it
   the fixed anchor positioning; drop the popover's own right-pin so the two
   inset systems don't fight (matters in RTL) */
/* Ribbon-anchored variant: .rb-drop supplies the anchor positioning; strip its
   panel chrome so only the shared picker's own chrome shows. */
.rb-drop.pdf-color-popover {
  right: auto;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.pdf-modal-textarea {
  min-width: 300px;
  min-height: 90px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 7px 9px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
}

.pdf-modal-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Link annotation hit areas ── */

.pdf-link-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* The layer spans the whole page, but only real link rectangles should take
     pointer input; otherwise every page containing one link blocks text clicks. */
  pointer-events: none;
}

.pdf-link {
  position: absolute;
  border-radius: 2px;
  pointer-events: auto;
}

/* Text editing owns page clicks, including text covered by link annotations. */
.pdf-editing-text .pdf-link {
  pointer-events: none;
}

.pdf-link:hover {
  background: var(--pdf-link-hover-bg);
  box-shadow: 0 0 0 1px var(--pdf-link-hover-ring);
}

/* ── AI tool rows (unified with docs/slides/sheets) ── */

/* Collapsible tool-activity group.
   Unlike docs/slides, this app renders the group BEFORE the reply text, so the
   gap to the surrounding content comes from margin-bottom, not margin-top. */
.ai-work-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 12px;
}

.ai-msg-assistant .ai-work-group:last-child,
.ai-work-group:only-child {
  margin-bottom: 0;
}

.ai-work-group-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-tertiary);
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-work-group-summary:hover {
  color: var(--color-text-secondary);
}

.ai-work-group-summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--pdf-focus-ring);
  border-radius: 4px;
}

.ai-work-group-summary.running {
  color: var(--color-text-secondary);
}

.ai-work-group-summary.running .ai-work-group-label {
  animation: ai-summary-pulse 1500ms linear infinite;
}

@keyframes ai-summary-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

.ai-work-group-body {
  align-self: stretch;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-work-group-body.open {
  grid-template-rows: 1fr;
}

.ai-work-group-body-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 0 0 8px;
  transition: padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-work-group-body.open .ai-work-group-body-inner {
  padding: 4px 0 8px 8px;
}

/* Step rows inside the group: 20px icon slot + 1px connector */
.ai-step-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  color: var(--color-text-tertiary);
  animation: ai-row-ease-in 320ms ease-out;
}

.ai-step-row:not(:last-child) {
  padding-bottom: 16px;
}

.ai-step-row:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 9.5px;
  top: 32px;
  bottom: -4px;
  width: 1px;
  background: var(--color-border-default);
}

.ai-step-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
}

.ai-step-icon.done {
  color: var(--color-text-secondary);
}

.ai-step-icon.error {
  color: var(--pdf-error);
}

.ai-step-icon.running svg {
  animation: ai-hourglass-flip 1.8s ease-in-out infinite;
}

@keyframes ai-hourglass-flip {
  0%,
  12% {
    transform: rotate(0);
  }
  44%,
  56% {
    transform: rotate(180deg);
  }
  88%,
  100% {
    transform: rotate(360deg);
  }
}

.ai-step-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 1px;
}

.ai-step-title {
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-text-secondary);
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
}

.ai-step-title.clickable {
  cursor: pointer;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-step-title.clickable:hover {
  color: var(--color-text-primary);
}

.ai-step-title.clickable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--pdf-focus-ring);
  border-radius: 4px;
}

/* Step detail opens instantly, no animation */
.ai-step-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .ai-step-row,
  .ai-step-icon.running svg,
  .ai-work-group-summary.running .ai-work-group-label {
    animation: none;
  }
}

/* Running tool row: two grow/shrink brand dots */
.ai-tool-chip-spinner {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 12px;
}

.ai-tool-chip-spinner::before,
.ai-tool-chip-spinner::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-brand-secondary);
}

.ai-tool-chip-spinner::before {
  animation: ai-tool-dot-grow 2s infinite;
}

.ai-tool-chip-spinner::after {
  animation: ai-tool-dot-shrink 2s infinite;
}

@keyframes ai-tool-dot-grow {
  0%,
  100% {
    transform: scale(0.333);
    opacity: 0.45;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes ai-tool-dot-shrink {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.333);
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-tool-chip-spinner::before,
  .ai-tool-chip-spinner::after {
    animation: none;
    opacity: 0.65;
  }
}

/* caret: text glyph right after the label, always visible, rotates open */
.ai-tool-chip-caret {
  margin-left: 4px;
  opacity: 0.7;
  display: inline-block;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-tool-chip-caret.open {
  transform: rotate(90deg);
}

/* stream rows ease in */
@keyframes ai-row-ease-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* expanded step detail: subtle gray card, no border */
.ai-tool-output {
  background: var(--color-bg-subtle);
  border: none;
  border-radius: 12px;
  font-family: var(--gs-font-mono, 'Be Vietnam Pro', 'Segoe UI', 'Cascadia Mono', Consolas, sans-serif);
  font-size: 14px;
  color: var(--color-text-primary);
  max-height: 300px;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
}

.ai-tool-output-pre {
  padding: 12px 16px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

/* ── Print container: hidden on screen, the only thing shown when printing ── */

.pdf-print-root {
  display: none;
}

@media print {
  html,
  body {
    height: auto;
    overflow: visible;
  }

  /* Hide the full-height editor root so it cannot reserve a blank sheet. */
  #root {
    display: none !important;
  }

  .pdf-print-root {
    display: block;
  }

  .pdf-print-root img {
    display: block;
    width: 100%;
    /* Print viewport units use the printable area, including chosen margins. */
    max-height: 100vh;
    object-fit: contain;
  }

  .pdf-print-root img + img {
    break-before: page;
  }
}

/* ── AI sidebar (aligned with docs/sheets panel language) ── */

/* dock wrapper: its width animates between the panel and the 34px collapsed rail
 * (docs-parity 180ms ease); the panel inside keeps its natural width and is clipped */
.ai-dock {
  display: flex;
  flex-shrink: 0;
  min-height: 0;
  width: var(--ai-panel-width, 360px);
  overflow: hidden;
  transition: width 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-dock.collapsed {
  width: 34px;
}

/* "show the AI sidebar" off and panel closed: no rail, no sliver */
.ai-dock.collapsed.ai-dock-off {
  width: 0;
}

/* while dragging the resizer, follow the pointer without easing */
.ai-dock:has(.ai-panel-resizing) {
  transition: none;
}

/* the panel stays mounted (chat history survives) but hidden while collapsed */
.ai-dock.collapsed .copilot {
  display: none;
}

/* the rail stretches to fill the dock while the width animates */
.ai-dock .ai-rail {
  flex: 1;
  width: auto;
}

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

/* collapsed AI sidebar: thin rail on the left edge (same as docs) */
.ai-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 34px;
  padding: 12px 2px;
  border: none;
  border-left: var(--ai-panel-border-left, 0px) solid var(--border);
  border-right: var(--ai-panel-border-right, 1px) solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}

.ai-rail:hover {
  background: var(--hover);
}

.copilot {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 360px;
  flex-shrink: 0;
  min-height: 0;
  overflow: hidden;
  border-left: var(--ai-panel-border-left, 0px) solid var(--border);
  border-right: var(--ai-panel-border-right, 1px) solid var(--border);
  background: var(--surface);
  font-family: var(--gs-font-sans);
  color: var(--color-text-primary);
}

/* drag handle on the panel's right edge — resize the panel horizontally */
.ai-panel-resizer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 20;
  background: transparent;
}

/* while dragging: keep the col-resize cursor everywhere, no text selection */
.ai-panel-resizing {
  cursor: col-resize;
  user-select: none;
}

.ai-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 14px;
}

.ai-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

/* Lycero brand logo (shared by the collapsed entry and the AI panel title) */
.lycero-badge {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.ai-panel-title .lycero-badge {
  width: 18px;
  height: 18px;
}

.ai-panel-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ai-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  border-radius: 6px;
  color: var(--text-dim);
  padding: 0;
  cursor: pointer;
}

.ai-header-btn:hover {
  background: var(--hover);
  color: var(--text);
}

.ai-chat {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  /* uniform 16px flex gap between blocks, messages carry no margin */
  gap: 16px;
  overflow-y: auto;
  padding: 32px 16px;
  font-family:
    'Arial',
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    sans-serif;
}

/* Boundary between the restored transcript and the live turn */
.ai-history-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  font-size: 14px;
  color: var(--color-text-tertiary);
}

.ai-chat-empty {
  margin-top: 36px;
  padding: 0 10px;
  text-align: center;
  font-family: var(--gs-font-sans);
}

.ai-chat-empty-title {
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.ai-chat-empty-body {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  font-weight: 400;
  line-height: 1.5;
}

/* Starter pills: same metrics as the slides .ai-starter list (stacked, centered) */
.ai-quick-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.ai-quick-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-page);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ai-quick-btn:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-subtle);
}

.ai-quick-btn:active {
  filter: brightness(0.88);
}

/* Chat messages (scaled to the 14px panel): user = gray pill, AI = plain text without a bubble, no accent colors */
.ai-msg {
  position: relative;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* User pill: gray, fully rounded (no tail) */
.ai-msg-user {
  align-self: flex-end;
  color: var(--color-text-primary);
  background: var(--color-bg-subtle);
  padding: 8px 16px;
  border-radius: 14px;
  max-width: 80%;
  line-height: 1.5;
}

.ai-msg-assistant {
  align-self: stretch;
  border: none;
  background: none;
  padding: 0;
  max-width: 100%;
  color: var(--color-text-primary);
  white-space: normal;
}

.ai-msg-error {
  border-color: var(--pdf-error-border);
  color: var(--pdf-error);
}

.ai-md p,
.ai-md ul,
.ai-md ol {
  margin: 0 0 16px;
}

.ai-md :last-child {
  margin-bottom: 0;
}

/* blank markdown paragraphs would each eat a 16px margin — the stream never renders them */
.ai-md p:empty {
  display: none;
}

.ai-md .ai-md-h {
  font-weight: 700;
  line-height: 1.3;
  margin: 20px 0 8px;
}

.ai-md .ai-md-h:first-child {
  margin-top: 0;
}

.ai-md ul,
.ai-md ol {
  margin-bottom: 20px;
  padding-left: 20px;
}

.ai-md li {
  margin-left: 20px;
  line-height: 28px;
}

/* inline code: neutral gray chip (deliberately not red), 2px below body size */
.ai-md code {
  border-radius: 4px;
  padding: 1px 6px;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 14px;
}

/* in-answer page citations: click scrolls the reading view to the page */
.ai-md .ai-md-nav {
  color: var(--accent);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}

.ai-md .ai-md-nav:hover {
  text-decoration-style: solid;
}

/* ---- OCR text layer on scanned pages: invisible but selectable ---- */

.pdf-ocr-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  line-height: 1;
}

.pdf-ocr-layer span {
  position: absolute;
  white-space: pre;
  color: transparent;
  cursor: text;
  transform-origin: 0 0;
}

/* ---- Ask-AI entry on the markup bar + its anchored popover ---- */

.pdf-sel-popup-sep {
  width: 1px;
  align-self: stretch;
  margin: 3px 2px;
  background: var(--border);
}

.pdf-sel-popup button.pdf-sel-ask {
  width: auto;
  gap: 5px;
  padding: 0 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ai-action);
}

.ai-ask-pop {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-12);
  background: var(--surface);
  box-shadow: var(--pdf-shadow-popup);
}

.ai-ask-pop-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

.ai-ask-pop-close:hover {
  background: var(--hover);
  color: var(--text);
}

.ai-ask-pop-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.ai-ask-pop-title {
  padding-right: 24px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.ai-ask-pop-sub {
  margin-top: -4px;
  font-size: 11.5px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-ask-pop-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  background: var(--color-bg-page);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.ai-ask-pop-input:focus {
  border-color: var(--accent);
}

.ai-ask-pop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-ask-chip {
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 11.5px;
  cursor: pointer;
}

.ai-ask-chip:hover {
  background: var(--hover);
  color: var(--text);
}

.ai-ask-pop-foot {
  display: flex;
  justify-content: flex-end;
}

.ai-ask-confirm {
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-6);
  background: var(--color-ai-action);
  color: var(--color-ai-action-text);
  font-size: 12px;
  cursor: pointer;
}

.ai-ask-confirm:hover:not(:disabled) {
  background: var(--color-ai-action-hover);
}

.ai-ask-confirm:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---- selection scope chip in the AI composer header (same look as docs/markdown) ---- */

.ai-scope-row {
  margin-bottom: 7px;
}

.ai-scope-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-30);
  background: var(--accent-soft);
  font-size: 11.5px;
  color: var(--accent-dark);
  font-weight: 500;
}

.ai-scope-hint::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.ai-scope-hint .ai-scope-label,
.ai-scope-hint .ai-scope-clear {
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.ai-scope-hint .ai-scope-clear {
  opacity: 0.65;
}

.ai-scope-hint .ai-scope-clear:hover {
  opacity: 1;
}

.ai-scope-preview {
  margin-top: 6px;
  padding: 7px 10px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-8);
  background: var(--color-bg-page);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-height: 96px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Thinking indicator: shimmer label above two grow/shrink dots */
.ai-typing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 0;
}

.ai-typing-label {
  display: inline-block;
  position: relative;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--pdf-shimmer-base);
  -webkit-text-fill-color: transparent;
  background: var(--pdf-shimmer-base)
    linear-gradient(
      to left,
      var(--pdf-shimmer-base),
      var(--pdf-shimmer-hi) 50%,
      var(--pdf-shimmer-base)
    );
  background-clip: text;
  -webkit-background-clip: text;
  background-repeat: no-repeat;
  background-size: 70% 100%;
  animation: ai-thinking-shimmer 1.2s infinite alternate linear;
}

.ai-typing-elapsed {
  font-variant-numeric: tabular-nums;
}

@keyframes ai-thinking-shimmer {
  0% {
    background-position: -100% top;
  }
  100% {
    background-position: 250% top;
  }
}

.ai-typing-dots {
  height: 12px;
  display: flex;
  gap: 2px;
}

.ai-typing-dot-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12px;
}

.ai-typing-dot-grow,
.ai-typing-dot-shrink {
  background: var(--color-brand-secondary);
  border-radius: 50%;
}

.ai-typing-dot-grow {
  animation: ai-dot-grow 2s infinite;
}

.ai-typing-dot-shrink {
  animation: ai-dot-shrink 2s infinite;
}

@keyframes ai-dot-grow {
  0%,
  100% {
    width: 4px;
    height: 4px;
    opacity: 0.45;
  }
  50% {
    width: 12px;
    height: 12px;
    opacity: 1;
  }
}

@keyframes ai-dot-shrink {
  0%,
  100% {
    width: 12px;
    height: 12px;
    opacity: 1;
  }
  50% {
    width: 4px;
    height: 4px;
    opacity: 0.45;
  }
}

/* streaming caret at the tail of streaming assistant text */
.ai-msg-streaming .ai-md > :last-child::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 1em;
  margin-left: 2px;
  border-radius: 1px;
  background: var(--color-text-secondary);
  vertical-align: text-bottom;
  animation: ai-caret-blink 900ms steps(1, end) infinite;
}

@keyframes ai-caret-blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-typing-label,
  .ai-msg-streaming .ai-md > :last-child::after {
    animation: none;
  }
}

/* Composer floats over the chat scroll area — no top border (agent-shell §4.6) */
.ai-composer {
  border-top: none;
  padding: 8px 12px 12px;
  background: var(--color-bg-page);
  font-family: var(--gs-font-sans);
}

/* composer card — 16px radius, default border, production float shadow */
.ai-input-box {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-16);
  background: var(--color-bg-page);
  box-shadow: var(--pdf-shadow-composer);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* textarea: 16px / 24px fixed line-height (chat body size), auto-grow band
 * (resting height matches the other AI panels, 25% taller than default) */
.ai-input-box textarea {
  display: block;
  width: 100%;
  resize: none;
  border: none;
  background: none;
  border-radius: var(--radius-16) var(--radius-16) 0 0;
  /* vertical gaps live on margin, not padding: textarea padding scrolls away
   * with the content, so clipped lines would sit flush against chips/footer */
  padding: 0 14px;
  margin: 12px 0 4px;
  font-size: 14px;
  font-family: inherit;
  line-height: 24px;
  outline: none;
  color: var(--color-text-primary);
  min-height: 48px;
  max-height: 168px;
  overflow-y: auto;
}

.ai-input-box textarea::placeholder {
  color: var(--color-text-tertiary);
}

.ai-input-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 8px 10px;
}

.ai-input-hint {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* icon-only enter key: transparent button chrome, visuals come from brand-supplied PNGs
 * (gray arrow = disabled, black arrow = enabled), 36×36, same as the other AI panels */
.ai-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  border: none;
  border-radius: 35%;
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ai-send-btn img {
  display: block;
  width: 100%;
  height: 100%;
}

.ai-send-btn:hover:not(:disabled) {
  filter: brightness(0.92);
}

.ai-send-btn:active:not(:disabled) {
  filter: brightness(0.88);
  transform: scale(0.98);
}

.ai-send-btn:disabled {
  cursor: default;
}

/* Stop button while generating: brand-supplied art (white square on black), transparent button chrome */
.ai-send-btn.ai-stop-btn {
  background: transparent;
}

.ai-send-btn.ai-stop-btn:hover {
  filter: brightness(0.92);
}

/* ── pdfjs text layer (select/copy); structure requirements per pdfjs TextLayer ── */

/* Matches pdf.js's official text_layer.css: spans laid out in unrotated page space,
   whole layer rotated via data-main-rotation; font size/scale driven by --font-height/--scale-x vars */
.textLayer {
  --min-font-size: 1;
  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
  --min-font-size-inv: calc(1 / var(--min-font-size));

  position: absolute;
  inset: 0;
  overflow: clip;
  line-height: 1;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  caret-color: CanvasText;
}

.textLayer[data-main-rotation='90'] {
  transform: rotate(90deg) translateY(-100%);
}

.textLayer[data-main-rotation='180'] {
  transform: rotate(180deg) translate(-100%, -100%);
}

.textLayer[data-main-rotation='270'] {
  transform: rotate(270deg) translateX(-100%);
}

.textLayer span,
.textLayer br {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.textLayer > :not(.markedContent),
.textLayer .markedContent span:not(.markedContent) {
  z-index: 1;
  --font-height: 0;
  font-size: calc(var(--text-scale-factor) * var(--font-height));
  --scale-x: 1;
  --rotate: 0deg;
  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}

.textLayer .markedContent {
  display: contents;
}

.textLayer span::selection {
  background: var(--pdf-text-selection);
}

/* pdfjs uses endOfContent to carry cross-page selection */
.textLayer .endOfContent {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  z-index: -1;
  cursor: default;
  user-select: none;
}

.ai-msg-undelivered {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--pdf-error);
}

.ai-retry-btn {
  border: 1px solid var(--pdf-error-border);
  border-radius: 4px;
  background: none;
  padding: 1px 8px;
  font-size: 12px;
  color: var(--pdf-error);
  cursor: pointer;
}

.ai-retry-btn:hover {
  background: var(--pdf-error-bg-hover);
}

/* File-operation confirmation card: ends the stream while the run waits for the user */
.ai-confirm-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  background: var(--color-bg-subtle);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.ai-confirm-title {
  font-weight: 600;
}

.ai-confirm-detail {
  color: var(--color-text-secondary);
}

.ai-confirm-warning {
  color: var(--danger);
}

.ai-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* ================= status bar (unified chrome shared with docs/sheets/slides) ================= */

.status-bar {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  height: 24px;
  font-size: 11.5px;
  color: var(--text-dim);
  background: var(--pdf-statusbar-bg);
  border-top: 1px solid var(--pdf-statusbar-border);
}

.status-left {
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-item {
  margin-right: 14px;
  flex-shrink: 0;
}

.status-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.zoom-btn {
  border: none;
  background: none;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  line-height: 1;
}

.zoom-btn:hover {
  background: var(--pdf-statusbar-hover);
}

.zoom-slider {
  width: 110px;
  accent-color: var(--text-muted);
  height: 3px;
}

.zoom-value {
  min-width: 38px;
  text-align: right;
}

/* body row (AI dock + content column) — the status bar spans only the content
   column so the dock runs the full height of the window */
.app-main {
  display: flex;
  flex: 1;
  min-height: 0;
}

.app-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* ── Digital signatures: banner, panel, certificate dialog ── */

.pdf-sig-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  font-size: 12.5px;
  color: var(--text);
  background: var(--pdf-prop-bg);
  border-bottom: 1px solid var(--border);
  border-inline-start: 3px solid var(--pdf-ok);
}

.pdf-sig-banner.warning,
.pdf-sig-banner.untrusted {
  border-inline-start-color: var(--pdf-sig-warn);
}

.pdf-sig-banner.invalid {
  border-inline-start-color: var(--danger);
}

.pdf-sig-banner > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-sig-dialog {
  min-width: 520px;
  max-width: 640px;
}

.pdf-sig-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--pdf-ok);
  border-radius: 8px;
}

.pdf-sig-card.warning,
.pdf-sig-card.untrusted {
  border-inline-start-color: var(--pdf-sig-warn);
}

.pdf-sig-card.invalid {
  border-inline-start-color: var(--danger);
}

.pdf-sig-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.pdf-sig-head > strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-sig-pill {
  flex-shrink: 0;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pdf-ok);
  border: 1px solid var(--pdf-ok);
}

.pdf-sig-pill.warning,
.pdf-sig-pill.untrusted {
  color: var(--pdf-sig-warn);
  border-color: var(--pdf-sig-warn);
}

.pdf-sig-pill.invalid {
  color: var(--danger);
  border-color: var(--danger);
}

.pdf-sig-problems {
  margin: 0;
  padding-inline-start: 18px;
  font-size: 12px;
  color: var(--text);
}

.pdf-sig-chain {
  font-size: 12px;
  color: var(--text-dim);
}

.pdf-sig-chain > summary {
  cursor: pointer;
  margin-bottom: 6px;
}

.pdf-sig-chain .pdf-prop-table + .pdf-prop-table {
  margin-top: 6px;
}

.pdf-cert-dialog {
  min-width: 500px;
}

.pdf-cert-file {
  flex: 1;
  min-width: 0;
  font-style: normal;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-cert-page {
  flex: 0 0 64px;
}

.pdf-cert-error {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: 6px;
}

/* Bookmark editing (pending outline tree) */
.pdf-bookmark-row {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.pdf-bookmark-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: none;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.pdf-bookmark-actions {
  display: none;
  flex-shrink: 0;
}
.pdf-bookmark-row:hover .pdf-bookmark-actions {
  display: inline-flex;
}
.pdf-bookmark-add {
  margin: 4px 8px;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}

/* Compare panel: summary, then one tappable row per differing page */
.pdf-compare {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  overflow-y: auto;
}

.pdf-compare-pick {
  align-self: flex-start;
}

.pdf-compare-swap {
  align-self: flex-start;
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  font-size: 0.85em;
}

.pdf-compare-other {
  color: var(--text-muted);
}

.pdf-compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pdf-compare-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  text-align: start;
  color: inherit;
  font: inherit;
}

.pdf-compare-row:hover {
  background: var(--hover);
}

.pdf-compare-page {
  min-width: 72px;
  font-size: 0.88em;
}

.pdf-compare-added {
  color: var(--pdf-ok);
  font-size: 0.82em;
}

.pdf-compare-removed {
  color: var(--pdf-error);
  font-size: 0.82em;
}

.pdf-compare-truncated {
  color: var(--pdf-sig-warn);
  font-size: 0.82em;
}

/* a page whose probe failed: same frame as a rendered page, an error line instead of a canvas */
.pdf-page-broken {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--surface);
  color: var(--danger);
  font-size: 12px;
}

/* PDF collaboration status bar */
.pdf-collab-bar {
  position: fixed;
  top: 6px;
  right: 12px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
  font-size: 12px;
}

.pdf-collab-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.pdf-collab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted);
}

.pdf-collab-status--connected .pdf-collab-dot {
  background: var(--color-semantic-success);
}

.pdf-collab-status--connecting .pdf-collab-dot,
.pdf-collab-status--reconnecting .pdf-collab-dot {
  background: var(--color-semantic-warning);
}

.pdf-collab-avatars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pdf-collab-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--color-text-on-brand);
  font-size: 10px;
  font-weight: 600;
}

.pdf-collab-btn {
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.pdf-collab-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pdf-collab-error {
  color: var(--color-semantic-danger);
  font-weight: 600;
}