/**
 * 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 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).
 */
/* Find / replace popover shared by the markdown and html editors. The host
 * container must be position: relative; colors come from tokens.css and the
 * app's --accent. */

.find-panel {
  position: absolute;
  top: 8px;
  right: 20px;
  z-index: 60;
  -webkit-app-region: no-drag;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: var(--shadow-menu);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.find-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.find-input {
  width: 200px;
  height: 28px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 0 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  outline: none;
}

.find-input:focus {
  border-color: var(--accent);
}

.find-opt {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 3px;
  font-size: 11px;
  padding: 2px 6px;
  cursor: pointer;
  color: var(--text-dim);
}

.find-opt.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}

.find-count {
  min-width: 44px;
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
}

.find-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--text);
}

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

.find-btn:disabled {
  color: var(--border-strong);
  cursor: default;
}

.find-close {
  font-size: 12px;
}

.find-action {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}

.find-action:hover:not(:disabled) {
  background: var(--hover);
}

.find-action:disabled {
  color: var(--text-muted);
  cursor: default;
}

.search-hit {
  background: var(--search-hit-bg);
  border-radius: 2px;
}

.search-hit-active {
  background: var(--search-hit-active-bg);
  color: var(--search-hit-active-ink);
}
/**
 * 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).
 */
/* 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).
 */
/* 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 picture dialogs (crop / remove background): chrome only, the picture itself stays document data */

.gs-imgdlg-mask {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--color-bg-overlay);
  backdrop-filter: blur(4px);
}

.gs-imgdlg {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 300px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  margin-top: 96px;
  padding: 14px;
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-modal-strong);
  color: var(--text);
  font-size: 13px;
}

.gs-imgdlg-title {
  font-weight: 600;
}

.gs-imgdlg-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 160px;
  border-radius: 4px;
  overflow: hidden;
}

.gs-imgdlg-error {
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--color-error);
}

.gs-imgdlg-dim,
.gs-imgdlg-hint {
  color: var(--text-dim);
}

.gs-imgdlg-hint {
  font-size: 12px;
}

.gs-imgdlg-slider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.gs-imgdlg-slider > span {
  white-space: nowrap;
}

.gs-imgdlg-slider input {
  flex: 1;
}

.gs-imgdlg-slider-value {
  width: 32px;
  text-align: right;
}

.gs-imgdlg-crop-view {
  position: relative;
  user-select: none;
}

.gs-imgdlg-crop-view img {
  display: block;
}

.gs-imgdlg-shade {
  position: absolute;
  background: rgba(0, 0, 0, 0.45);
}

.gs-imgdlg-crop-box {
  position: absolute;
  box-sizing: border-box;
  border: 1.5px solid var(--accent);
  cursor: move;
}

.gs-imgdlg-handle {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  background: var(--surface);
}

.gs-imgdlg-handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.gs-imgdlg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.gs-imgdlg-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;
}

.gs-imgdlg-btn:hover:not(:disabled) {
  background: var(--color-bg-subtle);
}

.gs-imgdlg-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.gs-imgdlg-btn.primary {
  border-color: var(--color-btn-primary);
  background: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
}

.gs-imgdlg-btn.primary:hover:not(:disabled) {
  border-color: var(--color-btn-primary-hover);
  background: var(--color-btn-primary-hover);
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
:root {
  --accent: #232425;
  --accent-dark: #000000;
  --accent-soft: rgba(35, 36, 37, 0.1);
  /* document surface: a page without its own background is white in every browser, so the theme never repaints it */
  --preview-page-bg: #ffffff;
  --hx-ai-changed: rgb(139 58 26 / 10%);
  --hx-ai-anchor-bg: rgb(80 128 220 / 14%);
  --hx-ai-anchor-line: #5080dc;
  --hx-on-accent: #ffffff;
  --hx-focus: var(--accent);
  --hx-node-outline: color-mix(in srgb, var(--accent) 60%, transparent);
  --hx-focus-ring: rgb(35 36 37 / 20%);
  --hx-focus-ring-soft: rgb(35 36 37 / 18%);
  --hx-focus-ring-strong: rgb(35 36 37 / 35%);
  --hx-choice-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.5l2.5 2.5 4.5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --hx-focus-ring-blue: rgb(74 141 246 / 30%);
  --hx-error: #c62828;
  --hx-error-border: rgb(198 40 40 / 45%);
  --hx-error-bg: rgb(198 40 40 / 8%);
  --hx-shadow-color: rgb(0 0 0 / 13%);
  --hx-shadow-soft: rgb(0 0 0 / 9%);
  --hx-shimmer-base: #666666;
  --hx-shimmer-hi: #d9d9d9;
  --hx-pop-shadow: 0 8px 24px rgb(0 0 0 / 18%);
  --hx-tip-shadow: 0 4px 6px rgb(0 0 0 / 10%);
  --hx-code-bg: #f6f8fa;
  --hx-code-inline-bg: rgb(129 139 152 / 14%);
  --hx-link: #0a69da;
  --cm-tag: #0550ae;
  --cm-attr: #953800;
  --cm-string: #0a3069;
  --cm-comment: #6e7781;
  --cm-keyword: #cf222e;
  --cm-number: #0550ae;
  --cm-punct: #57606a;
}

[data-theme='dark'] {
  --hx-ai-changed: rgb(217 119 87 / 16%);
  --hx-ai-anchor-bg: rgb(96 148 240 / 22%);
  --hx-ai-anchor-line: #6a9aec;
  --hx-on-accent: #ffffff;
  --hx-focus: var(--accent);
  --hx-node-outline: color-mix(in srgb, var(--accent) 70%, transparent);
  --hx-focus-ring: rgb(255 255 255 / 22%);
  --hx-focus-ring-soft: rgb(228 228 228 / 22%);
  --hx-focus-ring-strong: rgb(228 228 228 / 40%);
  --hx-choice-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.5l2.5 2.5 4.5-5' fill='none' stroke='%231e1e1e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --hx-focus-ring-blue: rgb(96 148 240 / 35%);
  --hx-error: #ef5350;
  --hx-error-border: rgb(239 83 80 / 45%);
  --hx-error-bg: rgb(239 83 80 / 10%);
  --hx-shadow-color: rgb(0 0 0 / 45%);
  --hx-shadow-soft: rgb(0 0 0 / 35%);
  --hx-shimmer-base: #9a9a9a;
  --hx-shimmer-hi: #3a3a3a;
  --hx-pop-shadow: 0 8px 24px rgb(0 0 0 / 55%);
  --hx-tip-shadow: 0 4px 6px rgb(0 0 0 / 40%);
  --hx-code-bg: #23272e;
  --hx-code-inline-bg: rgb(129 139 152 / 22%);
  --hx-link: #4a9eff;
  --accent: #e4e4e4;
  --accent-dark: #ffffff;
  --accent-soft: rgba(228, 228, 228, 0.16);
  --cm-tag: #7ee787;
  --cm-attr: #79c0ff;
  --cm-string: #a5d6ff;
  --cm-comment: #8b949e;
  --cm-keyword: #ff7b72;
  --cm-number: #79c0ff;
  --cm-punct: #8b949e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --hx-ai-changed: rgb(255 213 79 / 28%);
    --hx-ai-anchor-bg: rgb(96 148 240 / 22%);
    --hx-ai-anchor-line: #6a9aec;
    --hx-on-accent: #ffffff;
    --hx-focus: var(--accent);
    --hx-node-outline: color-mix(in srgb, var(--accent) 70%, transparent);
    --hx-focus-ring: rgb(255 255 255 / 22%);
    --hx-focus-ring-soft: rgb(228 228 228 / 22%);
    --hx-focus-ring-strong: rgb(228 228 228 / 40%);
    --hx-choice-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.5l2.5 2.5 4.5-5' fill='none' stroke='%231e1e1e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    --hx-focus-ring-blue: rgb(96 148 240 / 35%);
    --hx-error: #ef5350;
    --hx-error-border: rgb(239 83 80 / 45%);
    --hx-error-bg: rgb(239 83 80 / 10%);
    --hx-shadow-color: rgb(0 0 0 / 45%);
    --hx-shadow-soft: rgb(0 0 0 / 35%);
    --hx-shimmer-base: #9a9a9a;
    --hx-shimmer-hi: #3a3a3a;
    --hx-pop-shadow: 0 8px 24px rgb(0 0 0 / 55%);
    --hx-tip-shadow: 0 4px 6px rgb(0 0 0 / 40%);
    --hx-code-bg: #23272e;
    --hx-code-inline-bg: rgb(129 139 152 / 22%);
    --hx-link: #4a9eff;
    --accent: #e4e4e4;
    --accent-dark: #ffffff;
    --accent-soft: rgba(228, 228, 228, 0.16);
    --cm-tag: #7ee787;
    --cm-attr: #79c0ff;
    --cm-string: #a5d6ff;
    --cm-comment: #8b949e;
    --cm-keyword: #ff7b72;
    --cm-number: #79c0ff;
    --cm-punct: #8b949e;
  }
}

html,
body,
#root {
  height: 100%;
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

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

/* ---- ribbon (same structure and metrics as the markdown/docs ribbons) ---- */

.ribbon {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  user-select: none;
  color: var(--text-primary);
}

/* quick-access row (save / undo / redo / autosave); doubles as the window drag strip */
.ribbon-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 10px 0;
  min-height: 39px;
  -webkit-app-region: drag;
}

html.lycero-popover-open .ribbon-tabs {
  -webkit-app-region: no-drag;
}

.ribbon-tabs button,
.ribbon-tabs .autosave-toggle {
  -webkit-app-region: no-drag;
}

.ribbon-body {
  display: flex;
  align-items: stretch;
  padding: 6px 12px;
  height: 80px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.ribbon-body::-webkit-scrollbar {
  display: none;
}

.rb-sep {
  width: 1px;
  flex-shrink: 0;
  align-self: stretch;
  background: var(--border);
  margin: 2px 6px;
}

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

.qa-save-as,
.qa-name-with-ai {
  width: auto;
  padding: 0 8px;
  white-space: nowrap;
}

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

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

.qa-btn:disabled {
  color: var(--text-tertiary);
  cursor: default;
}

.autosave-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  margin: 0 4px;
  user-select: none;
}

.autosave-toggle input {
  display: none;
}

.autosave-knob {
  width: 26px;
  height: 14px;
  border-radius: 7px;
  background: var(--border-strong, var(--border));
  position: relative;
  transition: background 0.15s;
}

.autosave-knob::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface);
  transition: left 0.15s;
}

.autosave-toggle.on .autosave-knob {
  background: var(--accent);
}

.autosave-toggle.on .autosave-knob::after {
  left: 14px;
}

.autosave-text {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 28px;
  height: 30px;
  padding: 0 4px;
  white-space: nowrap;
  border: none;
  border-radius: 3px;
  font-size: 15px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}

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

.rb-btn.active {
  background: var(--active-bg);
  color: var(--text-primary);
}

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

.rb-view {
  padding: 0 8px;
  font-size: 12.5px;
}

.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;
}

/* muted verb leading a button row ("Insert  Heading Paragraph Image …"): the ribbon has no tabs to say it */
.rb-group-lead {
  flex-shrink: 0;
  padding: 0 6px 0 4px;
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.rb-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  border-radius: 4px;
  padding: 4px 7px 6px;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  color: var(--text-primary);
}

.rb-big-icon {
  min-height: 28px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  align-self: stretch;
  border-radius: 4px;
  padding: 3px 4px;
  margin: 0 -4px;
}

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

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

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

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

/* ---- main layout: AI dock (left) + editor ---- */

.app-main {
  flex: 1;
  display: flex;
  min-height: 0;
}

.app-content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.disk-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text);
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border);
}
.disk-notice span {
  flex: 1;
  min-width: 0;
}
.disk-notice button {
  padding: 3px 10px;
  font-size: 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.disk-notice button:hover {
  background: var(--hover);
}

/* ---- AI change highlight in the source pane ---- */

.cm-ai-changed {
  background: var(--hx-ai-changed);
}

/* ---- workspace ---- */

.workspace {
  flex: 1;
  display: flex;
  min-height: 0;
}

.pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.view-split .pane {
  flex: 1 1 50%;
}

.view-split .pane-source {
  border-left: 1px solid var(--border);
}

.view-preview .pane-preview,
.view-source .pane-source {
  flex: 1 1 100%;
}

/* hidden, not unmounted: the CodeMirror instance (and its undo history) must survive view switches */
.view-preview .pane-source,
.view-source .pane-preview {
  display: none;
}

.preview-host {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--preview-page-bg);
}

.draft-preview {
  position: absolute;
  inset: 0;
  background: var(--preview-page-bg);
}

.draft-preview-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: var(--preview-page-bg);
}

.preview-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
}

.source-editor {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.source-editor .cm-editor {
  height: 100%;
}

/* ---- source context menu (withholding a selection from the model) ---- */

.source-ctx {
  position: fixed;
  z-index: 70;
  min-width: 180px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  background: var(--surface);
  box-shadow: var(--shadow-menu);
}

.source-ctx-item {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.source-ctx-item:hover {
  background: var(--hover);
}

.source-ctx-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ---- redact dialog ---- */

.redact-dialog-mask {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-overlay);
}

.redact-dialog {
  width: 380px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-12);
  background: var(--surface);
  box-shadow: var(--shadow-modal-strong);
}

.redact-dialog-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.redact-dialog-desc {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* the marker as the model will see it, live as the label is typed */
.redact-dialog-preview {
  margin-bottom: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-8);
  background: var(--surface-subtle);
  color: var(--text);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
  word-break: break-all;
}

.redact-dialog-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: inherit;
  font-size: 13px;
  outline: none;
}

.redact-dialog-input:focus {
  border-color: var(--accent);
}

.redact-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.redact-dialog-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

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

.redact-dialog-btn.primary {
  background: var(--color-btn-primary);
  border-color: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
  font-weight: 600;
}

.redact-dialog-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---- status bar ---- */

.status-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  background: var(--surface);
  user-select: none;
}

.status-left,
.status-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.status-right {
  margin-left: auto;
}

.status-hint {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-failed {
  color: var(--danger);
}

.zoom-btn {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.zoom-btn:hover:not(:disabled) {
  background: var(--hover);
  color: var(--text);
}

.zoom-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.zoom-slider {
  width: 90px;
  accent-color: var(--accent);
}

.zoom-value {
  min-width: 38px;
  text-align: right;
}

.center-note {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 14px;
}

/* ── AI sidebar (same panel language as docs/sheets/markdown) ── */

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

.ai-feature-icon svg {
  width: 24px;
  height: 24px;
}

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

.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;
  /* the dock clips at its own width, so the divider must sit inside the 100% width */
  box-sizing: border-box;
  border-left: var(--ai-panel-border-left, 0px) solid var(--color-border-strong);
  border-right: var(--ai-panel-border-right, 1px) solid var(--color-border-strong);
  background: var(--color-bg-page);
  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(--color-border-default);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary);
}

.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;
  flex-shrink: 0;
  border: none;
  background: none;
  border-radius: var(--radius-8);
  color: var(--color-text-secondary);
  padding: 0;
  cursor: pointer;
  transition: all var(--transition-fast);
}

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

.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: var(--gs-font-sans);
}

/* 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(--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;
}

.ai-starter-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.ai-starter {
  padding: 8px 16px;
  border-radius: var(--radius-30);
  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-starter:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-subtle);
}

.ai-starter:active {
  filter: brightness(0.88);
  transform: scale(0.98);
}

/* 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(--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(--text-primary);
  white-space: normal;
}

.ai-msg-error {
  border-color: var(--hx-error-border);
  color: var(--hx-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;
}

/* Collapsible tool-activity group (ported from docs) */
.ai-work-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 12px;
}

.ai-msg-assistant .ai-work-group:first-child,
.ai-work-group:only-child {
  margin-top: 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(--hx-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;
}

.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(--hx-error);
}

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

.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(--text-primary);
}

.ai-step-title.clickable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--hx-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;
}

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

/* Elapsed run time next to the typing indicator */
.ai-typing-row {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

/* 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);
}

/* expanded step detail: subtle gray card, no border */
.ai-tool-output {
  background: var(--color-bg-subtle);
  border: none;
  border-radius: 12px;
  font-family:
    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 14px;
  color: var(--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;
}

/* 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(--hx-shimmer-base);
  -webkit-text-fill-color: transparent;
  background: var(--hx-shimmer-base)
    linear-gradient(
      to left,
      var(--hx-shimmer-base),
      var(--hx-shimmer-hi) 50%,
      var(--hx-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;
}

.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;
}

/* 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;
}

@media (prefers-reduced-motion: reduce) {
  .ai-typing-label,
  .ai-msg-streaming .ai-md > :last-child::after {
    animation: none;
  }
}

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

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

@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;
  }
}

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

@keyframes ai-thinking-shimmer {
  0% {
    background-position: -100% top;
  }
  100% {
    background-position: 250% top;
  }
}

@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;
  }
}

@keyframes ai-caret-blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

.ai-msg-toolbar {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.ai-msg-tool-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 30px;
  min-width: 30px;
  padding: 5px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-msg-tool-btn svg {
  width: 20px;
  height: 20px;
}

.ai-msg-tool-btn:hover {
  background: var(--color-bg-subtle);
}

.ai-msg-tool-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--hx-focus-ring-blue);
}

.ai-msg-tool-btn:active {
  filter: brightness(0.88);
  transform: scale(0.98);
}

/* Version snapshots footer (same as docs) */
.ai-versions {
  border-top: 1px solid var(--border);
  padding: 8px 14px 10px;
  max-height: 150px;
  overflow-y: auto;
}

.ai-versions-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.ai-version-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 4px 8px;
  margin: 0 -8px;
  border-radius: 6px;
}

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

.ai-version-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
  color: var(--text);
  min-width: 0;
}

.ai-version-label > :last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-version-time {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.ai-version-rollback {
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--word-blue);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 5px;
  cursor: pointer;
}

.ai-version-rollback:hover {
  background: var(--active-bg);
}

.ai-version-rollback:disabled {
  color: var(--text-dim);
  cursor: default;
  background: none;
}

/* blank-document intent picker: a compact card row above the composer */
.ai-intent-bar {
  padding: 0 2px 10px;
}

.ai-intent-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 6px;
}

.ai-intent-cards {
  display: flex;
  gap: 8px;
}

.ai-intent-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-bg-page);
  text-align: start;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast);
}

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

.ai-intent-card.selected {
  border-color: var(--color-text-primary);
  box-shadow: inset 0 0 0 1px var(--color-text-primary);
}

.ai-intent-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}

.ai-intent-card-icon svg {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-intent-card-title {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-intent-card-check {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-text-primary);
  color: var(--color-bg-page);
}

.ai-intent-card-check svg {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* attachments (same contract as the docs panel): paperclip in the composer footer,
   chips above the textarea, read-only echo on the sent bubble */
.ai-attach-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.ai-attach-btn img {
  display: block;
  width: 100%;
  height: 100%;
}

.ai-attach-btn:hover {
  filter: brightness(0.7);
}

.ai-attachments {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
}

.ai-attachments > * {
  flex-shrink: 0;
}

.ai-attachment-thumb {
  position: relative;
}

.ai-attachment-thumb img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 12px;
}

.ai-attachment-thumb-remove {
  position: absolute;
  top: -8px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--text-primary);
  color: var(--surface);
  cursor: pointer;
}

.ai-attachment-thumb-remove:hover {
  background: var(--text-dim);
}

.ai-attachment-thumb-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--bg-content);
}

.ai-attachment-thumb .ai-attachment-thumb-pending img {
  width: 26px;
  height: 26px;
}

.ai-attachment-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 190px;
  height: 56px;
  padding: 0 14px 0 8px;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  background: var(--bg-content);
}

.ai-attachment-card-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface);
}

.ai-attachment-card-icon img {
  display: block;
  width: 26px;
  height: 26px;
}

.ai-attachment-card-meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ai-attachment-card-name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-attachment-card-size {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.ai-msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.ai-msg-attachments .ai-attachment-thumb img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
}

.ai-msg-attachments .ai-attachment-card {
  width: auto;
  max-width: 190px;
  height: 44px;
  background: var(--surface);
}

.ai-msg-attachments .ai-attachment-card-icon {
  width: 32px;
  height: 32px;
  background: var(--surface-subtle);
}

.ai-msg-attachments .ai-attachment-card-icon img {
  width: 22px;
  height: 22px;
}

.ai-attach-notice {
  margin-bottom: 7px;
  font-size: 11.5px;
  color: var(--hx-error);
}

.ai-panel-dragover {
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
}

/* 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: 0 6px 30px var(--hx-shadow-soft);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.ai-input-box textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  resize: none;
  border: none;
  background: none;
  border-radius: var(--radius-16) var(--radius-16) 0 0;
  padding: 12px 14px 4px;
  font-size: 14px;
  font-family: inherit;
  line-height: 24px;
  outline: none;
  color: var(--color-text-primary);
  min-height: 64px;
  max-height: 147px;
  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;
}

.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);
}

.ai-msg-undelivered {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--hx-error);
}

.ai-retry-btn {
  border: 1px solid var(--hx-error-border);
  border-radius: 4px;
  background: none;
  padding: 1px 8px;
  font-size: 12px;
  color: var(--hx-error);
  cursor: pointer;
}

.ai-retry-btn:hover {
  background: var(--hx-error-bg);
}

.app-main {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ---- main layout: AI dock (left) + editor ---- */

/* ---- transient AI-change highlight ---- */

.doc-editor .ai-changed {
  background: var(--hx-ai-changed);
  border-radius: 2px;
  transition: background 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- selection scope chip in the AI composer header ---- */

.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;
}

/* in-answer citation links: click selects and scrolls to the cited block */
.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;
}

/* queued-edit anchor highlight inside the document (decoration, never document data) */
.ai-queue-anchor {
  background: var(--hx-ai-anchor-bg);
  border-bottom: 2px dashed var(--hx-ai-anchor-line);
  cursor: pointer;
}

/* anchored ask popover (shared look with docs/slides, markdown tokens) */
.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(--hx-pop-shadow);
}

.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;
  gap: 8px;
}

.ai-ask-cancel,
.ai-ask-confirm {
  padding: 5px 12px;
  border-radius: var(--radius-6);
  font-size: 12px;
  cursor: pointer;
}

.ai-ask-cancel {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--color-text-secondary);
}

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

.ai-ask-cancel:disabled {
  opacity: 0.45;
  cursor: default;
}

.ai-ask-confirm {
  border: 1px solid transparent;
  background: var(--color-ai-action);
  color: var(--color-ai-action-text);
}

.ai-ask-confirm:hover:not(:disabled) {
  background: var(--color-ai-action-hover);
}

.ai-ask-confirm:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---- queue card above the composer ---- */

.ai-queue {
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-12);
  background: var(--color-bg-subtle);
  overflow: hidden;
}

.ai-queue-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.ai-queue-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.ai-queue-count {
  font-size: 11px;
  color: var(--text-dim);
}

.ai-queue-fold {
  margin-left: auto;
  display: inline-flex;
  padding: 2px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.ai-queue-fold.folded {
  transform: rotate(-90deg);
}

.ai-queue-hint {
  padding: 0 10px 6px;
  font-size: 11px;
  color: var(--text-dim);
}

.ai-queue-list {
  margin: 0;
  padding: 0 6px 4px;
  list-style: none;
  max-height: 168px;
  overflow-y: auto;
}

.ai-queue-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 6px;
  border-radius: var(--radius-6);
  font-size: 12px;
  color: var(--text);
  cursor: default;
}

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

.ai-queue-row.stale {
  opacity: 0.5;
  text-decoration: line-through;
}

.ai-queue-ord {
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  font-size: 11px;
  color: var(--color-text-tertiary);
}

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

.ai-queue-target {
  margin-right: 5px;
  color: var(--text-dim);
}

.ai-queue-target::after {
  content: ' ·';
}

.ai-queue-edit-input {
  flex: 1;
  min-width: 0;
  padding: 2px 6px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-6);
  background: var(--color-bg-page);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  outline: none;
}

.ai-queue-row-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
}

.ai-queue-row:hover .ai-queue-row-actions {
  opacity: 1;
}

.ai-queue-row-btn {
  display: inline-flex;
  padding: 2px;
  border: none;
  border-radius: var(--radius-6);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.ai-queue-row-btn:hover {
  background: var(--active-bg);
  color: var(--text);
}

.ai-queue-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 8px;
}

.ai-queue-confirm {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: var(--text-dim);
}

.ai-queue-discard {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-6);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 11.5px;
  cursor: pointer;
}

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

.ai-queue-send {
  margin-left: auto;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-6);
  background: var(--accent);
  color: var(--hx-on-accent);
  font-size: 11.5px;
  cursor: pointer;
}

.ai-queue-send:disabled,
.ai-queue-discard:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---- element breadcrumb ---- */

.crumbs {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 26px;
  padding: 2px 12px;
  border-bottom: 1px solid var(--border);
  font:
    12px/1.4 'SF Mono',
    Menlo,
    Consolas,
    monospace;
  color: var(--text-muted);
  overflow: hidden;
  white-space: nowrap;
}

.crumbs-empty {
  font-family: inherit;
}

.crumb-wrap {
  display: inline-flex;
  align-items: center;
}

.crumb-sep {
  margin: 0 3px;
  opacity: 0.6;
}

.crumb {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  padding: 1px 5px;
  border-radius: 4px;
  cursor: pointer;
}

.crumb:hover {
  background: var(--hover);
  color: var(--text);
}

.crumb.current {
  color: var(--accent);
  background: var(--accent-soft);
}

.crumb-state {
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 11px;
  background: var(--hover);
}

.crumb-state.dirty {
  color: var(--hx-error);
  background: var(--hx-error-bg);
}

.status-notice {
  color: var(--text);
}

/* ── questionnaire card (same as slides) ── */

/* AI survey card */
/* Clarify card docked in the composer slot */
.ai-clarify-card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-height: min(560px, 62vh);
  padding: 12px 16px;
  font-size: 16px;
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  animation: ai-clarify-rise 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header band bleeding to the card edges */
.ai-clarify-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -12px -16px 16px;
  padding: 12px 16px;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border-default);
  border-radius: 12px 12px 0 0;
}

.ai-clarify-head-label {
  flex: 1;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.35;
  word-break: break-word;
}

/* "N / M" progress + 22px pager arrows */
.ai-clarify-head-progress {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  min-width: 4em;
  text-align: center;
}

.ai-clarify-head-arrows {
  display: inline-flex;
  gap: 4px;
}

.ai-clarify-head-arrow {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--color-text-tertiary);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 150ms cubic-bezier(0.4, 0, 0.2, 1),
    color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-clarify-head-arrow:hover:not(:disabled) {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
}

.ai-clarify-head-arrow:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--hx-focus-ring-soft);
}

.ai-clarify-head-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* One question at a time; directional slide (240ms / cubic-bezier(.16,1,.3,1)) */
.ai-clarify-q {
  min-height: 140px;
  flex: 1 1 auto;
  overflow-y: auto;
  margin-bottom: 16px;
}

.ai-clarify-q.slide-next {
  animation: ai-clarify-slide-next 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-clarify-q.slide-prev {
  animation: ai-clarify-slide-prev 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-clarify-question-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 8px;
}

.ai-clarify-label {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.4;
}

.ai-clarify-multi-badge {
  flex-shrink: 0;
  margin-top: 2px;
  padding: 2px 7px;
  color: var(--color-text-secondary);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.ai-clarify-desc {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0 0 8px;
  line-height: 1.5;
}

/* Options: column of DS choice rows, never wrapping */
.ai-clarify-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.ai-clarify-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition:
    background 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-clarify-opt:hover {
  background: var(--color-bg-subtle);
}

.ai-clarify-opt:active {
  filter: brightness(0.96);
}

.ai-clarify-opt:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--hx-focus-ring-strong);
}

.ai-clarify-opt-label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-primary);
}

/* 16px radio/checkbox glyph; selection is neutral black */
.ai-clarify-opt-box {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-bg-page);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-clarify-opt.multi .ai-clarify-opt-box {
  border-radius: 4px;
}

.ai-clarify-opt:not(.multi) .ai-clarify-opt-box {
  display: none;
}

.ai-clarify-opt-arrow {
  margin-left: auto;
  align-self: center;
  color: var(--color-text-secondary);
  opacity: 0;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-clarify-opt:hover .ai-clarify-opt-arrow {
  opacity: 1;
}

.ai-clarify-opt-on {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-default);
}

.ai-clarify-opt-on .ai-clarify-opt-box {
  border-color: var(--color-btn-primary);
}

.ai-clarify-opt-on:not(.multi) .ai-clarify-opt-box {
  background: var(--color-btn-primary);
  box-shadow: inset 0 0 0 3px var(--color-bg-page);
}

.ai-clarify-opt-on.multi .ai-clarify-opt-box {
  background-color: var(--color-btn-primary);
  background-image: var(--hx-choice-check);
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Free-text answer input */
.ai-clarify-other {
  width: 100%;
  min-height: 38px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-clarify-other::placeholder {
  color: var(--color-text-tertiary);
}

.ai-clarify-other:focus {
  outline: none;
  border-color: var(--color-btn-primary);
  box-shadow: 0 0 0 3px var(--hx-focus-ring);
}

/* Footer actions */
.ai-clarify-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.ai-clarify-actions.multi {
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-top: 12px;
}

.ai-clarify-count {
  font-size: 14px;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.ai-clarify-actions-btns {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Explicit multi-select advance action: text avoids looking like an unlabeled pager. */
.ai-clarify-next {
  min-width: 82px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  font-family: inherit;
  background: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-clarify-next-arrow {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.ai-clarify-next:hover:not(:disabled) {
  opacity: 0.85;
}

.ai-clarify-next:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--hx-focus-ring-soft);
}

.ai-clarify-next:disabled {
  opacity: 0.38;
  cursor: default;
}

.ai-clarify-skip {
  height: 36px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-clarify-skip:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.ai-clarify-submit {
  height: 36px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-btn-primary-text);
  background: var(--color-btn-primary);
  border: 1px solid transparent;
  border-radius: 8px;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-clarify-submit:hover:not(:disabled) {
  filter: brightness(0.92);
}

.ai-clarify-submit:active:not(:disabled) {
  filter: brightness(0.88);
  transform: scale(0.98);
}

.ai-clarify-submit:disabled {
  opacity: 0.38;
  cursor: default;
}

.ai-clarify-skip:focus-visible,
.ai-clarify-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--hx-focus-ring);
}

.ai-clarify-answered {
  align-self: flex-end;
  margin: 8px 0 0 auto;
  max-width: 420px;
  padding: 12px 16px;
  background: var(--color-bg-subtle);
  border: none;
  border-radius: 12px;
}

.ai-clarify-answered-row {
  margin: 0 0 8px;
}

.ai-clarify-answered-row:last-child {
  margin-bottom: 0;
}

.ai-clarify-answered-q {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 2px;
}

.ai-clarify-answered-a {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Pending marker chip left in the stream while the card is docked */
.ai-clarify-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  font-size: 14px;
  color: var(--color-text-secondary);
  max-width: 100%;
}

.ai-clarify-chip-eyebrow {
  font-weight: 500;
  color: var(--color-text-primary);
}

.ai-clarify-chip-arrow {
  font-weight: 700;
  color: var(--color-text-secondary);
  animation: ai-clarify-chip-bounce 1.6s ease-in-out infinite;
}

@keyframes ai-clarify-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ai-clarify-slide-next {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ai-clarify-slide-prev {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ai-clarify-chip-bounce {
  0%,
  100% {
    transform: translateY(-1.5px);
  }
  50% {
    transform: translateY(1.5px);
  }
}

/* ---- brief card (plan_page) ---- */

.brief-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  background: var(--color-bg-page);
  font-size: 12.5px;
  max-height: 60vh;
  overflow: auto;
}

.brief-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--color-text-primary);
}

.brief-hint {
  color: var(--color-text-tertiary);
  font-size: 11.5px;
  font-weight: 400;
}

.brief-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.brief-field > label {
  color: var(--color-text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.brief-field textarea,
.brief-field input[type='text'],
.brief-field select {
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  font: inherit;
  resize: vertical;
}

.brief-field textarea:focus,
.brief-field input:focus,
.brief-field select:focus {
  outline: none;
  border-color: var(--color-border-strong);
  box-shadow: 0 0 0 3px var(--hx-focus-ring-soft);
}

.brief-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.brief-palette {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.brief-swatch {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-secondary);
  font-size: 11px;
}

.brief-swatch input[type='color'] {
  width: 26px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  background: transparent;
}

.brief-sections {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brief-section {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 6px;
  padding: 6px 8px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
}

.brief-section input,
.brief-section textarea {
  grid-column: 1;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  padding: 2px 0;
  resize: none;
}

.brief-section input {
  font-weight: 600;
}

.brief-section-remove {
  grid-column: 2;
  grid-row: 1;
  border: none;
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
}

.brief-section-remove:hover {
  color: var(--hx-error);
}

.brief-add {
  align-self: flex-start;
  border: 1px dashed var(--color-border-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  padding: 4px 10px;
  cursor: pointer;
}

.brief-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.brief-redo-input {
  flex: 1;
  min-width: 140px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  font: inherit;
}

.brief-btn {
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  padding: 6px 14px;
  cursor: pointer;
}

.brief-btn.primary {
  background: var(--color-btn-primary);
  border-color: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
  font-weight: 600;
}

.brief-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.ai-partial-card .ai-partial-title {
  font-weight: 600;
  color: var(--color-text-primary);
}

.ai-partial-card .ai-partial-body {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.brief-receipt {
  margin: 6px 0 0 4px;
  padding: 8px 10px;
  border-left: 2px solid var(--color-border-strong);
  color: var(--color-text-secondary);
  font-size: 12px;
}

.brief-receipt b {
  color: var(--color-text-primary);
}

/* ---- design canvas: floating toolbar + style panel over the preview ---- */

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

.preview-stage {
  direction: ltr;
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-2, var(--surface));
}

.preview-stage .preview-host {
  flex: 1;
  min-height: 0;
}

/* device preview: fixed-width page centred on a neutral stage */
.preview-stage[data-device='tablet'] .preview-host,
.preview-stage[data-device='mobile'] .preview-host {
  flex: none;
  height: 100%;
  margin: 0 auto;
  box-shadow: var(--shadow-menu);
}

.preview-stage[data-device='tablet'] .preview-host {
  width: 768px;
}

.preview-stage[data-device='mobile'] .preview-host {
  width: 390px;
}

.hx-float {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-menu);
  user-select: none;
}

.hx-float-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--text-primary);
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
}

.hx-float-btn.text {
  padding: 0 8px;
}

.hx-float-btn:hover {
  background: var(--hover);
}

.hx-float-btn.on {
  background: var(--active-bg);
}

.hx-float-btn.danger:hover {
  color: var(--hx-error);
}

.hx-float-btn.ask {
  color: var(--color-ai-action);
  font-weight: 500;
}

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

.hx-float-size {
  min-width: 22px;
  text-align: center;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.hx-float-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
}

.hx-float-pop-host {
  position: relative;
  display: inline-flex;
}

.hx-color-pop {
  position: fixed;
  z-index: 40;
}

.hx-color-pop .gcp-palette {
  border-radius: 0 0 8px 8px;
}

.hx-color-pop .gcp-palette:first-child {
  border-radius: 8px;
}

.hx-color-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 6px 0;
  border: 1px solid var(--border-strong);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: var(--surface);
}

.hx-color-tabs button {
  flex: 1;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.hx-color-tabs button:hover {
  background: var(--hover);
}

.hx-color-tabs button.on {
  background: var(--active-bg);
  color: var(--text);
}

.hx-color-tabs + .gcp-palette {
  border-top: none;
}

.hx-color-field {
  display: flex;
  align-items: center;
  width: 100%;
  height: 28px;
  box-sizing: border-box;
  padding: 0 5px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
}

.hx-color-field:hover {
  background: var(--hover);
}

.hx-color-swatch {
  flex: 1;
  height: 16px;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
}

.hx-color-swatch.none {
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    var(--hx-error) calc(50% - 1px),
    var(--hx-error) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

.hx-panel {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  width: 250px;
  max-height: calc(100% - 20px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-menu);
  overflow: auto;
  font-size: 12px;
}

.hx-panel-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hx-panel-tag {
  flex: 1;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text-dim);
}

.hx-panel-action {
  align-self: flex-start;
  margin-top: 2px;
}

.hx-panel-revert,
.hx-panel-action {
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: none;
  color: var(--text-primary);
  font-size: 11.5px;
  padding: 2px 8px;
  cursor: pointer;
}

.hx-panel-close {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.hx-panel-close:hover,
.hx-panel-revert:hover,
.hx-panel-action:hover {
  background: var(--hover);
}

.hx-panel-section {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.hx-panel-row {
  display: flex;
  gap: 8px;
}

.hx-panel-row label {
  flex: 1;
  min-width: 0;
}

.hx-panel-lock {
  align-self: flex-end;
  flex: 0 0 auto;
  height: 28px;
  width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
}

.hx-panel-lock.on {
  color: var(--accent);
  border-color: var(--accent);
}

.hx-panel label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--text-dim);
}

.hx-panel input[type='number'],
.hx-panel input[type='text'],
.hx-panel select,
.hx-panel textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 5px 7px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  background: var(--surface);
}

.hx-panel textarea {
  resize: vertical;
}

.device-dd.gs-dd {
  min-width: 84px;
}

.device-dd .gs-dd-btn {
  height: 22px;
  padding: 0 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* ── canvas modes (Comment / Edit / Present) in the QAT row ─────────────── */
/* ── Present: chrome-free preview, only the QAT row stays ── */
.app.present .ribbon-body,
.app.present .ribbon-collapse-btn,
.app.present .crumbs,
.app.present .status-bar,
.app.present .ai-dock {
  display: none;
}
/* Fullscreen: the whole screen is the page; only the exit button floats */
.app.present-full .ribbon {
  display: none;
}
.present-exit {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 7;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  box-shadow: var(--shadow-menu);
  cursor: pointer;
}

/* ── the present-only view ─────────────────────────────────────────────── */
.present-view,
.present-view .preview-host {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

/* ── ribbon button menus (Theme directions, Present): anchored + fixed like the
   link popover, because the ribbon body clips overflow ─────────────────── */
.rb-menu-wrap {
  display: flex;
  anchor-name: --rb-menu-anchor;
  anchor-scope: --rb-menu-anchor;
}
.rb-menu,
.table-picker {
  position: fixed;
  position-anchor: --rb-menu-anchor;
  top: calc(anchor(bottom) + 4px);
  left: anchor(left);
  position-try-fallbacks: flip-inline;
  position-visibility: anchors-visible;
  z-index: 62;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-menu);
}
.rb-menu {
  min-width: 140px;
  padding: 4px;
}

/* Insert: split button (main action + narrow caret), one pill on hover like the docs / slides ribbons */
.rb-split .rb-split-main {
  border-radius: 3px 0 0 3px;
}
.rb-split .rb-split-caret {
  min-width: 16px;
  width: 16px;
  height: 30px;
  padding: 0;
  border-radius: 0 3px 3px 0;
  color: var(--text-dim);
}
.rb-split:hover > .rb-btn:not(:disabled) {
  background: var(--hover);
}
.rb-split > .rb-btn:hover:not(:disabled),
.rb-split > .rb-split-caret.active {
  background: var(--active-bg);
}

/* Insert: table size picker (hover grid) */
.table-picker {
  padding: 8px;
}
.table-picker-title {
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  white-space: nowrap;
}
.table-picker-grid {
  display: grid;
  grid-template-columns: repeat(10, 18px);
  gap: 3px;
}
.table-cell {
  width: 18px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  background: var(--surface);
  cursor: pointer;
}
.table-cell.hot {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.rb-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.rb-menu button:hover {
  background: var(--hover);
}
.rb-url-form {
  display: flex;
  gap: 6px;
  min-width: 320px;
  padding: 8px;
}
.rb-url-form input {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.rb-menu .rb-url-submit {
  width: auto;
  flex: 0 0 auto;
  padding: 0 12px;
  background: var(--accent);
  color: var(--hx-on-accent);
}
.rb-menu .rb-url-submit:disabled {
  opacity: 0.5;
  cursor: default;
}
.rb-menu button svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

/* Brief card: style-direction tiles. Inner colors/fonts come from the proposed document style (inline, per tile); only the frame is chrome. */
.brief-directions {
  display: flex;
  gap: 8px;
}

.brief-tile {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: 2px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-bg-page);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: border-color 0.12s;
}

.brief-tile:hover {
  border-color: var(--color-border-strong);
}

.brief-tile[aria-pressed='true'] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--hx-focus-ring-soft);
}

.brief-tile-page {
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 92px;
  padding: 10px;
}

.brief-tile-heading {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brief-tile-body {
  font-size: 9.5px;
  line-height: 1.3;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brief-tile-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
  margin-top: auto;
}

.brief-tile-cta {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 55%;
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brief-tile-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px 6px;
}

.brief-tile-card i {
  display: block;
  height: 3px;
  border-radius: 2px;
}

.brief-tile-card i:first-child {
  width: 60%;
}

.brief-tile-name {
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brief-row-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.brief-row-3 input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* HTML collaboration status bar */
.html-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;
}

.html-collab-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.html-collab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted);
}

.html-collab-status--connected .html-collab-dot {
  background: var(--color-semantic-success);
}

.html-collab-status--connecting .html-collab-dot,
.html-collab-status--reconnecting .html-collab-dot {
  background: var(--color-semantic-warning);
}

.html-collab-version {
  font-size: 11px;
  color: var(--color-text-secondary);
}

.html-collab-avatars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.html-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;
}