/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Composer "+" menu (add file / skills) and attached-skill chips. Chrome tokens
* only; each app imports this next to its other @lycero/ui sheets. */
.ai-plus {
display: inline-flex;
flex-shrink: 0;
}
.ai-plus-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 1px solid transparent;
border-radius: var(--radius-30);
background: none;
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
}
.ai-plus-btn:hover,
.ai-plus-btn.open {
background: var(--hover);
color: var(--text);
}
.ai-plus-btn.has-skills {
color: var(--accent);
}
.ai-plus-btn:focus-visible {
outline: none;
border-color: var(--accent);
}
.ai-plus-pop {
position: fixed;
z-index: 80;
display: flex;
flex-direction: column;
width: 280px;
max-height: min(420px, 70vh);
padding: 4px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-8);
box-shadow: var(--shadow-menu);
font-size: 12px;
}
.ai-plus-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 7px 8px;
border: none;
border-radius: var(--radius-6);
background: none;
color: var(--text);
font-family: inherit;
font-size: 13px;
text-align: left;
cursor: pointer;
}
.ai-plus-item:hover {
background: var(--hover);
}
.ai-plus-item-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-plus-chevron {
color: var(--text-secondary);
}
.ai-plus-sep {
height: 1px;
margin: 4px 6px;
background: var(--border-subtle);
}
.ai-plus-search-row {
display: flex;
align-items: center;
gap: 4px;
padding: 2px;
}
.ai-plus-back {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 28px;
flex-shrink: 0;
border: none;
border-radius: var(--radius-6);
background: none;
color: var(--text-secondary);
cursor: pointer;
}
.ai-plus-back:hover {
background: var(--hover);
color: var(--text);
}
.ai-plus-search {
flex: 1;
min-width: 0;
height: 28px;
padding: 0 8px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-6);
background: var(--surface);
color: var(--text);
font-family: inherit;
font-size: 12px;
}
.ai-plus-search:focus {
outline: none;
border-color: var(--accent);
}
.ai-plus-list {
flex: 1;
min-height: 0;
margin-top: 4px;
overflow-y: auto;
}
.ai-plus-empty {
padding: 12px 8px;
color: var(--text-secondary);
text-align: center;
}
.ai-plus-skill {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 6px 8px;
border: none;
border-radius: var(--radius-6);
background: none;
color: var(--text);
font-family: inherit;
text-align: left;
cursor: pointer;
}
.ai-plus-skill:hover {
background: var(--hover);
}
.ai-plus-skill.on {
background: var(--accent-soft);
}
.ai-plus-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
flex-shrink: 0;
border-radius: 50%;
background: var(--hover);
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
}
.ai-plus-skill-text {
display: flex;
flex: 1;
min-width: 0;
flex-direction: column;
gap: 1px;
}
.ai-plus-skill-name-row {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.ai-plus-skill-name {
font-size: 13px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-plus-cloud-badge {
flex-shrink: 0;
padding: 1px 5px;
border-radius: 4px;
background: var(--accent-soft);
color: var(--accent);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.03em;
line-height: 1.3;
}
.ai-plus-skill.disabled {
opacity: 0.55;
cursor: not-allowed;
}
.ai-plus-skill-desc {
color: var(--text-secondary);
font-size: 11px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-plus-check {
flex-shrink: 0;
color: var(--accent);
}
.ai-plus-manage {
flex-shrink: 0;
margin-top: 4px;
border-top: 1px solid var(--border-subtle);
border-radius: 0 0 var(--radius-6) var(--radius-6);
color: var(--text-secondary);
}
.ai-skill-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px 8px 0;
}
.ai-skill-chips-sent {
padding: 0 0 6px;
}
.ai-skill-chip {
display: inline-flex;
align-items: center;
gap: 5px;
height: 24px;
max-width: 220px;
padding: 0 6px 0 8px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-30);
background: var(--accent-soft);
color: var(--text);
font-size: 12px;
}
.ai-skill-chip-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-skill-chip-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
border: none;
border-radius: 50%;
background: none;
color: var(--text-secondary);
cursor: pointer;
}
.ai-skill-chip-remove:hover {
background: var(--hover);
color: var(--text);
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* 5-Hour Quota circular ring button & popover in the chat composer footer (Astryx Craft) */
.ai-quota-widget {
position: relative;
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.ai-quota-ring-btn {
display: inline-flex;
align-items: center;
gap: 5px;
height: 24px;
padding: 0 7px 0 5px;
border-radius: 999px;
border: 1px solid var(--border, rgba(28, 27, 24, 0.14));
background: var(--bg-subtle, rgba(28, 27, 24, 0.04));
color: var(--text-secondary, #5c5952);
font-family: inherit;
font-size: 11px;
font-weight: 500;
line-height: 1;
font-variant-numeric: tabular-nums;
cursor: pointer;
user-select: none;
white-space: nowrap;
transition:
background-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
border-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
color 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-quota-ring-btn:hover,
.ai-quota-ring-btn.open {
background: var(--accent-soft, rgba(139, 58, 26, 0.08));
border-color: var(--accent-border, rgba(139, 58, 26, 0.28));
color: var(--text-primary, #1c1b18);
}
.ai-quota-ring-svg {
flex-shrink: 0;
display: block;
}
.ai-quota-ring-track {
stroke: var(--border, rgba(139, 58, 26, 0.2));
}
[data-theme='dark'] .ai-quota-ring-track {
stroke: rgba(245, 244, 239, 0.18);
}
.ai-quota-ring-fill {
transition: stroke-dashoffset 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-quota-ring-fill.tone-ok {
stroke: var(--accent, #8b3a1a);
}
[data-theme='dark'] .ai-quota-ring-fill.tone-ok {
stroke: #d97757;
}
.ai-quota-ring-fill.tone-warn {
stroke: var(--warning, #b45309);
}
[data-theme='dark'] .ai-quota-ring-fill.tone-warn {
stroke: #f59e0b;
}
.ai-quota-ring-fill.tone-danger {
stroke: var(--danger, #b91c1c);
}
[data-theme='dark'] .ai-quota-ring-fill.tone-danger {
stroke: #ef4444;
}
.ai-quota-ring-text {
letter-spacing: -0.01em;
}
/* Popover displaying 5-Hour, Weekly & Monthly quota metrics */
.ai-quota-popover {
position: fixed;
z-index: 9999;
width: 284px;
padding: 12px;
border-radius: 10px;
border: 1px solid var(--border, #ddd9ce);
background: var(--surface, #f9f8f3);
color: var(--text-primary, #1c1b18);
box-shadow: var(--shadow-md, 0 8px 24px rgba(28, 27, 24, 0.14));
display: flex;
flex-direction: column;
gap: 10px;
animation: ai-quota-pop-in 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme='dark'] .ai-quota-popover {
background: #262624;
border-color: #3d3c38;
color: #f5f4ef;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
@keyframes ai-quota-pop-in {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ai-quota-pop-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border, rgba(28, 27, 24, 0.1));
}
[data-theme='dark'] .ai-quota-pop-head {
border-bottom-color: rgba(245, 244, 239, 0.1);
}
.ai-quota-pop-title-group {
display: flex;
align-items: center;
gap: 6px;
}
.ai-quota-pop-title {
font-size: 12px;
font-weight: 600;
color: var(--text-primary, #1c1b18);
}
[data-theme='dark'] .ai-quota-pop-title {
color: #f5f4ef;
}
.ai-quota-tier-badge {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.04em;
padding: 2px 5px;
border-radius: 4px;
background: var(--accent-soft, rgba(139, 58, 26, 0.1));
color: var(--accent, #8b3a1a);
}
[data-theme='dark'] .ai-quota-tier-badge {
background: rgba(217, 119, 87, 0.16);
color: #d97757;
}
.ai-quota-sync-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 7px;
border-radius: 5px;
border: 1px solid var(--border, rgba(28, 27, 24, 0.14));
background: transparent;
color: var(--text-secondary, #5c5952);
font-family: inherit;
font-size: 11px;
cursor: pointer;
transition: background-color 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-quota-sync-btn:hover:not(:disabled) {
background: var(--accent-soft, rgba(139, 58, 26, 0.08));
color: var(--text-primary, #1c1b18);
}
[data-theme='dark'] .ai-quota-sync-btn {
border-color: rgba(245, 244, 239, 0.16);
color: #b8b5ad;
}
[data-theme='dark'] .ai-quota-sync-btn:hover:not(:disabled) {
background: rgba(217, 119, 87, 0.14);
color: #f5f4ef;
}
.ai-quota-spin {
animation: ai-quota-rotate 0.8s linear infinite;
}
@keyframes ai-quota-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.ai-quota-pop-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.ai-quota-pop-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.ai-quota-pop-item.featured {
padding: 7px 8px;
border-radius: 7px;
background: var(--accent-soft, rgba(139, 58, 26, 0.06));
border: 1px solid var(--accent-border, rgba(139, 58, 26, 0.16));
}
[data-theme='dark'] .ai-quota-pop-item.featured {
background: rgba(217, 119, 87, 0.1);
border-color: rgba(217, 119, 87, 0.24);
}
.ai-quota-pop-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 11.5px;
}
.ai-quota-pop-label {
font-weight: 600;
color: var(--text-primary, #1c1b18);
}
[data-theme='dark'] .ai-quota-pop-label {
color: #f5f4ef;
}
.ai-quota-pop-pct {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.ai-quota-pop-pct.tone-ok {
color: var(--accent, #8b3a1a);
}
[data-theme='dark'] .ai-quota-pop-pct.tone-ok {
color: #d97757;
}
.ai-quota-pop-pct.tone-warn {
color: var(--warning, #b45309);
}
[data-theme='dark'] .ai-quota-pop-pct.tone-warn {
color: #f59e0b;
}
.ai-quota-pop-pct.tone-danger {
color: var(--danger, #b91c1c);
}
[data-theme='dark'] .ai-quota-pop-pct.tone-danger {
color: #ef4444;
}
.ai-quota-bar-track {
width: 100%;
height: 5px;
border-radius: 999px;
background: var(--border, rgba(28, 27, 24, 0.12));
overflow: hidden;
}
[data-theme='dark'] .ai-quota-bar-track {
background: rgba(245, 244, 239, 0.14);
}
.ai-quota-bar-fill {
height: 100%;
border-radius: 999px;
transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-quota-bar-fill.tone-ok {
background: var(--accent, #8b3a1a);
}
[data-theme='dark'] .ai-quota-bar-fill.tone-ok {
background: #d97757;
}
.ai-quota-bar-fill.tone-warn {
background: var(--warning, #b45309);
}
[data-theme='dark'] .ai-quota-bar-fill.tone-warn {
background: #f59e0b;
}
.ai-quota-bar-fill.tone-danger {
background: var(--danger, #b91c1c);
}
[data-theme='dark'] .ai-quota-bar-fill.tone-danger {
background: #ef4444;
}
.ai-quota-pop-sub {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
font-size: 10.5px;
color: var(--text-secondary, #5c5952);
font-variant-numeric: tabular-nums;
}
[data-theme='dark'] .ai-quota-pop-sub {
color: #b8b5ad;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-ring-track {
stroke: rgba(245, 244, 239, 0.18);
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-ring-fill.tone-ok {
stroke: #d97757;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-ring-fill.tone-warn {
stroke: #f59e0b;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-ring-fill.tone-danger {
stroke: #ef4444;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-popover {
background: #262624;
border-color: #3d3c38;
color: #f5f4ef;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-head {
border-bottom-color: rgba(245, 244, 239, 0.1);
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-title,
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-label {
color: #f5f4ef;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-tier-badge {
background: rgba(217, 119, 87, 0.16);
color: #d97757;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-sync-btn {
border-color: rgba(245, 244, 239, 0.16);
color: #b8b5ad;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-sync-btn:hover:not(:disabled) {
background: rgba(217, 119, 87, 0.14);
color: #f5f4ef;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-item.featured {
background: rgba(217, 119, 87, 0.1);
border-color: rgba(217, 119, 87, 0.24);
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-pct.tone-ok {
color: #d97757;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-pct.tone-warn {
color: #f59e0b;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-pct.tone-danger {
color: #ef4444;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-bar-track {
background: rgba(245, 244, 239, 0.14);
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-bar-fill.tone-ok {
background: #d97757;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-bar-fill.tone-warn {
background: #f59e0b;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-bar-fill.tone-danger {
background: #ef4444;
}
:root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-sub {
color: #b8b5ad;
}
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Lycero Mate — ThinkingBlock (reasoning accordion).
* Auto-expands while reasoning streams, collapses when finished.
* Uses design tokens from packages/ui/src/tokens.css.
* Animations 200ms ease-out (anti-slop: no bounce, no elastic). */
.lycero-thinking-block {
margin: 8px 0 10px 0;
border-radius: var(--radius-8, 8px);
border: 1px solid var(--color-border-subtle, #DDD9CE);
background-color: var(--color-bg-secondary, #F9F8F3);
overflow: hidden;
font-size: 12px;
transition:
border-color var(--transition-medium),
background-color var(--transition-medium);
}
.lycero-thinking-block.expanded {
border-color: var(--accent, #8B3A1A);
}
.lycero-thinking-block.collapsed {
/* gentle hover hint */
}
.lycero-thinking-block.collapsed:hover {
border-color: var(--border-hover, #BDB7A7);
}
.lycero-thinking-block.lycero-thinking-active {
/* animated gradient stripe when reasoning */
background-image: linear-gradient(
90deg,
var(--color-bg-secondary, #F9F8F3) 0%,
var(--bg-hover-accent, #F5EBE7) 50%,
var(--color-bg-secondary, #F9F8F3) 100%
);
background-size: 200% 100%;
animation: lycero-thinking-shimmer 2s linear infinite;
}
@keyframes lycero-thinking-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Dark mode: subtle terracotta-tinted shimmer */
@media (prefers-color-scheme: dark) {
.lycero-thinking-block.lycero-thinking-active {
background-image: linear-gradient(
90deg,
var(--surface, #2E2D2A) 0%,
var(--bg-hover-accent, #3D2A24) 50%,
var(--surface, #2E2D2A) 100%
);
}
}
.lycero-thinking-header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 12px;
background: none;
border: none;
cursor: pointer;
color: var(--text-secondary, #56544D);
user-select: none;
text-align: left;
font-family: inherit;
/* gentle hover */
}
.lycero-thinking-header:hover {
background-color: var(--bg-hover-subtle, #F1EEE5);
}
.lycero-thinking-header-left {
display: flex;
align-items: center;
gap: 8px;
}
.lycero-thinking-pulse {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--accent, #8B3A1A);
display: inline-block;
position: relative;
opacity: 0.9;
}
.lycero-thinking-pulse::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
border: 2px solid var(--accent, #8B3A1A);
opacity: 0.5;
animation: lycero-thinking-pulse 1.2s ease-out infinite;
}
@keyframes lycero-thinking-pulse {
0% { transform: scale(0.85); opacity: 0.7; }
100% { transform: scale(1.6); opacity: 0; }
}
.lycero-thinking-title {
font-weight: 600;
color: var(--text-primary, #1C1B18);
font-size: 12.5px;
letter-spacing: 0;
}
.lycero-thinking-meta {
font-size: 11px;
color: var(--text-muted, #6B6860);
}
.lycero-thinking-header-right {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--text-muted, #6B6860);
}
.lycero-thinking-caret {
transition: transform var(--transition-medium);
}
.lycero-thinking-caret.open {
transform: rotate(180deg);
}
.lycero-thinking-content {
padding: 8px 12px 10px 12px;
border-top: 1px solid var(--color-border-subtle, #DDD9CE);
max-height: 260px;
overflow-y: auto;
color: var(--text-secondary, #56544D);
line-height: 1.55;
white-space: pre-wrap;
word-break: break-word;
font-family: var(--gs-font-mono, 'Be Vietnam Pro', 'Segoe UI', 'Cascadia Mono', Consolas, sans-serif);
font-size: 11.5px;
background-color: var(--color-bg-subtle, #F4F2EB);
}
.lycero-thinking-cursor {
display: inline-block;
width: 6px;
height: 13px;
margin-left: 3px;
background-color: var(--accent, #8B3A1A);
vertical-align: middle;
animation: lycero-thinking-blink 1s steps(2) infinite;
}
@keyframes lycero-thinking-blink {
50% { opacity: 0; }
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Lycero Mate — Floating Bubble Toolbar.
* Positioned absolutely inside the host's overlay portal. Sits above the
* user's text selection; flips below the selection when the top edge is
* clipped by the viewport. Animations 200ms ease-out (anti-slop). */
.lycero-mate-bubble {
position: fixed;
z-index: 9999;
display: inline-flex;
align-items: center;
gap: 2px;
padding: 4px;
background-color: var(--bg-elevated, #FFFFFF);
border: 1px solid var(--border, #DDD9CE);
border-radius: 10px;
box-shadow: 0 6px 20px -4px rgba(28, 27, 24, 0.12),
0 2px 6px -2px rgba(28, 27, 24, 0.08);
font-size: 12px;
font-weight: 500;
color: var(--text-primary, #1C1B18);
transform: translateY(-100%);
/* Native-render right-to-left scripts (Arabic / Hebrew) inside the bubble */
direction: inherit;
user-select: none;
/* Prevent selection clearing when clicking buttons */
-webkit-user-select: none;
pointer-events: auto;
animation: lycero-mate-bubble-in 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lycero-mate-bubble.lycero-mate-bubble-below {
transform: translateY(0);
}
.lycero-mate-bubble-btn {
appearance: none;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
padding: 5px 10px;
font-family: inherit;
font-size: 12px;
font-weight: 500;
color: var(--text-primary, #1C1B18);
cursor: pointer;
transition:
background-color var(--transition-fast, 150ms ease-out),
border-color var(--transition-fast, 150ms ease-out),
color var(--transition-fast, 150ms ease-out);
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.lycero-mate-bubble-btn:hover {
background-color: var(--bg-hover-subtle, #F1EEE5);
border-color: var(--border-hover, #BDB7A7);
}
.lycero-mate-bubble-btn:active {
background-color: var(--bg-hover-strong, #E8E3D6);
}
.lycero-mate-bubble-btn:focus-visible {
outline: 2px solid var(--accent, #8B3A1A);
outline-offset: 1px;
}
.lycero-mate-bubble-btn-cta {
color: var(--accent, #8B3A1A);
font-weight: 600;
}
.lycero-mate-bubble-btn-cta:hover {
background-color: var(--bg-hover-accent, #F5EBE7);
color: var(--accent-dark, #5F2812);
}
.lycero-mate-bubble-divider {
width: 1px;
height: 18px;
background-color: var(--border, #DDD9CE);
margin: 0 2px;
}
@keyframes lycero-mate-bubble-in {
0% {
opacity: 0;
transform: translateY(-100%) translateY(4px);
}
100% {
opacity: 1;
transform: translateY(-100%) translateY(0);
}
}
.lycero-mate-bubble.lycero-mate-bubble-below {
animation-name: lycero-mate-bubble-in-below;
}
@keyframes lycero-mate-bubble-in-below {
0% {
opacity: 0;
transform: translateY(-4px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
.lycero-mate-bubble {
background-color: var(--bg-elevated, #2E2D2A);
border-color: var(--border, #3D3B36);
box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.4),
0 2px 6px -2px rgba(0, 0, 0, 0.25);
}
.lycero-mate-bubble-btn:hover {
background-color: var(--bg-hover-subtle, #353431);
border-color: var(--border-hover, #4D4A42);
}
.lycero-mate-bubble-btn:active {
background-color: var(--bg-hover-strong, #3F3D38);
}
.lycero-mate-bubble-divider {
background-color: var(--border, #3D3B36);
}
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries. All rights reserved.
*
* Astryx Dynamic Capabilities Panel Styles
*/
.lycero-cap-panel {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
background-color: var(--surface);
color: var(--text-primary);
font-family: var(--gs-font-sans);
border-radius: var(--radius-8);
border: 1px solid var(--border);
box-sizing: border-box;
}
.lycero-cap-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.lycero-cap-title-wrap {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1;
}
.lycero-cap-title {
font-size: 13.5px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lycero-cap-active-badge {
font-size: 11px;
font-weight: 500;
padding: 2px 8px;
border-radius: var(--radius-30);
background-color: var(--bg-hover-accent, #F5EBE7);
color: var(--color-ai-action, #8B3A1A);
border: 1px solid var(--border-subtle);
flex-shrink: 0;
}
.lycero-cap-refresh-btn {
display: inline-flex;
align-items: center;
gap: 5px;
background-color: var(--surface-subtle);
border: 1px solid var(--border);
border-radius: var(--radius-6);
padding: 4px 10px;
font-size: 11.5px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
flex-shrink: 0;
transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.lycero-cap-refresh-btn:hover:not(:disabled) {
background-color: var(--hover);
color: var(--text-primary);
border-color: var(--border-strong);
}
.lycero-cap-refresh-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.lycero-cap-spin {
animation: lycero-spin 1s linear infinite;
}
@keyframes lycero-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.lycero-cap-offline-banner {
display: flex;
align-items: flex-start;
gap: 10px;
background-color: var(--danger-bg, #FAEEE8);
border: 1px solid var(--danger-border, #E8C7BD);
border-radius: var(--radius-6);
padding: 10px 14px;
font-size: 13px;
color: var(--danger, #B43A28);
line-height: 1.45;
}
.lycero-cap-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.lycero-cap-card {
background-color: var(--surface-subtle);
border: 1px solid var(--border);
border-radius: var(--radius-8);
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color var(--transition-fast);
}
.lycero-cap-card.active {
border-color: var(--color-border-brand, #8B3A1A);
background-color: var(--surface);
}
.lycero-cap-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.lycero-cap-card-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.lycero-cap-card-name-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.lycero-cap-card-name {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
.lycero-cap-category-tag {
font-size: 10px;
padding: 1px 6px;
border-radius: var(--radius-4, 4px);
background-color: var(--hover);
color: var(--text-muted);
}
.lycero-cap-card-desc {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.4;
margin: 0;
}
/* Astryx Toggle Switch */
.lycero-cap-toggle-label {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
}
.lycero-cap-toggle-input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.lycero-cap-toggle-track {
width: 38px;
height: 22px;
background-color: var(--border-strong);
border-radius: var(--radius-30);
transition: background-color var(--transition-fast);
position: relative;
}
.lycero-cap-toggle-input:checked + .lycero-cap-toggle-track {
background-color: var(--color-ai-action, #8B3A1A);
}
.lycero-cap-toggle-thumb {
width: 18px;
height: 18px;
background-color: #ffffff;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
transition: transform var(--transition-fast);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.lycero-cap-toggle-input:checked + .lycero-cap-toggle-track .lycero-cap-toggle-thumb {
transform: translateX(16px);
}
/* Dynamic Configuration Form */
.lycero-cap-config-form {
margin-top: 6px;
padding-top: 10px;
border-top: 1px dashed var(--border);
display: flex;
flex-direction: column;
gap: 12px;
}
.lycero-cap-config-title {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.lycero-cap-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.lycero-cap-field-label-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
color: var(--text-primary);
}
.lycero-cap-field-desc {
font-size: 11px;
color: var(--text-muted);
}
.lycero-cap-select {
padding: 6px 10px;
font-size: 13px;
border: 1px solid var(--border);
border-radius: var(--radius-6);
background-color: var(--surface);
color: var(--text-primary);
outline: none;
font-family: inherit;
transition: border-color var(--transition-fast);
}
.lycero-cap-select:focus {
border-color: var(--color-border-brand, #8B3A1A);
}
.lycero-cap-slider-wrap {
display: flex;
align-items: center;
gap: 12px;
}
.lycero-cap-slider {
flex: 1;
accent-color: var(--color-ai-action, #8B3A1A);
cursor: pointer;
}
.lycero-cap-slider-val {
font-size: 12px;
font-weight: 600;
color: var(--color-ai-action, #8B3A1A);
min-width: 24px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.lycero-cap-checkbox-row {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 13px;
color: var(--text-primary);
}
.lycero-cap-checkbox {
accent-color: var(--color-ai-action, #8B3A1A);
width: 16px;
height: 16px;
cursor: pointer;
}
.lycero-cap-empty {
text-align: center;
padding: 24px 16px;
color: var(--text-muted);
font-size: 13px;
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Lycero Office design tokens — single source of truth for UI chrome colors.
* Theme switching: light defaults in :root, [data-theme='dark'] overrides,
* prefers-color-scheme fallback for system mode (no data-theme attribute).
* Per-app accents (--accent / --accent-dark / --accent-soft) live in each
* app's styles.css. Document content colors (paper, cells, exports, chart
* palettes) never live here and never reference these tokens.
*
* Astryx palette (DESIGN.md §2):
* Day — Matte Warm Ivory & Terracotta: #F4F2EB bg, #F9F8F3 paper,
* #1C1B18 ink, #DDD9CE border,
* #8B3A1A terracotta accent.
* Night — Claude-Warm Charcoal & Radiant Terracotta:
* #262624 bg (not #000), #2E2D2A paper,
* #F5F4EF ink, #403E3A border,
* #D97757 terracotta accent.
* Anti-slop: tints are warm (no cold blue/gray), and the brand terracotta is
* the only saturated hue in the chrome. */
:root {
--ui-scale: 1;
--docs-revision-bar: #c00000;
/* ── Day chrome (Warm Ivory) ─────────────────────────────────────────── */
--surface: #F9F8F3; /* paper — soft, gentle, anti-glare */
--surface-subtle: #F4F2EB; /* canvas background, behind paper */
--chrome-bg: #F4F2EB;
--canvas: #E8E4DA;
--border: #DDD9CE; /* hairline — thin, warm */
--border-subtle: #E5E1D6;
--border-strong: #C9C4B6;
--border-hover: #BDB7A7;
/* Warm-ink text scale. Each step is a tint darker / lighter than the
* previous, never pure black or pure white. */
--text: #1C1B18;
--text-primary: #1C1B18;
--text-secondary: #56544D;
--text-tertiary: #7A776C;
--text-muted: #6B6860;
--text-dim: #8E8B7E;
/* Hover/pressed/active — warm gray tints, never cool blue */
--hover: #EFECE3;
--pressed: #E8E4D9;
--active-bg: #E0DBCD;
--bg-hover: #EFECE3;
--bg-hover-subtle: #F1EEE5;
--bg-hover-strong: #E8E4D9;
--bg-hover-accent: #F5EBE7;
--bg-content: #FBFAF6;
--icon-muted: #A39E92;
/* Semantic states — terracotta-tinted, not blue/red */
--danger: #B43A28;
--danger-bg: #FAEEE8;
--danger-border: #E8C7BD;
--success: #4D6B3D;
--success-bg: #EEF3E4;
--success-border: #C9D7B7;
--search-hit-bg: #F5E6C8;
--search-hit-active-bg: #D97757;
--search-hit-active-ink: #FBFAF6;
/* Shadows — soft, warm, never harsh black */
--color-bg-overlay: rgb(28 27 24 / 45%);
--shadow-modal-strong: 0 20px 25px rgb(60 50 35 / 12%);
--shadow-btn-hover: 0 2px 8px rgb(60 50 35 / 12%);
--shadow-menu: 0 8px 24px rgb(60 50 35 / 14%);
/* ── AI panel & shared chrome aliases ────────────────────────────────── */
/* Typography: Be Vietnam Pro is the system font (DESIGN.md §3). Falls back
* to native UI sans (system fonts guarantee zero CLS). */
--gs-font-sans:
'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif;
--gs-font-mono:
'Be Vietnam Pro', 'Segoe UI', 'Cascadia Mono', 'JetBrains Mono', Consolas,
sans-serif;
--color-btn-primary: #1C1B18;
--color-btn-primary-hover: #38362F;
--color-btn-primary-text: #FBFAF6;
--color-ai-action: #8B3A1A; /* terracotta brand */
--color-ai-action-hover: #6D2D14;
--color-ai-action-text: #FBFAF6;
--color-brand-secondary: #6B5A3E; /* warm olive — used rarely */
--color-text-primary: #1C1B18;
--color-text-secondary: #56544D;
--color-text-tertiary: #7A776C;
--color-bg-page: #F9F8F3;
--color-bg-subtle: #F4F2EB;
--color-border-default: #DDD9CE;
--color-border-strong: #C9C4B6;
--color-border-brand: #8B3A1A;
--color-error: #B43A28;
--color-error-hover: #8E2D1E;
/* ── Geometry ─────────────────────────────────────────────────────────── */
--radius-6: 6px;
--radius-8: 8px;
--radius-12: 12px;
--radius-16: 16px;
--radius-30: 30px;
/* ── Motion (Astryx easing per DESIGN.md §6) ──────────────────────────── */
/* cubic-bezier(0.16, 1, 0.3, 1) — gentle out-ease, never rubber-band */
--transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
--transition-medium: 200ms cubic-bezier(0.16, 1, 0.3, 1);
/* ── Type scale ───────────────────────────────────────────────────────── */
--text-body-lg: 18px;
--text-small: 14px;
--text-caption: 12px;
color-scheme: light;
}
/* ── Night chrome (Claude-Warm Charcoal) ────────────────────────────────── */
[data-theme='dark'] {
--surface: #2E2D2A; /* paper (elevated surface) */
--surface-subtle: #262624; /* canvas background */
--chrome-bg: #262624;
--canvas: #1F1E1C;
--border: #403E3A; /* warm charcoal, never cool */
--border-subtle: #35332F;
--border-strong: #4F4C46;
--border-hover: #5B574F;
--text: #F5F4EF; /* warm off-white, never pure white */
--text-primary: #F5F4EF;
--text-secondary: #C8C5BB;
--text-tertiary: #9A968A;
--text-muted: #8A8780;
--text-dim: #74716B;
--hover: #34322E;
--pressed: #3A3833;
--active-bg: #42403B;
--bg-hover: #34322E;
--bg-hover-subtle: #2F2D29;
--bg-hover-strong: #3A3833;
--bg-hover-accent: #3D2A24;
--bg-content: #1F1E1C;
--icon-muted: #6E6B65;
--danger: #D97757; /* terracotta-tinted danger in dark */
--danger-bg: #3D2A24;
--danger-border: #5B3D34;
--success: #88B074;
--success-bg: #2A3324;
--success-border: #43533A;
--search-hit-bg: #5C4A1F;
--search-hit-active-bg: #D97757;
--search-hit-active-ink: #1F1E1C;
--color-bg-overlay: rgb(0 0 0 / 65%);
--shadow-modal-strong: 0 20px 25px rgb(0 0 0 / 50%);
--shadow-btn-hover: 0 2px 8px rgb(0 0 0 / 40%);
--shadow-menu: 0 8px 24px rgb(0 0 0 / 55%);
--color-btn-primary: #F5F4EF;
--color-btn-primary-hover: #D9D6CB;
--color-btn-primary-text: #1F1E1C;
--color-ai-action: #D97757; /* radiant terracotta in dark */
--color-ai-action-hover: #C46647;
--color-ai-action-text: #1F1E1C;
--color-brand-secondary: #B8A47E;
--color-text-primary: #F5F4EF;
--color-text-secondary: #C8C5BB;
--color-text-tertiary: #9A968A;
--color-bg-page: #2E2D2A;
--color-bg-subtle: #262624;
--color-border-default: #403E3A;
--color-border-strong: #4F4C46;
--color-border-brand: #D97757;
color-scheme: dark;
}
/* ── System dark fallback ──────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']):not([data-theme='dark']) {
--surface: #2E2D2A;
--surface-subtle: #262624;
--chrome-bg: #262624;
--canvas: #1F1E1C;
--border: #403E3A;
--border-subtle: #35332F;
--border-strong: #4F4C46;
--border-hover: #5B574F;
--text: #F5F4EF;
--text-primary: #F5F4EF;
--text-secondary: #C8C5BB;
--text-tertiary: #9A968A;
--text-muted: #8A8780;
--text-dim: #74716B;
--hover: #34322E;
--pressed: #3A3833;
--active-bg: #42403B;
--bg-hover: #34322E;
--bg-hover-subtle: #2F2D29;
--bg-hover-strong: #3A3833;
--bg-hover-accent: #3D2A24;
--bg-content: #1F1E1C;
--icon-muted: #6E6B65;
--danger: #D97757;
--danger-bg: #3D2A24;
--danger-border: #5B3D34;
--success: #88B074;
--success-bg: #2A3324;
--success-border: #43533A;
--search-hit-bg: #5C4A1F;
--search-hit-active-bg: #D97757;
--search-hit-active-ink: #1F1E1C;
--color-bg-overlay: rgb(0 0 0 / 65%);
--shadow-modal-strong: 0 20px 25px rgb(0 0 0 / 50%);
--shadow-btn-hover: 0 2px 8px rgb(0 0 0 / 40%);
--shadow-menu: 0 8px 24px rgb(0 0 0 / 55%);
--color-btn-primary: #F5F4EF;
--color-btn-primary-hover: #D9D6CB;
--color-btn-primary-text: #1F1E1C;
--color-ai-action: #D97757;
--color-ai-action-hover: #C46647;
--color-ai-action-text: #1F1E1C;
--color-brand-secondary: #B8A47E;
--color-text-primary: #F5F4EF;
--color-text-secondary: #C8C5BB;
--color-text-tertiary: #9A968A;
--color-bg-page: #2E2D2A;
--color-bg-subtle: #262624;
--color-border-default: #403E3A;
--color-border-strong: #4F4C46;
--color-border-brand: #D97757;
color-scheme: dark;
}
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Office-style ScreenTip — themed via the shared tokens (light/dark automatic).
* The element is a singleton created by installScreenTips(); visibility is
* driven inline by the script, everything visual lives here. */
.ui-screentip {
position: fixed;
z-index: 100000;
max-width: 280px;
padding: 5px 10px;
border-radius: var(--radius-6);
border: 1px solid var(--border-strong);
background: var(--surface);
color: var(--text-primary);
font: 12px/1.45 var(--gs-font-sans);
box-shadow: 0 4px 14px rgb(0 0 0 / 18%);
pointer-events: none;
visibility: hidden;
/* some tips carry embedded newlines (e.g. pdf note pins: contents + hint) */
white-space: pre-line;
}
.ui-screentip-kbd {
margin-left: 6px;
color: var(--text-tertiary);
}
.ui-screentip-detail {
margin-top: 2px;
color: var(--text-secondary);
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Composer model chip + its upward popover (AiModelPicker). Chrome tokens only;
* each app imports this next to its other @lycero/ui sheets. */
.ai-model-picker {
display: inline-flex;
min-width: 72px;
flex: 0 1 auto;
}
.ai-model-chip {
display: inline-flex;
align-items: center;
gap: 5px;
height: 24px;
max-width: 200px;
min-width: 0;
padding: 0 7px 0 6px;
flex: 0 1 auto;
border: 1px solid transparent;
border-radius: var(--radius-30);
background: none;
color: var(--text-secondary);
font-family: inherit;
font-size: var(--text-caption);
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.ai-model-chip:hover,
.ai-model-chip.open {
background: var(--hover);
color: var(--text);
}
.ai-model-chip:focus-visible {
outline: none;
border-color: var(--accent);
}
.ai-model-chip-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-model-chip-caret {
flex-shrink: 0;
color: var(--text-dim);
}
.gs-provider-logo {
flex-shrink: 0;
display: inline-flex;
width: 14px;
height: 14px;
color: var(--text);
}
.gs-provider-logo svg {
width: 100%;
height: 100%;
}
.ai-model-pop {
position: fixed;
z-index: 80;
display: flex;
flex-direction: column;
width: 260px;
max-height: min(420px, 70vh);
padding: 4px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-8);
box-shadow: var(--shadow-menu);
font-size: 12px;
}
.ai-model-pop-list {
flex: 1;
min-height: 0;
overflow-y: auto;
}
.ai-model-group + .ai-model-group {
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid var(--border-subtle);
}
.ai-model-group-head {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 8px 3px;
color: var(--text-dim);
font-size: 11px;
font-weight: 600;
}
.ai-model-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 5px 8px 5px 28px;
border: none;
border-radius: var(--radius-6);
background: none;
color: var(--text);
font-family: inherit;
font-size: 12px;
text-align: left;
cursor: pointer;
}
.ai-model-item:hover,
.ai-model-item:focus-visible {
background: var(--hover);
outline: none;
}
.ai-model-item.selected {
background: var(--accent-soft);
}
.ai-model-item-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-model-manage {
flex-shrink: 0;
margin-top: 4px;
padding-left: 8px;
border-top: 1px solid var(--border-subtle);
border-radius: 0 0 var(--radius-6) var(--radius-6);
color: var(--text-secondary);
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Queued-messages strip above the AI composer (see AiQueueStrip.tsx) */
/*
* Every rule is anchored on .ai-queue-strip. Written unqualified, these names
* also matched the queued-edits panel that the Docs, HTML, Markdown and Slides
* stylesheets style under the same `.ai-queue-*` names — and their sheet loads
* after this one in every renderer entry, so the strip rendered one way in
* Sheets and PDF and another way in the other four apps, while our own rules
* reached into a component this sheet has nothing to do with. Scoping closes
* both directions; keep new rules under the root, because a bare
* `.ai-queue-head` here is a cross-component edit, not a local one.
*/
.ai-queue-strip {
display: flex;
flex-direction: column;
gap: 4px;
padding: 6px 8px;
border-bottom: 1px solid var(--border-subtle);
background: var(--color-bg-subtle);
}
.ai-queue-strip .ai-queue-head {
display: flex;
align-items: center;
justify-content: space-between;
/* declared rather than absent: the apps style a `.ai-queue-head` too, and a
padding they set would otherwise reach this element by name alone */
padding: 0;
gap: 6px;
}
.ai-queue-strip .ai-queue-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 4px;
border: none;
border-radius: 5px;
background: none;
font-size: var(--text-caption);
font-weight: 500;
color: var(--color-text-secondary);
cursor: pointer;
}
.ai-queue-strip .ai-queue-toggle:hover {
background: var(--hover);
color: var(--color-text-primary);
}
.ai-queue-strip .ai-queue-clear {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: none;
border-radius: 5px;
background: none;
color: var(--icon-muted);
cursor: pointer;
}
.ai-queue-strip .ai-queue-clear:hover {
background: var(--hover);
color: var(--color-text-primary);
} /* holds the queue where it is; pressed = held */
.ai-queue-strip .ai-queue-pause {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: none;
border-radius: 5px;
background: none;
color: var(--icon-muted);
cursor: pointer;
}
.ai-queue-strip .ai-queue-pause:hover {
background: var(--hover);
color: var(--color-text-primary);
}
.ai-queue-strip .ai-queue-pause[aria-pressed='true'] {
background: var(--hover);
color: var(--color-text-primary);
}
.ai-queue-strip .ai-queue-hint {
margin-right: auto;
font-size: var(--text-caption);
color: var(--color-text-secondary);
/* as above: the apps' `.ai-queue-hint` carries a padding of its own */
padding: 0;
}
.ai-queue-strip .ai-queue-items {
display: flex;
flex-direction: column;
gap: 3px;
margin: 0;
padding: 0;
list-style: none;
max-height: 120px;
overflow-y: auto;
}
.ai-queue-strip .ai-queue-item {
display: flex;
align-items: center;
gap: 4px;
}
.ai-queue-strip .ai-queue-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--text-caption);
color: var(--color-text-secondary);
}
.ai-queue-strip .ai-queue-edit {
flex: 1;
min-width: 0;
padding: 2px 6px;
border: 1px solid var(--border);
border-radius: 5px;
background: var(--canvas);
color: var(--color-text-primary);
font-size: var(--text-caption);
}
.ai-queue-strip .ai-queue-edit:focus {
outline: none;
border-color: var(--border-strong);
}
.ai-queue-strip .ai-queue-action {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 20px;
height: 20px;
border: none;
border-radius: 4px;
background: none;
color: var(--icon-muted);
cursor: pointer;
}
.ai-queue-strip .ai-queue-action:hover {
background: var(--hover);
color: var(--color-text-primary);
} /* reordering: hold a row to pick it up, Alt+arrows for keyboards */
.ai-queue-strip .ai-queue-item {
cursor: grab;
}
.ai-queue-strip .ai-queue-item:focus-visible {
outline: 1px solid var(--accent);
}
.ai-queue-strip .ai-queue-items.ai-queue-dragging,
.ai-queue-strip .ai-queue-items.ai-queue-dragging .ai-queue-item {
cursor: grabbing;
user-select: none;
}
.ai-queue-strip .ai-queue-item[data-dragging='true'] {
opacity: 0.55;
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Shared Word-style color picker panel (packages/ui color-picker.tsx).
* Appearance only — anchor/fixed positioning comes from the per-app class
* passed through the className prop. Selection outlines use the app accent.
*
* Interactive elements use a doubled .gcp-palette prefix: the panel is
* anchored inside app ribbon rows whose generic resets (e.g. sheets'
* `.inline-tools button { border: none; height: 30px; }` and its :hover
* rules) would otherwise outrank single-class rules here. */
.gcp-palette {
display: block;
box-sizing: border-box;
width: 260px;
padding: 10px 12px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 8px;
box-shadow: var(--shadow-modal-strong);
color: var(--text);
text-align: left;
cursor: default;
}
.gcp-palette.gcp-palette .gcp-auto {
display: block;
min-width: 0;
width: 100%;
height: 28px;
padding: 0;
border: 1px solid var(--border-strong);
border-radius: 0;
background: var(--surface);
color: var(--text);
font-size: 12.5px;
font-family: inherit;
cursor: pointer;
}
.gcp-palette.gcp-palette .gcp-auto:hover {
background: var(--hover);
}
/* Selected (color unset / no fill applied): the per-app accent tint, matching
the shared dropdown's selected option (each app's --accent-soft) */
.gcp-palette.gcp-palette .gcp-auto.selected {
background: var(--accent-soft);
}
.gcp-section-title {
margin: 12px 0 6px;
color: var(--text);
font-size: 12.5px;
font-weight: 500;
}
.gcp-section-title:first-child {
margin-top: 2px;
}
.gcp-theme-base,
.gcp-theme-shades,
.gcp-standard-row {
display: grid;
grid-template-columns: repeat(10, 20px);
column-gap: 4px;
row-gap: 0;
}
.gcp-theme-base {
margin-bottom: 8px;
}
.gcp-row {
display: contents;
}
.gcp-palette.gcp-palette .gcp-swatch {
display: block;
box-sizing: border-box;
min-width: 0;
width: 20px;
height: 20px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
border-radius: 0;
cursor: pointer;
}
.gcp-palette.gcp-palette .gcp-swatch:hover,
.gcp-palette.gcp-palette .gcp-swatch:focus-visible,
.gcp-palette.gcp-palette .gcp-swatch.selected {
position: relative;
z-index: 1;
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.gcp-palette.gcp-palette .gcp-more {
position: relative;
display: flex;
align-items: center;
gap: 8px;
margin: 12px -12px -10px;
padding: 9px 14px;
border: none;
border-top: 1px solid var(--border);
border-radius: 0 0 8px 8px;
background: none;
color: var(--text);
font-size: 12.5px;
font-weight: 400;
cursor: pointer;
}
.gcp-palette.gcp-palette .gcp-more:hover {
background: var(--hover);
}
.gcp-palette.gcp-palette .gcp-more-icon,
.gcp-palette.gcp-palette .gcp-more-icon:hover {
display: inline-flex;
min-width: 0;
width: auto;
height: auto;
padding: 0;
background: none;
line-height: 1;
}
/* Invisible but covering the whole row (not pointer-events: none): pointer
events must land on the input itself so callers' moreInputProps hooks
(onPointerDown arming / selection save) fire before the OS dialog opens. */
.gcp-more input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Shared select-replacement dropdown (Dropdown in dropdown.tsx): themed
* trigger + anchored popover. Colors are chrome tokens only; apps size the
* control via a class on the .gs-dd wrapper. */
.gs-dd {
position: relative;
display: inline-flex;
anchor-name: --gs-dd;
anchor-scope: --gs-dd;
}
.gs-dd-btn {
box-sizing: border-box;
display: flex;
align-items: center;
gap: 6px;
width: 100%;
min-width: 0;
height: 26px;
/* right 5px: caret glyph right edge lands 6px from the outer edge, matching
* the format-pane caret alignment line */
padding: 0 5px 0 6px;
border: 1px solid var(--border-strong);
border-radius: 3px;
background: var(--surface);
color: var(--text);
font-family: inherit;
font-size: 12px;
text-align: left;
cursor: pointer;
}
.gs-dd-btn:focus-visible {
border-color: var(--accent);
outline: none;
}
.gs-dd-btn:disabled {
color: var(--text-dim);
cursor: default;
}
.gs-dd-value {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
overflow: hidden;
white-space: nowrap;
}
.gs-dd-caret {
flex-shrink: 0;
display: flex;
color: var(--text-dim);
}
/* fixed + anchored so scroll-container overflow never clips the popover or
* its shadow; flips above the trigger near the viewport bottom */
.gs-dd-pop {
position: fixed;
position-anchor: --gs-dd;
top: calc(anchor(bottom) + 2px);
left: anchor(left);
min-width: anchor-size(width);
/* flip-inline: a popover wider than its trigger near the window's right edge would
* otherwise run offscreen and clip (fixed positioning clips at the viewport) —
* flipping right-aligns it to the trigger so it grows leftwards instead */
position-try-fallbacks:
flip-block,
flip-inline,
flip-block flip-inline;
position-visibility: anchors-visible;
z-index: 80;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 2px;
max-height: 320px;
overflow-y: auto;
padding: 4px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 4px;
box-shadow: var(--shadow-menu);
}
/* with a filter box the popover stops scrolling itself: the box stays put
* above an inner scroller, so it never rides out of view with the list */
.gs-dd-pop.has-search {
overflow: hidden;
}
.gs-dd-list {
display: contents;
}
.gs-dd-pop.has-search .gs-dd-list {
display: flex;
flex-direction: column;
gap: 2px;
min-height: 0;
overflow-y: auto;
}
.gs-dd-search {
box-sizing: border-box;
flex-shrink: 0;
margin: 0 0 2px;
padding: 4px 6px;
border: 1px solid var(--border-strong);
border-radius: 3px;
background: var(--surface);
color: var(--text);
font-family: inherit;
font-size: 12px;
outline: none;
}
.gs-dd-search:focus {
border-color: var(--accent);
}
.gs-dd-item {
display: flex;
align-items: center;
flex-shrink: 0;
border: none;
background: none;
color: var(--text);
border-radius: 3px;
padding: 5px 6px;
font-family: inherit;
font-size: 12px;
text-align: left;
cursor: pointer;
}
.gs-dd-item.active {
background: var(--hover);
}
.gs-dd-item:disabled {
color: var(--text-dim);
cursor: default;
}
.gs-dd-item.selected {
background: var(--accent-soft);
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Word for Mac "Collapse ribbon" (see ribbon-collapse.tsx for the markup contract) */
.ribbon-collapsible {
position: relative;
}
.ribbon-collapsible [data-ribbon-body] {
anchor-name: --ribbon-body;
}
.ribbon-collapsible.ribbon-collapsed [data-ribbon-body] {
display: none;
}
.ribbon-collapse-btn {
position: absolute;
position-anchor: --ribbon-body;
bottom: calc(anchor(bottom) + 3px);
right: calc(anchor(right) + 4px);
z-index: 61;
}
.ribbon-collapse-btn,
.ribbon-expand-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 18px;
padding: 0;
border: 0;
border-radius: 3px;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
-webkit-app-region: no-drag;
}
.ribbon-collapse-btn:hover,
.ribbon-expand-btn:hover {
background: var(--hover);
color: var(--text);
}
.ribbon-expand-btn {
margin-left: 4px;
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Block-level markdown in AI chat bubbles (tables, fenced code); inline chips stay per-app */
.ai-md-table-wrap {
overflow-x: auto;
margin: 0 0 16px;
}
.ai-md-table {
border-collapse: collapse;
font-size: 0.95em;
line-height: 1.45;
}
.ai-md-table th,
.ai-md-table td {
border: 1px solid var(--border);
padding: 4px 10px;
text-align: left;
vertical-align: top;
}
.ai-md-table th {
background: var(--surface-subtle);
font-weight: 600;
}
.ai-md-pre {
margin: 0 0 16px;
padding: 10px 12px;
border-radius: 6px;
background: var(--color-bg-subtle);
overflow-x: auto;
line-height: 1.5;
font-size: 13px;
font-family: var(--gs-font-mono, 'Be Vietnam Pro', 'Segoe UI', 'Cascadia Mono', Consolas, sans-serif);
}
.ai-md .ai-md-pre code {
padding: 0;
border-radius: 0;
background: none;
color: inherit;
font-size: inherit;
white-space: pre;
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* AI panel text size (Settings → General). The chat log and composer are
scaled as a block so the per-app px type scale keeps its proportions;
the factor comes from applyAiPanelPrefs() via --ai-font-zoom. */
html[data-ai-font-size] .ai-chat,
html[data-ai-font-size] .ai-composer {
zoom: var(--ai-font-zoom, 1);
}
/* Move only the assistant; document navigation retains its existing ordering. */
html[data-ai-panel-side='right'] {
--ai-panel-border-left: 1px;
--ai-panel-border-right: 0px;
}
html[data-ai-panel-side='right'] .ai-dock {
order: 1;
}
html[data-ai-panel-side='right'] .ai-panel-resizer {
left: 0;
right: auto;
}
/* Sheets has a two-column grid instead of the other apps' flex docks. */
html[data-ai-panel-side='right'] .sheet-body {
grid-template-columns: minmax(0, 1fr) var(--copilot-width, 360px);
}
html[data-ai-panel-side='right'] .sheet-body > .copilot {
order: 1;
}
html[data-ai-panel-side='right'] .app-shell.copilot-collapsed .sheet-body {
grid-template-columns: minmax(0, 1fr) 34px;
}
html[data-ai-panel-side='right'] .ai-panel-collapse svg {
transform: scaleX(-1);
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Quote block on a user bubble: the document selection the message targeted */
.ai-msg-scope {
display: flex;
flex-direction: column;
gap: 3px;
margin-bottom: 6px;
padding-left: 9px;
border-left: 2px solid var(--color-brand-secondary);
white-space: normal;
}
.ai-msg-scope-label {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: var(--text-caption);
font-weight: 500;
color: var(--color-brand-secondary);
}
.ai-msg-scope-label::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
}
.ai-msg-scope-text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: var(--text-caption);
line-height: 1.45;
color: var(--color-text-secondary);
word-break: break-word;
}
/**
* Lycero Office Desktop
* Copyright © 2026 ITAC AI Heavy Industries.
* Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
*/
/* Bundled metric substitutes for fonts most decks assume but macOS/Linux lack:
* Carlito ↔ Calibri (document content rendering — the canvas font chains in
* konva-adapter.ts list Carlito right after Calibri). The files are the suite's
* shared copy (@lycero/ui/fonts); their internal family name is "Carlito GO"
* (docs' Vietnamese-diacritics rebuild), which is what the main-process metrics
* report as the draw family — declare both names. */
@font-face {
font-family: 'Carlito';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Carlito';
src: url('./Carlito-Bold-BhbXr__n.ttf');
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Carlito';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Carlito';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
font-weight: bold;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Carlito GO';
src: url('./Carlito-Regular-Cbe9FLjp.ttf');
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Carlito GO';
src: url('./Carlito-Bold-BhbXr__n.ttf');
font-weight: bold;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Carlito GO';
src: url('./Carlito-Italic-KkZUqxJW.ttf');
font-weight: normal;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Carlito GO';
src: url('./Carlito-BoldItalic-0dXjwGA0.ttf');
font-weight: bold;
font-style: italic;
font-display: block;
}
/* Per-app accent (powerpoint-orange family) + slides-only tokens.
* Chrome tokens (surface/text/border/…, AI panel --color-*) come from
* @lycero/ui/tokens.css; nothing here may shadow those names. */
:root {
--accent: #c43e1c;
--accent-dark: #a33517;
--accent-soft: #fbeae5;
/* slides-local chrome shades */
--slides-statusbar-bg: #f3f4f6;
--slides-rail-bg: #ececec;
--slides-statusbar-border: #e1e4e8;
--slides-statusbar-hover: rgb(0 0 0 / 8%);
/* same relative darkening as the ribbon's --active-bg selected gray on white */
--slides-statusbar-active: rgb(0 0 0 / 8%);
--slides-ctl-border: #8a8886;
--slides-thumb-shadow: 0 0 1px rgb(0 0 0 / 28%), 0 1px 4px rgb(0 0 0 / 30%);
--slides-text-disabled: #b0b0b0;
--slides-hover-wash: color-mix(in srgb, var(--accent) 10%, transparent);
--slides-hover-wash-soft: color-mix(in srgb, var(--accent) 8%, transparent);
--slides-stagebar-ink: #374151;
--slides-comment-bg: #fffdfa;
--slides-chip-bg: #f6f8fc;
--slides-att-bg: #fafafa;
--slides-att-border: #ececee;
--slides-select-border: var(--accent);
--slides-select-hover-bg: color-mix(in srgb, var(--accent) 6%, var(--surface));
--slides-select-active-bg: var(--accent-soft);
--slides-cell-focus-bg: color-mix(in srgb, var(--accent) 8%, var(--surface));
--slides-ok: #2e9e44;
--slides-error: #ef4444;
--slides-error-bg: #fdecec;
--slides-danger-bg: #fbe9e7;
--slides-ai-error: #c62828;
--slides-ai-error-border: rgb(198 40 40 / 45%);
--slides-ai-error-bg: rgb(198 40 40 / 8%);
--slides-ai-step-error: #b91c1c;
--slides-focus-ring: rgb(35 36 37 / 20%);
--slides-focus-ring-soft: rgb(35 36 37 / 18%);
--slides-focus-ring-strong: rgb(35 36 37 / 35%);
--slides-focus-ring-blue: rgb(74 141 246 / 30%);
--slides-shimmer-base: #666666;
--slides-shimmer-hi: #d9d9d9;
--slides-scroll-thumb: rgb(0 0 0 / 25%);
--slides-swatch-ring: rgb(0 0 0 / 15%);
--slides-swatch-ring-strong: rgb(0 0 0 / 25%);
/* PowerPoint animation categories: entrance / emphasis / exit / motion path */
--slides-anim-entr: #107c41;
--slides-anim-emph: #c28e00;
--slides-anim-exit: #c43e1c;
--slides-anim-path: #2b7cd3;
--slides-anim-media: #7a5cc4;
--slides-choice-check: url("data:image/svg+xml;utf8,");
/* content-side constants: thumbnails/sorter/master previews and layout
* placeholders are paper; grid/guide/crop/laser overlays draw on the slide
* itself — none of these follow the theme */
--slides-paper: #fff;
--slides-on-accent: #fff;
--slides-on-accent-border: rgb(255 255 255 / 60%);
--slides-on-accent-bg: rgb(255 255 255 / 12%);
--slides-on-accent-hover: rgb(255 255 255 / 25%);
--slides-knob-dot: #fff;
--slides-badge-ink: #fff;
--slides-badge-bg: rgb(0 0 0 / 45%);
--slides-grid-line: rgb(60 60 60 / 16%);
--slides-guide: rgb(196 62 28 / 75%);
--slides-theme-card-gloss: inset 0 0 0 1px rgb(255 255 255 / 8%);
--slides-ph-border: rgb(0 0 0 / 30%);
--slides-ph-bg: rgb(0 0 0 / 4%);
--slides-ph-ink: rgb(0 0 0 / 40%);
--slides-swatch-none-ink: #888;
--slides-laser-core: rgb(255 82 82 / 95%);
--slides-laser-mid: rgb(255 82 82 / 55%);
--slides-laser-edge: rgb(255 82 82 / 0%);
--slides-laser-glow: 0 0 10px 3px rgb(255 82 82 / 50%);
--slides-crop-mask: rgb(0 0 0 / 45%);
--slides-crop-ink: #fff;
--slides-crop-ring: rgb(0 0 0 / 50%);
--slides-crop-thirds: rgb(255 255 255 / 35%);
--slides-crop-hint-bg: rgb(0 0 0 / 70%);
/* black playback chrome (slideshow / presenter / reading view) holds in
* both themes; numeric suffix = white alpha % */
--slides-show-black: #000;
--slides-show-white: #fff;
--slides-show-ink: #fff;
--slides-show-ink-88: rgb(255 255 255 / 88%);
--slides-show-ink-85: rgb(255 255 255 / 85%);
--slides-show-ink-75: rgb(255 255 255 / 75%);
--slides-show-ink-60: rgb(255 255 255 / 60%);
--slides-show-ink-55: rgb(255 255 255 / 55%);
--slides-show-ink-45: rgb(255 255 255 / 45%);
--slides-show-ink-40: rgb(255 255 255 / 40%);
--slides-show-fill-8: rgb(255 255 255 / 8%);
--slides-show-fill-12: rgb(255 255 255 / 12%);
--slides-show-fill-14: rgb(255 255 255 / 14%);
--slides-show-fill-18: rgb(255 255 255 / 18%);
--slides-show-fill-20: rgb(255 255 255 / 20%);
--slides-show-fill-22: rgb(255 255 255 / 22%);
--slides-show-line-10: rgb(255 255 255 / 10%);
--slides-show-line-15: rgb(255 255 255 / 15%);
--slides-show-line-18: rgb(255 255 255 / 18%);
--slides-show-line-25: rgb(255 255 255 / 25%);
--slides-show-counter-bg: rgb(0 0 0 / 35%);
--slides-show-pill-bg: rgb(0 0 0 / 55%);
--slides-reading-bg: #2b2b2b;
--slides-reading-ink: #eee;
--slides-reading-ink-dim: #ddd;
--slides-pv-ink: #e8e8e8;
--slides-pv-accent: #d75342;
--slides-pv-exit-hover: rgb(211 47 47 / 60%);
/* dark chips and black translucent masks/shadows hold in both themes */
--slides-chip-remove-bg: #000;
--slides-chip-remove-hover: #4b4e51;
--slides-chip-remove-ink: #fff;
--slides-toast-bg: rgb(35 35 37 / 92%);
--slides-toast-error-bg: rgb(196 49 75 / 95%);
--slides-toast-ink: #fff;
--slides-toast-ok: #34c759;
--slides-mask-bg: rgb(0 0 0 / 50%);
--slides-copilot-grad: linear-gradient(135deg, #6a5cff 0%, #2b88f8 55%, #29c3a6 120%);
--slides-shadow-badge: 0 2px 6px rgb(74 92 255 / 35%);
--slides-shadow-badge-soft: 0 2px 6px rgb(74 92 255 / 25%);
--slides-shadow-menu: 0 8px 24px rgb(0 0 0 / 18%);
--slides-shadow-drop: 0 6px 20px rgb(0 0 0 / 14%), 0 1px 3px rgb(0 0 0 / 8%);
--slides-shadow-popup: 0 6px 20px rgb(0 0 0 / 15%);
--slides-shadow-float: 0 1px 4px rgb(0 0 0 / 18%);
--slides-shadow-modal: 0 3px 30px rgb(0 0 0 / 8%);
--slides-shadow-toolbar: 0 2px 8px rgb(0 0 0 / 6%);
--slides-shadow-card: 0 1px 2px rgb(0 0 0 / 4%), 0 2px 6px rgb(0 0 0 / 3%);
--slides-shadow-tip: 0 4px 6px rgb(0 0 0 / 10%);
--slides-shadow-toast: 0 4px 16px rgb(0 0 0 / 18%);
--slides-shadow-copilot: 4px 0 16px rgb(82 41 31 / 5%);
--slides-shadow-composer: 0 6px 30px rgb(0 0 0 / 8%);
--slides-shadow-stage: 0 2px 14px rgb(0 0 0 / 18%);
--slides-shadow-reading: 0 10px 36px rgb(0 0 0 / 50%);
}
[data-theme='dark'] {
--accent: #e8663f;
--accent-dark: #d4552f;
--accent-soft: #43261d;
--slides-statusbar-bg: #252525;
--slides-rail-bg: #252525;
--slides-statusbar-border: #3a3a3a;
--slides-statusbar-hover: rgb(255 255 255 / 10%);
--slides-statusbar-active: rgb(255 255 255 / 12%);
--slides-ctl-border: #777;
--slides-thumb-shadow: 0 0 1px rgb(0 0 0 / 55%), 0 1px 4px rgb(0 0 0 / 60%);
--slides-text-disabled: #666;
--slides-hover-wash: color-mix(in srgb, var(--accent) 15%, transparent);
--slides-hover-wash-soft: color-mix(in srgb, var(--accent) 12%, transparent);
--slides-stagebar-ink: #d0d0d0;
--slides-comment-bg: #2b2a26;
--slides-chip-bg: #2a2f36;
--slides-att-bg: #2a2a2a;
--slides-att-border: #3a3a3a;
--slides-select-border: var(--accent);
--slides-select-hover-bg: color-mix(in srgb, var(--accent) 12%, var(--surface));
--slides-select-active-bg: var(--accent-soft);
--slides-cell-focus-bg: color-mix(in srgb, var(--accent) 14%, var(--surface));
--slides-ok: #58b380;
--slides-error: #e57373;
--slides-error-bg: rgb(229 115 115 / 12%);
--slides-danger-bg: #3a2020;
--slides-ai-error: #f28b82;
--slides-ai-error-border: rgb(242 139 130 / 45%);
--slides-ai-error-bg: rgb(242 139 130 / 12%);
--slides-ai-step-error: #f28b82;
--slides-focus-ring: rgb(228 228 228 / 25%);
--slides-focus-ring-soft: rgb(228 228 228 / 22%);
--slides-focus-ring-strong: rgb(228 228 228 / 40%);
--slides-focus-ring-blue: rgb(74 158 255 / 40%);
--slides-shimmer-base: #8a8a8a;
--slides-shimmer-hi: #d0d0d0;
--slides-scroll-thumb: rgb(255 255 255 / 28%);
--slides-swatch-ring: rgb(255 255 255 / 25%);
--slides-swatch-ring-strong: rgb(255 255 255 / 35%);
--slides-anim-entr: #58b380;
--slides-anim-emph: #d9a834;
--slides-anim-exit: #e8663f;
--slides-anim-path: #5aa0e8;
--slides-anim-media: #a58cf0;
--slides-choice-check: url("data:image/svg+xml;utf8,");
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']):not([data-theme='dark']) {
--accent: #e8663f;
--accent-dark: #d4552f;
--accent-soft: #43261d;
--slides-statusbar-bg: #252525;
--slides-rail-bg: #252525;
--slides-statusbar-border: #3a3a3a;
--slides-statusbar-hover: rgb(255 255 255 / 10%);
--slides-statusbar-active: rgb(255 255 255 / 12%);
--slides-ctl-border: #777;
--slides-thumb-shadow: 0 0 1px rgb(0 0 0 / 55%), 0 1px 4px rgb(0 0 0 / 60%);
--slides-text-disabled: #666;
--slides-hover-wash: color-mix(in srgb, var(--accent) 15%, transparent);
--slides-hover-wash-soft: color-mix(in srgb, var(--accent) 12%, transparent);
--slides-stagebar-ink: #d0d0d0;
--slides-comment-bg: #2b2a26;
--slides-chip-bg: #2a2f36;
--slides-att-bg: #2a2a2a;
--slides-att-border: #3a3a3a;
--slides-select-border: var(--accent);
--slides-select-hover-bg: color-mix(in srgb, var(--accent) 12%, var(--surface));
--slides-select-active-bg: var(--accent-soft);
--slides-cell-focus-bg: color-mix(in srgb, var(--accent) 14%, var(--surface));
--slides-ok: #58b380;
--slides-error: #e57373;
--slides-error-bg: rgb(229 115 115 / 12%);
--slides-danger-bg: #3a2020;
--slides-ai-error: #f28b82;
--slides-ai-error-border: rgb(242 139 130 / 45%);
--slides-ai-error-bg: rgb(242 139 130 / 12%);
--slides-ai-step-error: #f28b82;
--slides-focus-ring: rgb(228 228 228 / 25%);
--slides-focus-ring-soft: rgb(228 228 228 / 22%);
--slides-focus-ring-strong: rgb(228 228 228 / 40%);
--slides-focus-ring-blue: rgb(74 158 255 / 40%);
--slides-shimmer-base: #8a8a8a;
--slides-shimmer-hi: #d0d0d0;
--slides-scroll-thumb: rgb(255 255 255 / 28%);
--slides-swatch-ring: rgb(255 255 255 / 25%);
--slides-swatch-ring-strong: rgb(255 255 255 / 35%);
--slides-anim-entr: #58b380;
--slides-anim-emph: #d9a834;
--slides-anim-exit: #e8663f;
--slides-anim-path: #5aa0e8;
--slides-anim-media: #a58cf0;
--slides-choice-check: url("data:image/svg+xml;utf8,");
}
}
* {
box-sizing: border-box;
}
/* UI CJK fonts per language (documentElement.lang is set at bootstrap and on switch);
* the zh expansion must keep the historical stack byte-identical */
:root {
--ui-cjk: 'PingFang SC', 'Microsoft YaHei';
}
:root:lang(ja) {
--ui-cjk: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo';
}
:root:lang(ko) {
--ui-cjk: 'Apple SD Gothic Neo', 'Malgun Gothic';
}
:root:lang(zh-TW) {
--ui-cjk: 'PingFang TC', 'Microsoft JhengHei';
}
html,
body,
#root {
height: 100%;
margin: 0;
}
body {
font-family:
'Segoe UI',
-apple-system,
BlinkMacSystemFont,
var(--ui-cjk),
sans-serif;
color: var(--text);
background: var(--chrome-bg);
font-size: 13px;
-webkit-font-smoothing: antialiased;
/* The document itself never scrolls: a too-wide ribbon (or any other
overflowing chrome) must scroll inside its own container, not drag the
whole page sideways. */
overflow: hidden;
}
.app {
display: flex;
flex-direction: column;
height: 100%;
/* ribbon-body keeps overflow visible for dropdowns; stop that overflow here
so a wide tab (e.g. Animations) can't become a document-level scroll */
overflow: hidden;
}
button {
font-family: inherit;
}
/* ================= title bar ================= */
.autosave-toggle {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
margin-left: 4px;
margin-right: 4px;
-webkit-app-region: no-drag;
user-select: none;
}
.autosave-toggle input {
display: none;
}
.autosave-knob {
width: 26px;
height: 14px;
border-radius: 7px;
background: var(--border-strong);
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(--slides-knob-dot);
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;
}
.qa-btn {
width: 30px;
height: 28px;
border: none;
background: none;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
color: var(--text-primary);
}
.qa-btn svg {
display: block;
margin: 0 auto;
}
.qa-btn:hover:not(:disabled) {
background: var(--hover);
}
.qa-btn:disabled {
color: var(--text-tertiary);
cursor: default;
}
/* ================= ribbon ================= */
.ribbon {
flex-shrink: 0;
background: var(--chrome-bg);
border-bottom: 1px solid var(--border-strong);
user-select: none;
/* shared toolbar ink (glyphs, letterforms, labels) — same as the sheets ribbon */
color: var(--text-primary);
}
.ribbon-tabs {
display: flex;
align-items: center;
padding: 5px 10px 0;
gap: 2px;
/* Title bar row removed; the tab row doubles as the frameless-window drag region */
-webkit-app-region: drag;
user-select: none;
}
.ribbon-tabs button,
.ribbon-tabs .file-tab-wrap,
.ribbon-tabs .autosave-toggle,
.ribbon-tabs .qa-btn {
-webkit-app-region: no-drag;
}
/* While a ribbon popup is open the row must deliver mousedown (drag regions
swallow it), so outside-press dismissal can see presses on the blank band */
.ribbon-tabs.ribbon-tabs-nodrag {
-webkit-app-region: no-drag;
}
.ribbon-tabs-mac {
padding-left: 84px; /* room for traffic lights */
}
.ribbon-tabs-win {
padding-right: 150px; /* room for windows caption buttons overlay */
}
.ribbon-file {
max-width: 40%;
font-size: 12px;
color: var(--text-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 4px;
}
.ribbon-tab {
position: relative;
border: none;
background: none;
padding: 7px 9px 6px;
font-size: 13px;
/* every tab label is semibold, not just the active one */
font-weight: 600;
color: inherit;
cursor: pointer;
/* transparent border keeps the row height; the visible underline is the
* ::after below, sized to the label text rather than the padded button */
border-bottom: 2.5px solid transparent;
border-radius: 4px 4px 0 0;
}
.ribbon-tab:hover {
color: var(--accent);
}
.ribbon-tab.active {
color: var(--accent);
font-weight: 600;
}
/* active underline: exactly the text width (insets = horizontal padding),
* ends slightly rounded — not a full capsule */
.ribbon-tab.active::after {
content: '';
position: absolute;
left: 13px;
right: 13px;
bottom: -2.5px;
height: 2.5px;
border-radius: 1px;
background: var(--accent);
}
.ribbon-tab-file {
color: var(--slides-on-accent);
background: var(--accent);
border-radius: 4px;
padding: 6px 16px;
margin-right: 6px;
}
.ribbon-tab-file:hover,
.ribbon-tab-file.open {
background: var(--accent-dark);
}
.file-tab-wrap {
position: relative;
}
.file-menu {
position: absolute;
top: calc(100% + 2px);
left: 0;
z-index: 60;
min-width: 210px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 6px;
box-shadow: var(--slides-shadow-menu);
padding: 5px;
}
.file-menu button {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
border: none;
background: none;
padding: 8px 12px;
font-size: 13px;
border-radius: 4px;
cursor: pointer;
color: var(--text);
}
.file-menu button:hover:not(:disabled) {
background: var(--hover);
}
.file-menu button:disabled {
opacity: 0.4;
cursor: default;
}
.file-menu-key {
color: var(--text-dim);
font-size: 12px;
}
.ribbon-tabs-spacer {
flex: 1;
}
.qa-sep {
width: 1px;
height: 16px;
margin: 0 6px;
background: var(--border-strong);
flex-shrink: 0;
}
/* AI badge shared by ribbon button and (later) AI panel title */
.copilot-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 7px;
color: var(--slides-on-accent);
background: var(--slides-copilot-grad);
box-shadow: var(--slides-shadow-badge);
}
/* Mini variant: corner marker on ribbon buttons whose action calls AI (Spelling / Translate) */
.rb-ai-icon {
position: relative;
}
.copilot-badge-mini {
position: absolute;
/* hugs the bottom-right corner of the centered 28px icon */
left: calc(50% + 7px);
bottom: -1px;
width: 13px;
height: 13px;
border-radius: 4px;
box-shadow: none;
}
/* AI entry points all use the app icon (Ribbon AI button / AI panel title / collapsed entry) */
.app-badge {
display: block;
width: 22px;
height: 22px;
border-radius: 7px;
box-shadow: var(--slides-shadow-badge-soft);
}
/* Lycero brand logo (Ribbon AI button / AI panel title / collapsed entry) */
.lycero-badge {
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
}
.ai-panel-title .lycero-badge {
width: 18px;
height: 18px;
}
/* ---- ribbon body ---- */
.ribbon-body {
display: flex;
/* groups stretch to the full ribbon height, buttons fill it:
* the icon area grows (hover paints edge to edge), labels sit at the bottom */
align-items: stretch;
padding: 6px 12px 6px;
/* HARD-fixed height, not min-height: constant ribbon height across tabs,
so switching/auto-jumping to contextual tabs never pushes the canvas
below (root cause of the selected-element jitter). min-height still let any
taller tab stretch the row — a tab that outgrows this must compact its own
content instead. Sized to the tallest tab content: the font group's two 30px
rows + gaps/padding = 80px. */
height: 80px;
/* Groups never shrink (flex-shrink: 0 below), so a narrow window overflows
the row: scroll it inside the ribbon instead of stretching the document
(matching the sheets ribbon). Dropdown panels are NOT clipped by this —
.rb-drop escapes the scroll container via anchor positioning. */
/* `scroll`, not `auto`: styled scrollbars are classic (non-overlay), so
`scroll` keeps the 5px lane reserved even without overflow — the content
area never changes and crossing the overflow threshold cannot cause a
vertical layout jump (same reasoning as .ai-attachments). */
overflow-x: scroll;
overflow-y: hidden;
/* Slim visible scrollbar so mouse users can reach overflowed groups
(#55). Its 5px lane is carved out of the bottom
padding, keeping the 80px band and the content area unchanged; Chromium
paints a thumb only while the row actually overflows. */
padding-bottom: 1px;
}
.ribbon-body::-webkit-scrollbar {
height: 5px;
}
.ribbon-body::-webkit-scrollbar-track {
background: transparent;
}
.ribbon-body::-webkit-scrollbar-thumb {
border-radius: 2.5px;
background: var(--slides-scroll-thumb);
}
.ribbon-group {
display: flex;
flex-direction: column;
justify-content: center;
padding: 2px 4px;
flex-shrink: 0;
}
.ribbon-group-items {
display: flex;
/* center like docs/sheets — stretch made tall buttons grow to the group
height, sitting their glyphs ~1px lower than the other apps' */
align-items: center;
gap: 2px;
flex: 1;
}
.ribbon-group-label {
display: none;
}
.ribbon-sep {
width: 1px;
flex-shrink: 0;
/* separators keep spanning the full ribbon height while groups center */
align-self: stretch;
background: var(--border);
/* 2px matches the groups' vertical padding, so the line spans exactly the
tallest group content (the two 30px font rows) instead of stopping short
of it — same inset across all three apps */
margin: 2px 6px;
}
.ribbon-placeholder {
align-self: center;
color: var(--text-dim);
font-size: 12.5px;
padding: 0 14px;
}
.rb-big {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
border: none;
background: none;
border-radius: 4px;
/* PowerPoint-density: minimal side padding; the icon row flexes to fill */
padding: 4px 7px 6px;
font-size: 12px;
cursor: pointer;
color: inherit;
/* Don't compress button width when space is tight, avoiding CJK labels wrapping character by character (table → vertical) */
flex-shrink: 0;
white-space: nowrap;
}
.rb-big-icon {
min-height: 28px;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-primary);
}
/* Home-tab Lycero AI entry: black circular "+" badge with a dropdown caret,
brand label below (mirrors the sheets Home ribbon). */
/* AI feature buttons next to the entry: purple glyphs, label below */
.ai-feature-icon {
display: grid;
place-items: center;
width: 28px;
height: 28px;
color: var(--color-brand-secondary);
}
.ai-feature-icon svg {
/* 24px renders the 24-unit viewBox 1:1, so the 1.5 stroke paints 1.5px,
keeping the 1:16 stroke standard */
width: 24px;
height: 24px;
}
/* the dropdown chevron sits beside the icon (top row), not the label */
.rb-caret {
flex-shrink: 0;
display: block;
}
.rb-big-icon .rb-caret {
margin-left: 3px;
color: var(--text-dim);
}
.rb-big:hover:not(:disabled) .rb-big-icon {
background: var(--hover);
}
.rb-big:disabled {
opacity: 0.4;
cursor: default;
}
.rb-big.active {
color: var(--text);
}
.rb-big.active .rb-big-icon {
background: var(--active-bg);
}
/* The Lycero AI entry keeps a black label even while the panel is open. */
.rb-big.ai-entry.active {
color: var(--text);
}
/* The AI entry buttons read as one piece: hover/press tint the whole button
(icon + label together), unlike the other tall buttons where only the icon
row is painted. */
.rb-big.ai-entry {
border-radius: 4px;
}
.rb-big.ai-entry:hover:not(:disabled) {
background: var(--hover);
}
.rb-big.ai-entry.active {
/* neutral gray, shared with the docs/sheets Lycero entries */
background: var(--active-bg);
}
.rb-big.ai-entry:hover:not(:disabled) .rb-big-icon,
.rb-big.ai-entry.active .rb-big-icon {
background: transparent;
}
/* hover/open paint only the icon row — the label below
/* AI button: brand logo only — no gray plate behind the icon, label stays black */
.rb-big.rb-ai {
font-size: 11px;
font-weight: 500;
}
.rb-big.rb-ai > span:not(.rb-big-icon) {
margin-top: -1px;
}
.rb-big.rb-ai.active {
color: var(--color-text-primary);
}
.rb-big.rb-ai.active .rb-big-icon,
.rb-big.rb-ai:hover .rb-big-icon {
background: none;
}
/* PowerPoint-style: hover/open paint only the icon row — the label below
* stays outside the gray. The box spans the whole button width (align-self
* stretch + horizontal bleed), not just the icon content. Negative margins
* cancel the bleed so button layout/alignment is unchanged. */
.rb-big .rb-big-icon {
align-self: stretch;
border-radius: 4px;
padding: 3px 4px;
margin: 0 -4px;
}
.rb-col {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
}
/* compact stacked mini buttons (cut/copy/format painter ONLY): 3 × 18px lines up with a big button (57px).
Scoped to .rb-clip-col — .rb-col is also the font group's row container and must keep normal sizing. */
.rb-clip-col {
gap: 0;
}
.rb-clip-col .rb-icon {
height: 20px;
min-width: 24px;
padding: 0 4px;
}
/* PowerPoint-style combined slides group: big new-slide button + stacked
small labeled rows (layout / add section). The column stretches to the big
button's height; 4px top tracks .rb-big's icon row, and the 1px bottom
(rather than the geometric 3px) offsets the row's centered line box so the
add-section text bottom-aligns with the new-slide label (measured) */
.rb-slides-col {
align-items: stretch;
align-self: stretch;
justify-content: space-between;
gap: 0;
padding: 4px 0 1px;
}
/* these rows pair with a big button, so their glyphs use the 20px inline-row
size (not the 14px .rb-small default); 1.8 × 20/24 paints the standard
1.5px stroke at 20px */
.rb-slides-col .rb-small svg {
width: 20px;
height: 20px;
stroke-width: 1.8;
}
.rb-slides-col .rb-small .rb-caret {
width: 10px;
height: 10px;
}
/* ---- Compact ribbon (⌥⌘K / Ctrl+Alt+K), docs parity, see #362 ----
* The middle density: the band stays and every command stays reachable, it
* just drops to icon-only on a shorter band. The band keeps the HARD-fixed
* height contract (switching tabs never resizes the row) and the horizontal
* scroll, so a narrow window still scrolls instead of wrapping.
*/
.ribbon-compact .ribbon-body {
/* same fixed-height contract as the full band, only shorter (docs measured
45px as the smallest that holds its tabs unclipped; slides' tallest
compact content is the 28px font combos, so it fits the same band) */
height: 45px;
padding-top: 5px;
padding-bottom: 1px;
}
.ribbon-compact .rb-big {
/* the label is taken out of flow entirely (below), so the button is just
the icon row plus its padding */
gap: 0;
padding: 2px 5px;
}
.ribbon-compact .rb-big-icon {
min-height: 22px;
flex: none;
}
/* Keep the label in the accessibility tree and in the DOM (Playwright's
* hasText and getByRole(name) both read it) but take it out of the visual
* flow. display: none here would strip the accessible name. */
.ribbon-compact .rb-big > span:not(.rb-big-icon) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* the icon row is the whole button now, so let the hover/open paint cover it */
.ribbon-compact .rb-big .rb-big-icon {
align-self: stretch;
padding: 1px 3px;
margin: 0 -2px;
}
/* Split buttons (paste dropdown, color pickers) paint their hover in two
* inner zones that stretch to the icon row — the extra padding above would
* stack on the zones' own, putting the pair 4px over every plain button. */
.ribbon-compact .rb-split .rb-big-icon {
padding: 0;
}
.ribbon-compact .rb-split .rb-split-main,
.ribbon-compact .rb-split .rb-caret-hit {
padding-top: 1px;
padding-bottom: 1px;
}
/* Groups centre on the shorter band. */
.ribbon-compact .ribbon-group {
padding: 0 3px;
}
/* `.rb-col` stacks rows that cannot fit a short band side by side — the font
* group's two 28px combo rows, the zoom stack, the clipboard mini-column —
* exactly the docs treatment of .rb-col/.rb-font-group. */
.ribbon-compact .rb-col {
flex-direction: row;
align-items: center;
gap: 4px;
}
/* the slides group's stacked rows pair with the big New Slide button; in
* compact there is no pairing height to track anymore */
.ribbon-compact .rb-slides-col {
align-items: center;
align-self: auto;
justify-content: center;
padding: 0;
}
/* Draw tab: the pen tray's pens hang from the tray top with 56px glyphs —
* twice the compact band. Smaller glyphs, less hang; the held pen stays the
* one fully visible. */
.ribbon-compact .pen-tray {
align-self: center;
height: 36px;
}
.ribbon-compact .pen-btn svg {
width: 34px;
height: 34px;
}
.ribbon-compact .pen-btn {
transform: translateY(-7px);
}
.ribbon-compact .pen-btn:hover:not(:disabled) {
transform: translateY(-4px);
}
/* Ink settings stack swatches over widths (42px); side by side like the
* docs compact band. */
.ribbon-compact .ink-settings {
flex-direction: row;
gap: 8px;
}
/* Animations' Timing block stacks three 22px rows (trigger / duration /
* delay = 70px); side by side like the docs compact band. */
.ribbon-compact .rb-anim-timing {
flex-direction: row;
align-items: center;
gap: 4px;
}
/* View tab's Show group is a 3-row checkbox grid (68px); compact flattens it
* to one row and lets the band's horizontal scroll carry the width. */
.ribbon-compact .rb-check-grid {
grid-template-rows: none;
column-gap: 10px;
}
/* Design tab theme cards: 62px preview cards shrink like the docs style
* gallery — the name line goes away and the swatch row carries the card. */
.ribbon-compact .theme-card {
width: 46px;
height: 30px;
padding: 2px 4px;
}
.ribbon-compact .theme-card-aa {
font-size: 12px;
}
.ribbon-compact .theme-card-dot {
width: 6px;
height: 6px;
}
/* same visually-hidden treatment as the rb-big labels: the name stays in the
* accessibility tree (the card's data-tip is the translated theme name) */
.ribbon-compact .theme-card-name {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.rb-small {
display: flex;
align-items: center;
gap: 5px;
border: none;
background: none;
border-radius: 3px;
padding: 3px 8px;
font-size: 12px;
text-align: left;
cursor: pointer;
color: inherit;
white-space: nowrap;
}
.rb-small svg {
flex-shrink: 0;
width: 14px;
height: 14px;
color: var(--text-primary);
/* CSS resizes these below their attr size — re-pin the painted stroke
(2.15 units × 14/24 ≈ 1.25px) */
stroke-width: 2.15;
}
.rb-small:hover:not(:disabled) {
background: var(--hover);
}
.rb-small.active {
background: var(--active-bg);
}
.rb-small.active svg {
color: var(--accent);
}
.rb-small:disabled {
opacity: 0.4;
cursor: default;
}
/* Checkbox rows (View tab's Show group): one column-flow grid so the second
column's rows sit level with the first's (notes ↔ ruler, thumbnail pane ↔
gridlines) instead of each column centering independently */
.rb-check-grid {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(3, auto);
align-content: center;
column-gap: 2px;
row-gap: 4px;
}
.rb-check {
display: flex;
align-items: center;
gap: 6px;
border: none;
background: none;
border-radius: 3px;
padding: 3px 8px 3px 6px;
font-size: 12px;
text-align: left;
cursor: pointer;
color: inherit;
white-space: nowrap;
}
.rb-check:hover:not(:disabled) {
background: var(--hover);
}
.rb-check:disabled {
opacity: 0.4;
cursor: default;
}
.rb-check-box {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 13px;
height: 13px;
border: 1px solid var(--slides-ctl-border);
border-radius: 2px;
background: var(--surface);
color: var(--slides-on-accent);
}
.rb-check.on .rb-check-box {
background: var(--accent);
border-color: var(--accent);
}
.rb-row {
display: flex;
align-items: center;
gap: 3px;
}
.rb-icon {
min-width: 28px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
border: none;
background: none;
border-radius: 3px;
font-size: 15px;
cursor: pointer;
color: inherit;
padding: 0 4px;
}
.rb-icon:hover:not(:disabled) {
background: var(--hover);
}
.rb-icon.active {
background: var(--active-bg);
color: var(--accent);
}
.rb-icon:disabled {
opacity: 0.35;
cursor: default;
}
.rb-icon svg {
display: block;
}
/* pushes an item to the row's right edge (MS: Clear Formatting aligns with row 2's end) */
.rb-push-right {
margin-left: auto;
}
/* dropdown chevron inside compact toggle buttons hugs the glyph */
.rb-icon .rb-caret {
margin-left: 1px;
flex-shrink: 0;
}
.rb-mini-sep {
width: 1px;
height: 20px;
background: var(--border);
margin: 0 5px;
}
/* ================= workspace ================= */
.workspace {
flex: 1;
display: flex;
overflow: hidden;
background: var(--canvas);
}
.slide-list {
width: 120px; /* fallback; App drives the actual width via inline style (drag-resizable) */
flex-shrink: 0;
background: var(--surface);
border-right: 1px solid var(--border);
overflow-y: auto;
padding: 10px;
}
/* drag handle between the thumbnail list and the canvas — resize the sidebar
* horizontally (overlaps the list's right border; cursor-only affordance) */
.thumb-resizer {
width: 6px;
margin-left: -3px;
flex-shrink: 0;
cursor: col-resize; /* horizontal double-arrow on the splitter */
z-index: 20;
background: transparent;
}
/* macOS vibrancy (body.vib set at bootstrap): only the body stays
* transparent for the window material; the workspace, mode containers and
* the thumbnail pane paint solid so content never shows the desktop
* through. */
body.vib {
background: transparent;
}
body.vib .workspace {
background: var(--canvas);
}
body.vib .stage-col,
body.vib .sorter-view {
background: var(--canvas);
}
body.vib .slide-list {
background: var(--slides-rail-bg);
}
.thumb {
background: var(--slides-paper);
border: 2px solid var(--border-strong);
border-radius: 4px;
overflow: hidden;
margin-bottom: 10px;
cursor: pointer;
position: relative;
display: block;
line-height: 0;
}
/* Thumbnail drag-to-reorder: source page translucent, insertion line shown on the drop target's top/bottom edge (box-shadow not clipped by overflow) */
.thumb.dragging {
opacity: 0.4;
}
.thumb.drop-before {
box-shadow: 0 -7px 0 -2.5px var(--accent);
}
.thumb.drop-after {
box-shadow: 0 7px 0 -2.5px var(--accent);
}
.thumb.selected {
border-color: var(--accent);
border-style: dashed;
}
.thumb.active {
border-color: var(--accent);
}
.thumb-num {
position: absolute;
left: 4px;
bottom: 3px;
font-size: 11px;
color: var(--slides-badge-ink);
line-height: 1;
background: var(--slides-badge-bg);
border-radius: 3px;
padding: 1px 4px;
}
/* Paste-options floater button on the just-pasted slide's thumbnail (PowerPoint-style) */
.paste-floater-btn {
position: absolute;
right: 3px;
bottom: 3px;
display: flex;
align-items: center;
gap: 1px;
padding: 2px 3px;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: var(--surface);
color: var(--text);
cursor: pointer;
line-height: 0;
box-shadow: var(--slides-shadow-float);
}
.paste-floater-btn:hover {
background: var(--hover);
}
.paste-floater-caret {
font-size: 8px;
line-height: 1;
}
/* ── Sidebar section grouping ─────────────────────────────────────── */
.section-header {
display: flex;
align-items: center;
gap: 4px;
margin: 2px -4px 8px;
padding: 3px 4px;
border-radius: 4px;
font-size: 12px;
color: var(--text-secondary);
cursor: pointer;
user-select: none;
line-height: 1.3;
}
.section-header:hover {
background: var(--hover);
}
.section-header-none {
cursor: default;
opacity: 0.7;
}
.section-header-none:hover {
background: none;
}
.section-arrow {
flex-shrink: 0;
font-size: 10px;
transition: transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
.section-arrow.open {
transform: rotate(90deg);
}
.section-name {
flex: 1;
min-width: 0;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.section-count {
flex-shrink: 0;
font-size: 11px;
opacity: 0.65;
}
.section-rename-input {
flex: 1;
min-width: 0;
font-size: 12px;
font-weight: 600;
padding: 0 2px;
border: 1px solid var(--accent);
border-radius: 3px;
outline: none;
}
/* the stage stays ltr under an RTL UI: Konva Text inherits this direction */
.stage-wrap {
direction: ltr;
flex: 1;
overflow: auto;
/* 48px top: headroom for the .stage-ai-bar overhanging the slide card, so it
is never clipped by the pane edge at any window/zoom size */
padding: 48px 32px 32px;
display: flex;
/* flex-start + auto margins on the zoom-box: centered (both axes) while it
* fits, but all edges stay scroll-reachable once zoomed content overflows
* (justify-content/align-items: center makes the leading overflow unreachable) */
justify-content: flex-start;
align-items: flex-start;
}
/* SlideCanvas carries a transparent 160px Konva bleed for off-page objects.
* Ignore that implementation-only overflow while the nominal slide fits; at
* larger zoom levels the base overflow:auto rule restores canvas panning. */
.stage-wrap.stage-fits-viewport {
overflow: hidden;
}
.stage-zoom-box {
flex-shrink: 0;
margin: auto;
position: relative;
}
.stage-scale {
display: inline-block;
}
/* ================= start screen ================= */
.start-screen {
flex: 1;
overflow-y: auto;
padding: 9vh 24px 40px;
text-align: center;
background: var(--color-bg-page);
font-family: var(--gs-font-sans);
}
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 34px;
padding: 0 16px;
border: none;
border-radius: 12px;
background: var(--accent);
color: var(--slides-on-accent);
font-size: 13px;
cursor: pointer;
}
.btn-primary:hover:not(:disabled) {
background: var(--accent-dark);
}
.btn-primary:disabled {
opacity: 0.5;
cursor: default;
}
.btn-primary.btn-lg,
.btn-secondary.btn-lg {
height: 42px;
padding: 0 30px;
font-size: 14px;
}
.btn-secondary {
border: 1px solid var(--border-strong);
background: var(--surface);
color: var(--text);
border-radius: 12px;
cursor: pointer;
font-size: 13px;
}
.btn-secondary:hover {
border-color: var(--accent);
color: var(--accent);
}
.btn-ghost {
border: none;
background: none;
color: var(--accent);
font-size: 13px;
cursor: pointer;
padding: 4px 8px;
border-radius: 12px;
}
.btn-ghost:hover {
background: var(--hover);
}
.recent {
width: 520px;
max-width: 90vw;
margin: 44px auto 0;
text-align: left;
}
.recent-title {
font-size: 12px;
color: var(--text-dim);
margin-bottom: 8px;
font-weight: 600;
}
.recent-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
text-align: left;
padding: 9px 12px;
margin-bottom: 3px;
border: none;
border-radius: 4px;
background: var(--surface);
font-size: 13px;
color: var(--text);
cursor: pointer;
}
.recent-item:hover {
background: var(--active-bg);
}
.recent-path {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ================= status bar ================= */
.status-bar {
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 12px;
height: 24px;
font-size: 11.5px;
color: var(--text-dim);
background: var(--slides-statusbar-bg);
border-top: 1px solid var(--slides-statusbar-border);
}
.status-left {
display: flex;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.status-item {
margin-right: 14px;
flex-shrink: 0;
}
.status-msg {
opacity: 0.85;
overflow: hidden;
text-overflow: ellipsis;
}
.status-right {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.zoom-btn {
border: none;
background: none;
color: inherit;
font-size: 14px;
cursor: pointer;
width: 20px;
height: 20px;
border-radius: 3px;
line-height: 1;
}
.zoom-btn:hover {
background: var(--slides-statusbar-hover);
}
/* Same self-drawn treatment as the format-pane sliders (.fp-slider): quiet
* two-tone track, white knob with the shared contact-ring shadow. The thumb
* stays at the native 16px so only its color/shadow changes. */
.zoom-slider {
appearance: none;
width: 110px;
height: 3px;
padding: 0;
border: none;
border-radius: 2px;
background: linear-gradient(
to right,
var(--slides-ctl-border) var(--zoom-pct, 0%),
var(--slides-swatch-ring) var(--zoom-pct, 0%)
);
}
.zoom-slider::-webkit-slider-thumb {
appearance: none;
width: 16px;
height: 16px;
border: none;
border-radius: 50%;
background: var(--surface);
box-shadow: var(--slides-thumb-shadow);
}
.zoom-value {
min-width: 38px;
text-align: right;
}
/* Status-bar quick toggle button for notes */
.status-notes-btn {
display: inline-flex;
align-items: center;
gap: 4px;
border: none;
background: none;
color: inherit;
font-size: 11px;
/* 20px tall in the 24px status bar: the active/hover block keeps 2px of
* air above and below instead of touching the bar edges */
height: 20px;
padding: 0 5px;
border-radius: 3px;
cursor: pointer;
margin-right: 8px;
transition:
background 0.1s,
color 0.1s;
}
.status-notes-btn:hover {
background: var(--slides-statusbar-hover);
}
/* Active = neutral pressed gray, not accent (PPT's Notes button stays plain);
* translucent wash so the shade matches the ribbon's selected gray on the
* darker statusbar background */
.status-notes-btn.on {
background: var(--slides-statusbar-active);
}
/* Start-show-from-current-slide (PowerPoint keeps this next to the zoom slider) */
.status-play-btn {
display: inline-flex;
align-items: center;
border: none;
background: none;
color: inherit;
padding: 1px 4px;
border-radius: 3px;
cursor: pointer;
margin-right: 8px;
}
.status-play-btn:hover {
background: var(--hover);
}
/* ================= AI panel (Copilot-style pane, isomorphic to docs) ================= */
.ai-panel {
position: relative;
width: 360px;
flex-shrink: 0;
display: flex;
flex-direction: column;
background: var(--surface);
border-left: var(--ai-panel-border-left, 0px) solid var(--border);
border-right: var(--ai-panel-border-right, 1px) solid var(--border);
box-shadow: var(--slides-shadow-copilot);
font-family: var(--gs-font-sans);
color: var(--color-text-primary);
}
/* drag handle on the panel's right edge — resize the panel horizontally (no highlight, cursor-only affordance) */
.ai-panel-resizer {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 6px;
cursor: col-resize;
z-index: 20;
background: transparent;
}
/* while dragging: keep the col-resize cursor everywhere, no text selection */
.ai-panel-resizing {
cursor: col-resize;
user-select: none;
}
.ai-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 10px 12px 10px 14px;
border-bottom: 1px solid var(--border);
font-weight: 600;
font-size: 14px;
}
.ai-panel-title {
display: flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}
.ai-panel-header-actions {
display: flex;
align-items: center;
gap: 2px;
min-width: 0;
}
.ai-header-btn {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
flex-shrink: 0;
border: none;
background: none;
border-radius: 6px;
color: var(--text-dim);
cursor: pointer;
padding: 0;
}
.ai-header-btn:hover {
background: var(--hover);
color: var(--text);
}
.ai-header-btn.ai-undo-btn {
width: auto;
gap: 4px;
padding: 0 7px;
font: inherit;
font-size: 12px;
}
.ai-header-btn:disabled {
opacity: 0.45;
cursor: default;
}
/* Collapsed state: vertical bar on the left edge */
.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);
}
.ai-rail-text {
writing-mode: vertical-rl;
font-size: 12px;
letter-spacing: 2px;
color: var(--text-dim);
}
.ai-chat {
flex: 1;
overflow-y: auto;
padding: 32px 16px;
display: flex;
flex-direction: column;
/* uniform 16px flex gap between blocks, messages carry no margin */
gap: 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);
}
/* Empty-state title/body: same specs as the docs AI panel (family/size/color); copy unchanged */
.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;
}
/* clickable starter prompts in the empty state — suggestion chips,
* same spec as the docs AI panel: 30px-radius outline pills, 13px/400 */
.ai-starter-list {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-top: 16px;
}
.ai-starter {
padding: 8px 16px;
border-radius: 999px;
border: 1px solid var(--color-border-default);
background: var(--color-bg-page);
font-size: 13px;
font-weight: 400;
line-height: 1.4;
color: var(--color-text-primary);
cursor: pointer;
transition: all var(--transition-fast);
}
.ai-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 (agent-shell spec): user = gray bubble, 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;
word-break: break-word;
}
.ai-md {
white-space: normal;
}
.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 ul,
.ai-md ol {
margin-bottom: 20px;
padding-left: 20px;
}
.ai-md li {
margin-left: 20px;
line-height: 28px;
}
.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;
}
/* inline code: neutral gray chip (deliberately not red), 2px below body size */
.ai-md code {
padding: 1px 6px;
border-radius: 4px;
background: var(--color-bg-subtle);
color: var(--color-text-secondary);
font-size: 14px;
font-family: var(--gs-font-mono, 'Be Vietnam Pro', 'Segoe UI', 'Cascadia Mono', Consolas, sans-serif);
}
/* User pill: gray, fully rounded (no tail) */
.ai-msg-user {
align-self: flex-end;
background: var(--color-bg-subtle);
color: var(--color-text-primary);
padding: 8px 16px;
border-radius: 14px;
max-width: 80%;
line-height: 1.5;
}
.ai-msg-assistant {
align-self: stretch;
background: none;
border: none;
padding: 0;
max-width: 100%;
color: var(--color-text-primary);
}
/* Collapsible tool-activity group */
.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(--slides-focus-ring);
border-radius: 4px;
}
.ai-work-group-summary.running {
color: var(--color-text-secondary);
}
.ai-work-group-summary.running .ai-work-group-label {
animation: ai-summary-pulse 1500ms linear infinite;
}
@keyframes ai-summary-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.45;
}
}
.ai-work-group-body {
align-self: stretch;
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-work-group-body.open {
grid-template-rows: 1fr;
}
.ai-work-group-body-inner {
overflow: hidden;
min-height: 0;
padding: 0 0 0 8px;
transition: padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-work-group-body.open .ai-work-group-body-inner {
padding: 4px 0 8px 8px;
}
/* Step rows inside the group: 20px icon slot + 1px connector */
.ai-step-row {
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 8px 0;
color: var(--color-text-tertiary);
animation: ai-row-ease-in 320ms ease-out;
}
.ai-step-row:not(:last-child) {
padding-bottom: 16px;
}
.ai-step-row:not(:last-child)::after {
content: '';
position: absolute;
left: 9.5px;
top: 32px;
bottom: -4px;
width: 1px;
background: var(--color-border-default);
}
.ai-step-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text-tertiary);
}
.ai-step-icon.done {
color: var(--color-text-secondary);
}
.ai-step-icon.error {
color: var(--slides-ai-step-error);
}
.ai-step-icon.running svg {
animation: ai-hourglass-flip 1.8s ease-in-out infinite;
}
@keyframes ai-hourglass-flip {
0%,
12% {
transform: rotate(0);
}
44%,
56% {
transform: rotate(180deg);
}
88%,
100% {
transform: rotate(360deg);
}
}
.ai-step-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 1px;
}
.ai-step-title {
font-size: 14px;
line-height: 1.3;
color: var(--color-text-secondary);
text-align: left;
background: none;
border: none;
padding: 0;
margin: 0;
font-family: inherit;
}
.ai-step-title.clickable {
cursor: pointer;
transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-step-title.clickable:hover {
color: var(--color-text-primary);
}
.ai-step-title.clickable:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--slides-focus-ring);
border-radius: 4px;
}
/* Step detail opens instantly, no animation */
.ai-step-detail {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
@media (prefers-reduced-motion: reduce) {
.ai-step-row,
.ai-step-icon.running svg,
.ai-work-group-summary.running .ai-work-group-label {
animation: none;
}
}
/* Running tool row: two grow/shrink brand dots */
.ai-tool-chip-spinner {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 2px;
height: 12px;
}
.ai-tool-chip-spinner::before,
.ai-tool-chip-spinner::after {
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--color-brand-secondary);
}
.ai-tool-chip-spinner::before {
animation: ai-tool-dot-grow 2s infinite;
}
.ai-tool-chip-spinner::after {
animation: ai-tool-dot-shrink 2s infinite;
}
@keyframes ai-tool-dot-grow {
0%,
100% {
transform: scale(0.333);
opacity: 0.45;
}
50% {
transform: scale(1);
opacity: 1;
}
}
@keyframes ai-tool-dot-shrink {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(0.333);
opacity: 0.45;
}
}
@media (prefers-reduced-motion: reduce) {
.ai-tool-chip-spinner::before,
.ai-tool-chip-spinner::after {
animation: none;
opacity: 0.65;
}
}
/* Elapsed run time next to the typing indicator */
.ai-typing-row {
display: inline-flex;
align-items: baseline;
gap: 8px;
}
.ai-elapsed {
font-size: 14px;
color: var(--text-dim);
font-variant-numeric: tabular-nums;
}
/* caret: text glyph right after the label, always visible, rotates open */
.ai-tool-chip-caret {
margin-left: 4px;
opacity: 0.7;
display: inline-block;
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-tool-chip-caret.open {
transform: rotate(90deg);
}
/* stream rows ease in */
@keyframes ai-row-ease-in {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Generic tool output container: subtle gray card, no border */
.ai-tool-output {
background: var(--color-bg-subtle);
border: none;
border-radius: 12px;
font-family: var(--gs-font-mono, 'Be Vietnam Pro', 'Segoe UI', 'Cascadia Mono', Consolas, sans-serif);
font-size: 14px;
color: var(--color-text-primary);
max-height: 300px;
overflow-y: auto;
width: 100%;
box-sizing: border-box;
}
/* pre-wrap plain text output */
.ai-tool-output-pre {
padding: 12px 16px;
white-space: pre-wrap;
word-break: break-word;
line-height: 1.5;
}
/* Web search: one per line, clickable URLs */
.ai-tool-output-text {
padding: 6px 10px;
line-height: 1.55;
}
.ai-tool-output-line {
padding: 1px 0;
word-break: break-word;
}
.ai-tool-output-link {
color: var(--accent);
text-decoration: underline;
cursor: pointer;
word-break: break-all;
}
.ai-tool-output-link:hover {
opacity: 0.8;
}
/* display.kind='links': link list (title + clickable link per row) */
.ai-tool-output-links {
padding: 6px 10px;
line-height: 1.6;
}
.ai-tool-output-link-row {
padding: 2px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-tool-output-link-row .ai-tool-output-link {
font-size: 11.5px;
}
/* Image search: thumbnail grid */
.ai-tool-output-images {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px;
}
.ai-tool-output-img-btn {
background: none;
border: 1px solid var(--border);
border-radius: 4px;
padding: 0;
cursor: pointer;
overflow: hidden;
flex-shrink: 0;
width: 96px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.15s;
}
.ai-tool-output-img-btn:hover {
border-color: var(--accent);
}
.ai-tool-output-img-btn img {
max-width: 96px;
max-height: 72px;
object-fit: cover;
display: block;
}
/* Thinking indicator (white background, no container):
* phase one = two bouncing blue dots (alternating small/large); phase two = shimmering "Thinking…" text + streaming caret block */
.ai-typing {
display: inline-flex;
align-items: center;
padding: 4px 0;
font-size: 15px;
} /* 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(--slides-shimmer-base);
-webkit-text-fill-color: transparent;
background: var(--slides-shimmer-base)
linear-gradient(
to left,
var(--slides-shimmer-base),
var(--slides-shimmer-hi) 50%,
var(--slides-shimmer-base)
);
background-clip: text;
-webkit-background-clip: text;
background-repeat: no-repeat;
background-size: 70% 100%;
animation: ai-thinking-shimmer 1.2s infinite alternate linear;
}
.ai-typing-elapsed {
font-variant-numeric: tabular-nums;
}
@keyframes ai-thinking-shimmer {
0% {
background-position: -100% top;
}
100% {
background-position: 250% top;
}
}
.ai-typing-dots {
height: 12px;
display: flex;
gap: 2px;
}
.ai-typing-dot-slot {
display: flex;
justify-content: center;
align-items: center;
width: 12px;
}
.ai-typing-dot-grow,
.ai-typing-dot-shrink {
background: var(--color-brand-secondary);
border-radius: 50%;
}
.ai-typing-dot-grow {
animation: ai-dot-grow 2s infinite;
}
.ai-typing-dot-shrink {
animation: ai-dot-shrink 2s infinite;
}
@keyframes ai-dot-grow {
0%,
100% {
width: 4px;
height: 4px;
opacity: 0.45;
}
50% {
width: 12px;
height: 12px;
opacity: 1;
}
}
@keyframes ai-dot-shrink {
0%,
100% {
width: 12px;
height: 12px;
opacity: 1;
}
50% {
width: 4px;
height: 4px;
opacity: 0.45;
}
}
/* streaming caret at the tail of streaming assistant text */
.ai-msg-streaming .ai-md > :last-child::after {
content: '';
display: inline-block;
width: 6px;
height: 1em;
margin-left: 2px;
border-radius: 1px;
background: var(--color-text-secondary);
vertical-align: text-bottom;
animation: ai-caret-blink 900ms steps(1, end) infinite;
}
@keyframes ai-caret-blink {
0%,
50% {
opacity: 1;
}
51%,
100% {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.ai-typing-label,
.ai-msg-streaming .ai-md > :last-child::after {
animation: none;
}
}
/* Message hover actions: borderless 30px icon buttons, radius 8, hover = subtle gray fill */
.ai-msg-toolbar {
display: flex;
gap: 4px;
margin-top: 8px;
}
.ai-msg-tool-btn {
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:not(:disabled) {
background: var(--color-bg-subtle);
}
.ai-msg-tool-btn:disabled {
opacity: 0.45;
cursor: default;
}
/* Hairline before the roll-back action; hidden unless an icon action precedes it */
.ai-rollback-sep {
display: none;
width: 1px;
height: 14px;
align-self: center;
background: var(--border);
}
.ai-msg-tool-btn ~ .ai-rollback-sep {
display: block;
}
/* Quiet roll-back in the message toolbar (after copy/regenerate): dim at rest, solid on hover */
.ai-rollback-btn {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
height: 30px;
border: none;
background: none;
color: var(--text-dim);
font-size: 12px;
font-family: inherit;
padding: 0 8px;
border-radius: 6px;
cursor: pointer;
}
.ai-rollback-btn:hover:not(:disabled) {
color: var(--text);
background: var(--hover);
}
.ai-rollback-btn:disabled {
opacity: 0.5;
cursor: default;
}
.ai-msg-tool-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--slides-focus-ring-blue);
}
/* Tooltip: dark pill under the button, 0.3s hover delay */
.ai-msg-tool-btn {
position: relative;
}
/* Global press feedback */
.ai-msg-tool-btn:active {
filter: brightness(0.88);
transform: scale(0.98);
}
.ai-msg-error {
margin-top: 6px;
color: var(--slides-ai-error);
font-size: 13px;
}
.ai-composer {
padding: 8px 12px 12px;
background: var(--surface);
}
.ai-composer-top {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 7px;
}
.ai-scope-hint {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 10px;
border-radius: 999px;
background: var(--active-bg);
font-size: 11.5px;
color: var(--accent);
font-weight: 500;
}
.ai-scope-hint::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
}
/* composer card — same spec as the Excel panel: 16px radius, default border, float shadow */
.ai-input-box {
border: 1px solid var(--color-border-default);
border-radius: var(--radius-16);
background: var(--color-bg-page);
box-shadow: var(--slides-shadow-composer);
transition:
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}
/* Focus state: no colored highlight, just a one-step darker border as the cue */
.ai-input-box:focus-within {
border-color: var(--color-border-strong);
}
/* textarea: 16px / 24px fixed line-height (chat body size); resting height matches the apps/sheets panel */
.ai-input-box textarea {
display: block;
width: 100%;
resize: none;
border: none;
background: none;
border-radius: var(--radius-16) var(--radius-16) 0 0;
/* vertical gaps live on margin, not padding: textarea padding scrolls away
* with the content, so clipped lines would sit flush against chips/footer */
padding: 0 14px;
margin: 12px 0 4px;
font-size: 14px;
font-family: inherit;
line-height: 24px;
outline: none;
color: var(--color-text-primary);
min-height: 48px;
max-height: 168px;
overflow-y: auto;
}
.ai-input-box textarea::placeholder {
color: var(--color-text-tertiary);
}
.ai-input-footer {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 8px 8px 10px;
}
.ai-input-footer .ai-send-btn {
margin-left: auto;
}
/* Attach button inside the panel composer: brand paperclip art,
* 20×20 (5/9 of the 36px enter button). */
.ai-composer .ai-attach-btn {
width: 20px;
height: 20px;
border: none;
border-radius: 0;
}
.ai-composer .ai-attach-btn img {
display: block;
width: 100%;
height: 100%;
}
.ai-composer .ai-attach-btn:hover {
background: transparent;
filter: brightness(0.7);
}
/* attach — thin-stroked circular icon button (composer left-slot idiom) */
.ai-attach-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex-shrink: 0;
border: 1px solid var(--color-border-default);
background: transparent;
border-radius: 999px;
color: var(--color-text-secondary);
cursor: pointer;
padding: 0;
transition: all var(--transition-fast);
}
.ai-attach-btn:hover {
background: var(--color-bg-subtle);
color: var(--color-text-primary);
}
/* attachment chips above the composer */
.ai-attachments {
display: flex;
gap: 8px;
/* single row inside the prompt box, above the textarea (Lycero composer style):
extra images run past the box edge and scroll horizontally.
scroll (not auto) + zero bottom padding: the always-present 4px scrollbar lane
doubles as the bottom padding, so overflowing never grows the strip and
shifts its content up */
overflow-x: scroll;
/* side insets are transparent borders, not padding: overflow clips at the
padding edge, so side padding would let scrolled items slide flush against
the box edges — borders keep the 14px gaps while scrolling */
padding: 13px 0 0;
border-inline: 14px solid transparent;
margin-bottom: -6px;
}
.ai-attachments > * {
flex-shrink: 0;
}
/* The 4px scrollbar lane is always reserved (no layout jump when it appears);
the thumb is painted only while scrolling (.is-scrolling from the strip's onScroll) */
.ai-attachments::-webkit-scrollbar {
height: 4px;
}
.ai-attachments::-webkit-scrollbar-thumb {
border-radius: 2px;
background: transparent;
}
.ai-attachments.is-scrolling::-webkit-scrollbar-thumb {
background: var(--slides-scroll-thumb);
}
/* Image attachments: square thumbnail with a round dark remove button on its corner */
.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: -10px;
right: -2px;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--slides-chip-remove-bg);
color: var(--slides-chip-remove-ink);
font-size: 15px;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
.ai-attachment-thumb-remove:hover {
background: var(--slides-chip-remove-hover);
}
/* The card's 1px border shifts its absolutely-positioned button inward by 1px
on both axes; land the borderless thumbs' button on the exact same spot */
.ai-attachment-thumb .ai-attachment-thumb-remove {
top: -9px;
right: -1px;
}
/* image thumb before its preview arrives (or when reading fails): neutral tile + type icon */
.ai-attachment-thumb-pending {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 12px;
background: var(--slides-att-bg);
}
.ai-attachment-thumb .ai-attachment-thumb-pending img {
width: 26px;
height: 26px;
}
/* Non-image attachments (pdf, xlsx, …): fixed-width bordered card — brand type
icon + truncated name and size, same height and remove button as the thumbs */
.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(--slides-att-border);
border-radius: 12px;
background: var(--slides-att-bg);
}
/* the type icon sits in its own bordered white tile, like the Lycero card */
.ai-attachment-card-icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--color-bg-page);
}
.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(--color-text-primary);
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-attachment-card-size {
margin-top: 4px;
font-size: 11px;
color: var(--color-text-tertiary);
}
/* attachments echoed on a sent user message (read-only: no remove button, smaller thumbs) */
.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-attachment-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 4px 2px 9px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--slides-chip-bg);
font-size: 11.5px;
color: var(--text);
max-width: 100%;
}
.ai-attachment-chip svg {
flex-shrink: 0;
color: var(--accent);
}
.ai-attachment-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border: none;
border-radius: 50%;
background: none;
color: var(--text-dim);
font-size: 13px;
line-height: 1;
cursor: pointer;
padding: 0;
}
.ai-attachment-remove:hover {
background: var(--hover);
color: var(--text);
}
.ai-attach-notice {
margin-bottom: 7px;
font-size: 11.5px;
color: var(--slides-ai-error);
}
/* ── AI element edit queue ─────────────────────────────────────────────── */
/* Anchored annotation popover: fixed-size, mounted at the app root so the
* canvas zoom transform never scales it */
.ai-ask-trigger {
position: fixed;
z-index: 59;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--color-ai-action);
font-size: 14px;
font-weight: 500;
box-shadow: var(--slides-shadow-popup);
cursor: pointer;
}
.ai-ask-trigger:hover {
background: var(--hover);
}
.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(--slides-shadow-popup);
}
.ai-ask-pop-close {
position: absolute;
top: 10px;
right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
color: var(--text-dim);
cursor: pointer;
}
.ai-ask-pop-close:hover {
background: var(--hover);
color: var(--text);
}
.ai-ask-pop-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-muted);
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(--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(--text-secondary);
}
.ai-ask-cancel:hover {
background: var(--hover);
}
.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(--surface-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-muted);
}
.ai-queue-fold {
margin-left: auto;
display: inline-flex;
padding: 2px;
border: none;
background: transparent;
color: var(--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-muted);
}
.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(--text-tertiary);
}
.ai-queue-page {
flex-shrink: 0;
padding: 1px 6px;
border-radius: 999px;
background: var(--active-bg);
font-size: 10.5px;
color: var(--text-secondary);
}
.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-muted);
}
.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(--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-muted);
}
.ai-queue-discard {
padding: 4px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-6);
background: transparent;
color: var(--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(--slides-on-accent);
font-size: 11.5px;
cursor: pointer;
}
.ai-queue-send:disabled,
.ai-queue-discard:disabled {
opacity: 0.45;
cursor: default;
}
/* whole-panel drop target highlight */
.ai-panel-dragover {
outline: 2px dashed var(--accent);
outline-offset: -4px;
}
.ai-input-hint {
font-size: 11px;
color: var(--text-muted);
user-select: none;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* icon-only enter key: transparent button chrome, visuals come from brand-supplied PNGs
* (gray arrow = disabled, black arrow = enabled), 36×36, same as the apps/sheets panel */
.ai-send-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
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);
}
/* ================= modal (AI settings) ================= */
.modal-backdrop {
position: fixed;
inset: 0;
background: var(--slides-mask-bg);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
.modal {
width: 440px;
background: var(--surface);
border-radius: 16px;
padding: 22px 24px;
box-shadow: var(--slides-shadow-modal);
}
.modal h2 {
margin: 0 0 16px;
font-size: 17px;
}
.modal label {
display: block;
font-size: 12px;
color: var(--text-dim);
margin-bottom: 12px;
}
/* Explanatory sentence under a dialog heading, above its controls */
.modal-note {
margin: -6px 0 12px;
font-size: 12px;
line-height: 1.5;
color: var(--text-dim);
}
/* The `{{label}}` the model will read in place of the words, shown as it is typed */
.redact-preview {
margin-bottom: 12px;
padding: 8px 10px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface-subtle);
color: var(--text-dim);
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
font-size: 12px;
word-break: break-all;
user-select: all;
}
/* A withheld run while editing: the underline the mark stands for, plus a tint so a long
withheld span reads as one thing. The canvas draws the underline from the model. */
.slide-text-editor [data-redact] {
background: var(--surface-subtle);
border-bottom: 1px solid var(--border-strong);
}
.modal input,
.modal select {
display: block;
width: 100%;
margin-top: 4px;
height: 34px;
border: 1px solid var(--border-strong);
border-radius: 4px;
padding: 0 10px;
font-size: 13px;
outline: none;
background: var(--surface);
}
.modal input:focus,
.modal select:focus {
border-color: var(--accent);
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 18px;
}
/* Lycero DS modal footer buttons: secondary = bg-subtle, primary = black (#232425) */
.modal-actions button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 0 14px;
border: 1px solid var(--color-border-default);
border-radius: 12px;
background: var(--color-bg-page);
color: var(--color-text-primary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.modal-actions button:hover:not(:disabled) {
background: var(--color-bg-subtle);
color: var(--color-text-primary);
}
.modal-actions button:active:not(:disabled) {
filter: brightness(0.88);
transform: scale(0.98);
}
.modal-actions button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--slides-focus-ring);
}
.modal-actions button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.modal-actions button.primary,
.modal-actions .btn-primary {
border-color: var(--color-btn-primary);
background: var(--color-btn-primary);
color: var(--color-btn-primary-text);
}
.modal-actions button.primary:hover:not(:disabled),
.modal-actions .btn-primary:hover:not(:disabled) {
border-color: var(--color-btn-primary-hover);
background: var(--color-btn-primary-hover);
color: var(--color-btn-primary-text);
}
.modal-actions .dlg-danger {
background: none;
color: var(--color-error);
}
.modal-actions .dlg-danger:hover:not(:disabled) {
filter: none;
background: var(--slides-error-bg);
color: var(--color-error);
}
.provider-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 16px;
}
.provider-tab {
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid var(--border-strong);
background: var(--surface);
border-radius: 999px;
padding: 5px 13px;
font-size: 12.5px;
cursor: pointer;
color: inherit;
}
.provider-tab:hover {
border-color: var(--accent);
}
.provider-tab-active {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, var(--surface));
color: var(--accent);
font-weight: 600;
}
.provider-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--slides-ok);
}
/* ================= format pane ================= */
.format-pane {
width: 260px;
flex-shrink: 0;
display: flex;
flex-direction: column;
background: var(--surface);
border-left: 1px solid var(--border);
font-family: 'Segoe UI', var(--ui-cjk), sans-serif;
}
.fp-empty {
padding: 24px 16px;
color: var(--text-dim);
font-size: 12.5px;
line-height: 1.8;
text-align: center;
}
.fp-body {
padding: 10px 14px;
overflow-y: auto;
}
/* First section heading in the body: tightened subtabs → content gap
* (10px body pad + 5.6px margin ≈ 15.6px instead of 10 + 14 = 24) */
.fp-body > .fp-sec:first-child,
.fp-body > .fp-section:first-child {
margin-top: 5.6px;
}
/* 形状选项 / 文本选项 primary tabs under the pane header (Lycero style:
left-aligned text tabs, active = bold + text-colored underline) */
.fp-tabs {
display: flex;
flex-shrink: 0;
gap: 18px;
padding: 2px 14px 0;
border-bottom: 1px solid var(--border);
}
.fp-tab {
min-width: 0;
padding: 7px 1px 8px;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
background: none;
color: var(--text-dim);
font-size: 13px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
}
.fp-tab:hover {
color: var(--text);
}
.fp-tab.active {
color: var(--accent);
font-weight: 700;
border-bottom-color: var(--accent);
}
/* Second-level tabs (填充与线条 / 效果 / 大小与属性 …): Lycero segmented pill track —
pills sit in one rounded gray track; active = accent-filled pill. Long locales
(fr/de/es labels exceed the 260px pane) wrap onto a second row instead of
clipping at the pane edge; 16px ≈ the stadium radius at single-row height. */
.fp-subtabs {
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
gap: 2px;
width: fit-content;
max-width: calc(100% - 12px);
margin: 10px 6px 0;
padding: 3px;
border-radius: 16px;
background: var(--hover);
}
.fp-subtab {
padding: 4px 14px;
white-space: nowrap;
border: none;
border-radius: 999px;
background: none;
color: var(--text-dim);
font-size: 12.5px;
line-height: 1.5;
font-family: inherit;
cursor: pointer;
}
.fp-subtab:hover:not(.active) {
background: var(--active-bg);
}
.fp-subtab.active {
background: var(--accent);
color: var(--slides-on-accent);
}
.fp-section {
font-size: 11.5px;
font-weight: 600;
color: var(--text-dim);
margin: 14px 0 6px;
padding-bottom: 3px;
border-bottom: 1px solid var(--border);
}
/* Collapsible PPT-style section header (填充 / 线条): chevron + label over a divider */
.fp-sec {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
margin: 27.8px 0 6px;
padding: 0 0 3px;
border: none;
background: none;
color: var(--text);
font-size: 12px;
font-weight: 600;
font-family: inherit;
text-align: left;
cursor: pointer;
}
.fp-sec:hover {
color: var(--accent);
}
.fp-sec-caret {
font-size: 10px;
color: var(--text-dim);
}
/* PPT-style fill/line mode radio list */
.fp-radios {
display: flex;
flex-direction: column;
gap: 7px;
margin: 6px 0 10px;
}
.fp-radio {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: var(--text);
}
.fp-radio input {
margin: 0;
accent-color: var(--accent);
cursor: pointer;
}
.fp-btnrow {
display: flex;
gap: 6px;
}
/* PPT-style checkbox option row (锁定纵横比 / 相对于图片原始尺寸 …); one per line,
unlike the inline .fp-check used by the background pane */
.fp-checkrow {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
font-size: 12.5px;
color: var(--text);
cursor: pointer;
}
.fp-checkrow input {
margin: 0;
accent-color: var(--accent);
cursor: pointer;
}
.fp-checkrow:has(input:disabled) {
color: var(--text-dim);
cursor: default;
}
.fp-checkrow input:disabled {
cursor: default;
}
/* 预设渐变 tiles (gradients themselves are document fill previews, painted inline) */
.fp-gpreset {
width: 26px;
height: 26px;
padding: 0;
border: 1px solid var(--border);
border-radius: 3px;
cursor: pointer;
}
.fp-gpreset:hover {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.fp-gpreset.sel {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
/* 角度 row: rotation dial + −/value°/+ stepper (PPT Mac style) */
.fp-angle {
display: flex;
align-items: center;
gap: 8px;
}
.fp-angle.off {
opacity: 0.45;
}
.fp-dial {
position: relative;
width: 26px;
height: 26px;
padding: 0;
border: 1px solid var(--border-strong);
border-radius: 50%;
background: var(--surface);
cursor: pointer;
}
.fp-dial:disabled {
cursor: default;
}
/* hollow ring indicator orbiting the dial center at the current angle */
.fp-dial-dot {
position: absolute;
top: 50%;
left: 50%;
width: 7px;
height: 7px;
margin: -3.5px 0 0 -3.5px;
border: 1.5px solid var(--text);
border-radius: 50%;
background: none;
pointer-events: none;
}
/* one seamless rounded box: − | value° (centered) | + */
.fp-stepper {
display: flex;
align-items: center;
height: 26px;
min-width: 128px;
border: 1px solid var(--border-strong);
border-radius: 7px;
background: var(--surface);
}
.fp-stepper button {
width: 26px;
height: 24px;
padding: 0;
border: none;
background: none;
color: var(--text);
font-size: 14px;
font-family: inherit;
cursor: pointer;
}
.fp-stepper button:disabled {
color: var(--text-dim);
cursor: default;
}
.fp-stepper button:hover:not(:disabled) {
background: var(--hover);
}
/* beat the generic .fp-prow input box (declared later in this file) */
.fp-prow .fp-stepper input {
width: 5ch; /* fallback; the component sets width to fit the value */
height: auto;
margin-left: auto;
padding: 0;
border: none;
border-radius: 0;
background: none;
color: var(--text);
font-size: 12.5px;
text-align: right;
-moz-appearance: textfield;
appearance: textfield;
}
.fp-stepper input::-webkit-outer-spin-button,
.fp-stepper input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.fp-stepper-deg {
margin-right: auto;
padding: 3px 0 0 2px;
align-self: flex-start;
color: var(--text);
font-size: 10px;
}
/* Value + trailing unit + stacked ▴▾ spinner (PPT-style "0.75 pt ↕" width box; same size as the % boxes) */
.fp-prow .fp-unitstep {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
width: 74px;
height: 26px;
border: 1px solid var(--border-strong);
border-radius: 3px;
background: var(--surface);
}
/* beat the generic .fp-prow input box (declared later in this file).
The value hugs its content; 1:3 flex spacers around the value+unit group
pin it to a fixed 5px left inset. */
.fp-prow .fp-unitstep::before {
content: '';
/* fixed left inset: the value group pins left, spare space goes right */
flex: none;
width: 5px;
}
.fp-prow .fp-unitstep::after {
content: '';
flex: 1;
order: 0;
}
.fp-prow .fp-unitstep .fp-unitstep-btns {
order: 1;
}
.fp-prow .fp-unitstep input {
flex: 0 1 auto;
field-sizing: content;
min-width: 2ch;
width: auto;
height: auto;
padding: 0;
border: none;
border-radius: 0;
background: none;
color: var(--text);
text-align: left;
}
.fp-unitstep input::-webkit-outer-spin-button,
.fp-unitstep input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Over-limit balloon above the width box, in the shared ScreenTip visual language */
.fp-limit-tip {
position: absolute;
right: 0;
bottom: calc(100% + 6px);
z-index: 20;
width: max-content;
max-width: 200px;
padding: 5px 10px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface);
color: var(--text);
font-size: 12px;
line-height: 1.45;
box-shadow: var(--shadow-modal-strong);
pointer-events: none;
}
/* right pad 1.5px: chevron glyph right edge lands 6px from the box's outer
* edge (1px border + 1.5px + 3.5px glyph inset), on the shared caret line */
.fp-unitstep-btns {
display: flex;
flex-direction: column;
flex-shrink: 0;
justify-content: center;
gap: 1px;
padding: 2px 1.5px 2px 0;
}
.fp-unitstep-btns button {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 10px;
padding: 0;
border: none;
border-radius: 3px;
background: none;
color: var(--text-dim);
cursor: pointer;
}
.fp-unitstep-btns button:disabled {
opacity: 0.35;
cursor: default;
}
.fp-unitstep-btns button:hover:not(:disabled) {
background: var(--hover);
color: var(--text);
}
/* Focus popover, anchored under the 射线/矩形 style tile */
.fp-dirwrap {
position: relative;
}
.fp-dir-pop {
position: absolute;
top: 30px;
right: 0;
z-index: 30;
display: flex;
gap: 6px;
padding: 8px;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--surface);
box-shadow: var(--slides-shadow-popup);
}
/* 渐变光圈 stop strip: gradient bar + selectable stop markers straddling its bottom edge */
.fp-gstops {
position: relative;
margin: 8px 0 16px;
padding-bottom: 8px;
}
.fp-gstops-bar {
height: 22px;
border: 1px solid var(--border-strong);
}
.fp-gstop {
position: absolute;
top: 15px;
width: 13px;
height: 13px;
padding: 0;
border: 1px solid var(--border-strong);
border-radius: 2px;
transform: translateX(-50%);
cursor: pointer;
/* draggable along the bar: keep pointermove events, don't let the browser pan */
touch-action: none;
}
.fp-gstop.sel {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
/* Per-stop transparency slider */
.fp-slider {
display: flex;
align-items: center;
gap: 6px;
/* narrower % box with the same track length: the whole control shifts right */
width: 163px;
}
/* thin custom slider: accent-filled elapsed track (--fp-pct set inline by
PctControl), quiet gray remainder and thumb (the generic .fp-prow input box
rules would otherwise inflate the native thumb to 26px) */
.fp-prow .fp-slider input[type='range'] {
appearance: none;
flex: 1;
min-width: 0;
width: auto;
height: 3px;
padding: 0;
border: none;
border-radius: 2px;
background: linear-gradient(
to right,
var(--accent) var(--fp-pct, 0%),
var(--slides-swatch-ring) var(--fp-pct, 0%)
);
}
.fp-prow .fp-slider input[type='range']::-webkit-slider-thumb {
appearance: none;
width: 14px;
height: 14px;
border: none;
border-radius: 50%;
background: var(--surface);
/* crisp 1px contact ring + short drop so the knob pops off the light pane */
box-shadow: var(--slides-thumb-shadow);
}
/* Shared dropdown (@lycero/ui gs-dd) app sizing: format-pane rows, the
* ribbon animation-timing group, and modal dialogs */
.fp-prow .gs-dd {
width: 120px;
flex-shrink: 0;
}
/* position "From" pickers: same width as the value spinners above them (fp-unitstep) */
.fp-prow .gs-dd.fp-dd-narrow {
width: 74px;
}
/* PPT-style shadow preset gallery: thumbnail trigger + grouped grid of live shadow tiles */
.fp-shadowgal {
position: relative;
display: inline-flex;
anchor-name: --fp-shadowgal;
anchor-scope: --fp-shadowgal;
}
.fp-shadowgal-btn {
display: flex;
align-items: center;
gap: 6px;
height: 26px;
padding: 0 5px 0 4px;
border: 1px solid var(--border-strong);
border-radius: 3px;
background: var(--surface);
color: var(--text-dim);
cursor: pointer;
}
.fp-shadowgal-btn:focus-visible {
border-color: var(--accent);
outline: none;
}
/* fixed + anchored (same technique as gs-dd-pop) so pane scroll overflow never clips it;
* right-aligned to the trigger because the pane hugs the window's right edge */
.fp-shadowgal-pop {
position: fixed;
position-anchor: --fp-shadowgal;
top: calc(anchor(bottom) + 2px);
right: anchor(right);
position-try-fallbacks: flip-block;
position-visibility: anchors-visible;
z-index: 80;
box-sizing: border-box;
width: 176px;
padding: 6px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 4px;
box-shadow: var(--shadow-menu);
}
.fp-shadowgal-group {
margin: 4px 2px 6px;
font-size: 11px;
color: var(--text-dim);
}
.fp-shadowgal-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.fp-galopt {
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
border: 1px solid transparent;
border-radius: 3px;
background: none;
cursor: pointer;
}
.fp-galopt:hover {
background: var(--hover);
}
.fp-galopt.selected {
border-color: var(--accent);
background: var(--accent-soft);
}
/* tile face: a miniature preview of the document effect, deliberately theme-static */
.fp-galtile {
--fp-gal-face: #f4f4f4;
--fp-gal-edge: #b9b9b9;
--fp-gal-shadow: rgba(0, 0, 0, 0.45);
display: block;
box-sizing: border-box;
width: 26px;
height: 26px;
border-radius: 5px;
background: var(--fp-gal-face);
border: 1px solid var(--fp-gal-edge);
}
.fp-galtile-cur {
width: 15px;
height: 15px;
border-radius: 3px;
/* fixed "shadow" glyph (PPT-style): a white tile casting a small bottom-right shadow */
--fp-gal-face: #ffffff;
box-shadow: 1.5px 1.5px 2.5px var(--fp-gal-shadow);
}
/* reflection tiles: face + a fading mirrored bar below it */
.fp-refltile {
display: flex;
flex-direction: column;
align-items: center;
}
.fp-refltile .fp-refltile-face {
width: 22px;
height: 16px;
}
.fp-refltile-fade {
/* preview of a document effect, deliberately theme-static */
--fp-refl-fade-from: rgba(0, 0, 0, 0.35);
display: block;
width: 22px;
border-radius: 2px;
background: linear-gradient(var(--fp-refl-fade-from), transparent);
}
.fp-refltile-cur .fp-refltile-face {
--fp-gal-face: #ffffff;
width: 15px;
height: 10px;
border-radius: 2px;
}
.fp-refltile-cur .fp-refltile-fade {
width: 15px;
}
/* text-direction options: PPT-style direction glyph + label in the list; the
* 120px trigger can't fit the glyph next to the long rotate labels, so it
* stays text-only (matching PowerPoint's pane field) */
.fp-dd-textdir .gs-dd-value .fp-dirico {
display: none;
}
.gs-dd-item .fp-dirico {
flex-shrink: 0;
margin-right: 8px;
color: var(--text-dim);
}
/* line previews inside dropdown triggers/options (compound + dash pickers) */
.fp-line-preview {
width: 100%;
height: 14px;
display: block;
}
.rb-anim-timing .gs-dd {
width: 110px;
}
.rb-anim-timing .gs-dd-btn {
height: 22px;
}
.modal .gs-dd {
display: flex;
width: 100%;
margin-top: 4px;
}
.modal .gs-dd-btn {
height: 34px;
border-radius: 4px;
padding: 0 6px 0 10px;
font-size: 13px;
}
/* the numeric % box beside a transparency slider (narrower than the width box;
44px is the floor that still fits "100 %" plus the chevron column) */
.fp-prow .fp-slider .fp-unitstep.fp-unitstep-pct {
width: 74px;
flex-shrink: 0;
}
/* PPT-style property row: label on the left, control right-aligned */
.fp-prow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
font-size: 12px;
color: var(--text-dim);
}
.fp-prow > span {
flex-shrink: 0;
text-align: left;
white-space: nowrap;
}
/* label-less rows (button clusters, gradient directions) hug the right edge */
.fp-prow-end {
justify-content: flex-end;
gap: 6px;
}
.fp-prow input,
.fp-prow select {
box-sizing: border-box;
width: 120px;
min-width: 0;
height: 26px;
border: 1px solid var(--border-strong);
border-radius: 3px;
padding: 0 6px;
font-size: 12px;
color: var(--text);
outline: none;
}
.fp-prow input:focus,
.fp-prow select:focus {
border-color: var(--accent);
}
.fp-row {
display: flex;
align-items: center;
gap: 8px;
}
/* breathing room between stacked rows in one section (fill swatches ↔ 透明度, stroke ↔ 虚线样式) */
.fp-row + .fp-row {
margin-top: 10px;
}
.fp-chart-series {
font-size: 12px;
font-weight: 600;
margin-top: 4px;
}
.fp-chart-point {
margin-top: 4px;
}
.fp-chart-point-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
}
/* Color well trigger + shared palette popover in the format pane. The popover
is fixed + anchored so it escapes the pane's scroll clip; it right-aligns to
the well and opens leftwards (the pane hugs the window's right edge). */
.fp-color-well-wrap {
position: relative;
display: inline-flex;
align-items: center;
anchor-name: --fp-color-well;
anchor-scope: --fp-color-well;
}
/* Framed like the % box beside the transparency slider (74×26, same border):
* stretched swatch + dropdown caret, PPT color-well style */
.fp-color-well {
box-sizing: border-box;
display: flex;
align-items: center;
gap: 4px;
width: 74px;
height: 26px;
padding: 0 5px 0 3px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 3px;
cursor: pointer;
}
.fp-color-well-swatch {
display: block;
flex: 1;
min-width: 0;
/* 18px + 1px borders = 20px box in the 24px inner height → exactly 2px top/bottom */
height: 18px;
border: 1px solid var(--slides-swatch-ring);
border-radius: 2px;
}
.fp-color-well-caret {
flex-shrink: 0;
display: flex;
color: var(--text-dim);
}
.fp-color-pop {
position: fixed;
position-anchor: --fp-color-well;
top: calc(anchor(bottom) + 4px);
right: anchor(right);
position-try-fallbacks: flip-block;
position-visibility: anchors-visible;
z-index: 80;
}
/* Format-background pane: fill-type buttons wrap their two-word labels */
.fp-btn.fp-btn-wrap {
flex: 1;
height: auto;
min-height: 26px;
padding: 4px 8px;
white-space: normal;
line-height: 1.3;
}
/* Format-background pane: hide-background-graphics checkbox + picture preview */
.fp-check {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text);
cursor: pointer;
}
.fp-bg-preview {
max-width: 100%;
max-height: 90px;
border: 1px solid var(--border);
border-radius: 4px;
object-fit: contain;
}
.fp-btn {
height: 26px;
padding: 0 12px;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: var(--surface);
font-size: 12px;
color: var(--text);
cursor: pointer;
}
.fp-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.fp-btn.active {
border-color: var(--accent);
background: var(--active-bg);
color: var(--accent);
}
/* Color strip on ribbon large buttons (colored buttons such as background fill) */
.rb-big {
position: relative;
}
.rb-big-icon-colored {
position: relative;
flex-direction: column;
}
.rb-big-icon-colored .rb-color-bar {
position: absolute;
left: 1px;
right: 1px;
bottom: -3px;
height: 4px;
border-radius: 1px;
border: 1px solid var(--slides-swatch-ring);
}
/* ================= ribbon dropdowns (font color palette / table picker) + transition effects ================= */
.rb-drop-wrap {
position: relative;
/* let the wrapped button stretch to the full group height */
display: flex;
align-items: stretch;
/* Anchor for the .rb-drop panel. Every wrap shares the name, so the scope
is essential: without it a fixed-position panel (laid out after all
in-flow content) would resolve to the LAST wrap in the document instead
of its own parent. */
anchor-name: --rb-drop-wrap;
anchor-scope: --rb-drop-wrap;
}
/* Ribbon dropdown menu (translation language etc.) */
.rb-menu {
display: flex;
flex-direction: column;
min-width: 120px;
padding: 4px;
}
.rb-menu button {
border: none;
background: none;
text-align: left;
font-size: 12.5px;
padding: 6px 10px;
border-radius: 4px;
cursor: pointer;
color: var(--text);
white-space: nowrap;
}
.rb-menu-sep {
height: 1px;
margin: 4px 2px;
background: var(--border);
}
/* paragraph space before/after entries in the line-spacing menu (#149) */
.rb-menu-input {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 4px 10px;
font-size: 12px;
white-space: nowrap;
}
.rb-menu-input input {
box-sizing: border-box;
width: 52px;
height: 22px;
/* uniform swatch inset on all four sides */
padding: 2px;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: var(--surface);
color: inherit;
font: inherit;
font-size: 12px;
}
.rb-menu-input input::-webkit-color-swatch-wrapper {
display: block;
width: 100%;
height: 100%;
padding: 0;
}
.rb-menu-input input::-webkit-color-swatch {
display: block;
box-sizing: border-box;
width: 100%;
height: 100%;
border: 1px solid var(--slides-swatch-ring);
border-radius: 2px;
}
.rb-menu button:hover:not(:disabled) {
background: var(--hover);
}
.rb-menu button:disabled {
color: var(--slides-text-disabled);
cursor: default;
}
.rb-menu-div {
height: 1px;
margin: 4px 6px;
background: var(--border);
}
.rb-drop {
/* Fixed + anchored to the parent .rb-drop-wrap (same geometry as the old
absolute top:100%/left:0), so the panel escapes the ribbon-body scroll
clip while still tracking its trigger through ribbon scrolling. */
position: fixed;
position-anchor: --rb-drop-wrap;
top: calc(anchor(bottom) + 6px);
left: anchor(left);
/* near the right window edge, right-align to the trigger instead of
spilling past the (now clipped) viewport; near the bottom edge (e.g. a
collapsed-group flyout on a short window), open above the trigger */
position-try-fallbacks:
flip-inline,
flip-block,
flip-block flip-inline;
/* trigger scrolled out of the ribbon → hide the panel with it */
position-visibility: anchors-visible;
z-index: 60;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 10px;
box-shadow: var(--slides-shadow-drop);
padding: 8px;
}
/* Bubble tail pointing at the trigger button (skipped on
* scrollable menus, where overflow would clip the pseudo-element).
* Anchored to the trigger wrap, NOT the panel edge: near the right window
* edge flip-inline right-aligns the panel, and a panel-relative `left: 18px`
* tail would point at whatever sits left of the trigger. */
.rb-drop:not(.rb-menu-scroll)::before {
content: '';
position: fixed;
position-anchor: --rb-drop-wrap;
position-visibility: anchors-visible;
/* panel top (anchor bottom + 6px) minus half the 10px diamond */
top: calc(anchor(bottom) + 0.5px);
left: calc(anchor(center) - 5px);
width: 10px;
height: 10px;
background: var(--surface);
border-left: 1px solid var(--border-strong);
border-top: 1px solid var(--border-strong);
border-top-left-radius: 2px;
transform: rotate(45deg);
}
.rb-font-color {
position: relative;
display: inline-block;
font-weight: 600;
line-height: 1;
padding-bottom: 3px;
}
/* Font name / font size dropdowns (Home tab font group; applies to the selection while editing, otherwise display-only) */
.rb-font-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
height: 28px;
padding: 0 7px;
border: 1px solid var(--border-strong);
border-radius: 3px;
background: var(--surface);
font-size: 13px;
color: var(--text);
cursor: pointer;
}
.rb-font-btn:disabled {
opacity: 0.5;
cursor: default;
}
.rb-font-btn.active,
.rb-font-btn:not(:disabled):hover {
background: var(--hover);
}
.rb-font-name {
width: 178px;
}
.rb-font-size {
width: 68px;
}
/* Font size combobox (editable input + caret): any pt value can be typed, Enter applies */
.rb-size-combo {
padding: 0;
}
.rb-size-combo.rb-combo-disabled {
opacity: 0.5;
}
.rb-size-combo.rb-combo-disabled,
.rb-size-combo.rb-combo-disabled .rb-size-input,
.rb-size-combo.rb-combo-disabled .rb-size-caret {
cursor: default;
}
.rb-size-input {
flex: 1;
width: 100%;
min-width: 0;
height: 100%;
border: none;
background: transparent;
font: inherit;
color: inherit;
padding: 0 0 0 8px;
outline: none;
}
.rb-size-caret {
display: flex;
align-items: center;
height: 100%;
border: none;
background: transparent;
padding: 0 6px 0 2px;
cursor: pointer;
}
.rb-font-name-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
.rb-font-caret {
font-size: 9px;
opacity: 0.6;
}
/* dropdown carets inside toggle buttons (AV / Aa / highlighter / font color) sit 2px off the glyph */
.rb-icon .rb-font-caret {
margin-left: 2px;
}
/* the font-family / font-size dropdowns keep a small gap from their neighbours (MS-style),
while plain toggle buttons stay flush against each other */
.rb-font-btn {
margin-right: 3px;
}
/* Office-style accent colors on glyph modifiers (blue carets/arrows/scripts, purple eraser) —
colored in the DEFAULT state, matching Microsoft's ribbon */
:root {
--ribbon-accent: #2b7cd3;
--ribbon-accent-2: #a33fb5;
--ribbon-accent-warm: #ed8733;
}
[data-theme='dark'] {
--ribbon-accent: #5aa0e8;
--ribbon-accent-2: #c76ad4;
--ribbon-accent-warm: #f0a05c;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']):not([data-theme='dark']) {
--ribbon-accent: #5aa0e8;
--ribbon-accent-2: #c76ad4;
--ribbon-accent-warm: #f0a05c;
}
}
/* collapsed Paragraph group (MS-style): big button opens a two-row tool panel */
.rb-para-drop {
padding: 12px 14px;
}
.rb-para-drop .rb-col {
gap: 8px;
}
.rb-para-drop .rb-row {
gap: 4px;
}
/* PowerPoint-size targets inside the paragraph bubble: 20px glyphs in 36x32 hit areas */
.rb-para-drop .rb-icon {
min-width: 36px;
height: 32px;
}
.rb-para-drop .rb-mini-sep {
height: 22px;
margin: 0 6px;
}
.rb-font-menu {
min-width: 180px;
}
.rb-size-menu {
min-width: 64px;
}
.rb-font-menu button.on,
.rb-size-menu button.on {
background: var(--hover);
font-weight: 600;
}
.rb-menu-group-label {
padding: 8px 12px 3px;
font-size: 11px;
color: var(--text-secondary);
border-top: 1px solid var(--border);
margin-top: 4px;
cursor: default;
}
.rb-font-download {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.rb-font-download-tag {
font-size: 11px;
color: var(--text-secondary);
}
.rb-font-install-local {
border-top: 1px solid var(--border);
margin-top: 4px;
color: var(--accent);
}
.font-missing-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 14px;
font-size: 12.5px;
background: var(--accent-soft);
color: var(--text);
border-bottom: 1px solid var(--border);
}
.font-missing-banner .fmb-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.font-missing-banner .fmb-fonts {
margin-left: 6px;
color: var(--text-secondary);
}
.font-missing-banner button {
border: 1px solid var(--border);
border-radius: 5px;
background: var(--surface);
color: var(--text);
padding: 3px 10px;
font-size: 12px;
cursor: pointer;
}
.font-missing-banner button:hover {
background: var(--hover);
}
.font-missing-banner .fmb-download {
color: var(--accent);
font-weight: 600;
}
.font-missing-banner .fmb-download:disabled {
opacity: 0.6;
cursor: default;
}
.rb-color-underbar {
position: absolute;
left: -1px;
right: -1px;
bottom: 0;
height: 3px;
border-radius: 1px;
}
/* Anchor positioning for the shared Word-style color panel (@lycero/ui
.gcp-palette draws the chrome; this wrapper only places it under the trigger). */
.rb-color-pop {
position: fixed;
position-anchor: --rb-drop-wrap;
top: calc(anchor(bottom) + 6px);
left: anchor(left);
position-try-fallbacks: flip-inline;
position-visibility: anchors-visible;
z-index: 60;
}
.rb-swatch {
width: 20px;
height: 20px;
border: 1px solid var(--border-strong);
border-radius: 3px;
cursor: pointer;
padding: 0;
}
.rb-swatch:hover {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
/* "More colors…" row at the bottom of the font color palette (native any-color picker) */
.rb-color-more {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 6px;
margin-top: 3px;
padding-top: 6px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--text);
cursor: pointer;
white-space: nowrap;
}
.rb-color-more input[type='color'] {
width: 18px;
height: 18px;
padding: 0;
border: 1px solid var(--border-strong);
border-radius: 3px;
background: none;
cursor: pointer;
}
.rb-table-picker-label {
font-size: 12px;
color: var(--text-dim);
margin-bottom: 6px;
text-align: center;
white-space: nowrap;
}
.rb-table-grid {
display: grid;
grid-template-columns: repeat(10, 18px);
gap: 3px;
}
/* "Insert Table…" entry under the hover grid (opens the rows/cols dialog) */
.rb-table-custom {
display: block;
width: 100%;
margin-top: 8px;
padding: 5px 6px;
border: none;
border-top: 1px solid var(--border);
border-radius: 0 0 4px 4px;
background: none;
color: var(--text);
font-size: 12px;
text-align: left;
cursor: pointer;
}
.rb-table-custom:hover {
background: var(--hover);
}
.rb-table-cell {
width: 18px;
height: 16px;
border: 1px solid var(--border-strong);
border-radius: 2px;
background: var(--surface);
cursor: pointer;
padding: 0;
}
.rb-table-cell.on {
background: var(--active-bg);
border-color: var(--accent);
}
.rb-para-label {
font-size: 11px;
color: var(--text-dim);
margin: 6px 0 2px;
white-space: nowrap;
}
/* Bullet character picker: PowerPoint-style preset tiles — each tile previews
* three "bullet + text bar" lines; the first tile is the None reset */
.rb-bullet-grid {
display: grid;
grid-template-columns: repeat(5, 44px);
gap: 4px;
}
.rb-bullet-tile {
height: 44px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
padding: 0 6px;
border: 1px solid var(--border-strong);
border-radius: 3px;
background: var(--surface);
cursor: pointer;
}
.rb-bullet-tile:hover:not(:disabled) {
background: var(--active-bg);
border-color: var(--accent);
}
.rb-bullet-tile:disabled {
opacity: 0.45;
cursor: default;
}
/* The tile matching the selection's current bullet (WPS-style filled highlight) */
.rb-bullet-tile.on {
background: var(--active-bg);
border-color: var(--accent);
}
.rb-bullet-tile-none {
font-size: 11px;
color: var(--text-dim);
align-items: center;
}
.rb-bullet-tile-row {
display: flex;
align-items: center;
gap: 3px;
}
.rb-bullet-tile-glyph {
font-size: 10px;
line-height: 1;
width: 10px;
text-align: center;
flex-shrink: 0;
}
.rb-bullet-tile-bar {
flex: 1;
height: 2px;
border-radius: 1px;
background: var(--border-strong);
}
.rb-bullet-hang {
padding: 3px 8px;
font-size: 12px;
border: 1px solid var(--border-strong);
border-radius: 3px;
background: var(--surface);
cursor: pointer;
}
.rb-bullet-hang:hover:not(:disabled) {
background: var(--active-bg);
border-color: var(--accent);
}
.rb-bullet-hang:disabled {
opacity: 0.45;
cursor: default;
}
.rb-bullet-hang-input {
width: 52px;
cursor: text;
color: inherit;
font: inherit;
font-size: 12px;
}
.rb-bullet-hang-input:hover:not(:disabled) {
background: var(--surface);
}
/* Extra symbols + custom character + picture bullet */
.rb-bullet-custom {
flex-wrap: wrap;
align-items: center;
gap: 3px;
max-width: 236px;
}
.rb-bullet-sym {
width: 26px;
height: 24px;
padding: 0;
font-size: 13px;
line-height: 1;
border: 1px solid var(--border-strong);
border-radius: 3px;
background: var(--surface);
cursor: pointer;
}
.rb-bullet-sym:hover:not(:disabled),
.rb-bullet-sym.on,
.rb-bullet-hang.on {
background: var(--active-bg);
border-color: var(--accent);
}
.rb-bullet-sym:disabled {
opacity: 0.45;
cursor: default;
}
.rb-bullet-sym-input,
.rb-bullet-start-input {
width: 72px;
cursor: text;
color: inherit;
font: inherit;
font-size: 12px;
}
.rb-bullet-sym-input {
width: 108px;
}
/* Numbering tiles: "1." / "II." / "iii." samples are wider than a bullet glyph */
.rb-bullet-tile-num {
width: auto;
min-width: 10px;
font-size: 8px;
white-space: nowrap;
}
/* Bullet color row: swatches + "More colors" on its own line */
.rb-bullet-colors {
flex-wrap: wrap;
align-items: center;
max-width: 226px;
}
.rb-bullet-colors .rb-swatch:disabled {
opacity: 0.45;
cursor: default;
}
.rb-bullet-color-more {
flex-basis: 100%;
}
.rb-trans-glyph {
font-size: 18px;
line-height: 22px;
}
/* ── Animations tab ──────────────────────────────────────────────────────── */
.rb-anim-glyph {
font-size: 18px;
line-height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* PowerPoint colors: entrance=green / emphasis=yellow / exit=red / motion path=blue */
.rb-anim-entr {
color: var(--slides-anim-entr);
}
.rb-anim-emph {
color: var(--slides-anim-emph);
}
.rb-anim-exit {
color: var(--slides-anim-exit);
}
.rb-anim-path {
color: var(--slides-anim-path);
}
.rb-anim-media {
color: var(--slides-anim-media);
}
.rb-anim-menu {
max-height: 320px;
overflow-y: auto;
min-width: 150px;
}
.rb-anim-menu .rb-anim-glyph {
display: inline-flex;
width: 20px;
font-size: 13px;
vertical-align: -3px;
}
.rb-anim-timing {
display: flex;
flex-direction: column;
gap: 4px;
justify-content: center;
font-size: 12px;
color: var(--text);
padding: 2px 4px;
}
.rb-anim-timing label {
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.rb-anim-timing select,
.rb-anim-timing input {
font-size: 12px;
padding: 1px 4px;
border: 1px solid var(--border);
border-radius: 3px;
background: var(--surface);
color: var(--text);
}
.rb-anim-timing input {
width: 58px;
}
/* ── Animation pane (reuses the comments-pane skeleton) ───────────────── */
.anim-pane .comments-list {
padding: 8px;
}
.anim-row {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border-radius: 5px;
cursor: pointer;
border-left: 3px solid transparent;
user-select: none;
}
.anim-row:hover {
background: var(--hover);
}
.anim-row.selected {
background: var(--accent-soft);
}
.anim-row.anim-entrance {
border-left-color: var(--slides-anim-entr);
}
.anim-row.anim-emphasis {
border-left-color: var(--slides-anim-emph);
}
.anim-row.anim-exit {
border-left-color: var(--slides-anim-exit);
}
.anim-row.anim-path {
border-left-color: var(--slides-anim-path);
}
.anim-row.anim-media {
border-left-color: var(--slides-anim-media);
}
.anim-row-no {
width: 16px;
text-align: right;
font-size: 11px;
color: var(--text-dim);
flex-shrink: 0;
}
.anim-row-trigger {
width: 16px;
text-align: center;
font-size: 11px;
flex-shrink: 0;
}
.anim-row-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
line-height: 1.25;
}
.anim-row-effect {
font-size: 12.5px;
}
.anim-row-target {
font-size: 11px;
color: var(--text-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.anim-row-actions {
display: none;
gap: 2px;
flex-shrink: 0;
}
.anim-row:hover .anim-row-actions,
.anim-row.selected .anim-row-actions {
display: inline-flex;
}
.anim-row-actions button {
border: none;
background: none;
cursor: pointer;
font-size: 10px;
padding: 2px 4px;
border-radius: 3px;
color: var(--text-dim);
}
.anim-row-actions button:hover:not(:disabled) {
background: var(--hover);
color: var(--text);
}
.anim-row-actions button:disabled {
opacity: 0.3;
cursor: default;
}
/* ── Canvas animation preview overlay (covers .stage-rel) ──────────────── */
.anim-preview-overlay {
position: absolute;
inset: 0;
z-index: 30;
cursor: pointer;
line-height: 0;
background: var(--slides-paper);
}
/* ================= Context menu ================= */
.ctx-menu {
position: fixed;
z-index: 200;
min-width: 168px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 6px;
box-shadow: var(--slides-shadow-menu);
padding: 4px;
/* Never taller than the viewport: the body scrolls instead (flyouts are fixed-positioned
in ContextMenu.tsx so this scroll box cannot clip them) */
max-height: calc(100vh - 8px);
overflow-y: auto;
}
.shape-gallery-pop {
padding: 8px;
}
.ctx-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
width: 100%;
border: none;
background: none;
padding: 6px 10px;
font-size: 13px;
border-radius: 4px;
cursor: pointer;
color: var(--text);
white-space: nowrap;
}
.ctx-item:hover:not(:disabled) {
background: var(--hover);
}
.ctx-item:disabled {
opacity: 0.4;
cursor: default;
}
.ctx-item.danger:hover:not(:disabled) {
background: var(--slides-danger-bg);
color: var(--slides-ai-error);
}
.ctx-hint {
color: var(--text-dim);
font-size: 12px;
}
.ctx-sep {
height: 1px;
background: var(--border);
margin: 4px 6px;
}
.ctx-item.ctx-checked > span:first-child::before {
content: '✓\00a0';
}
.ctx-sub-host {
position: relative;
}
.ctx-item.ctx-sub-open {
background: var(--hover);
}
/* First-frame placement only; the layout effect re-anchors the flyout as position: fixed */
.ctx-menu.ctx-submenu {
position: absolute;
left: 100%;
top: -5px;
margin-left: 2px;
/* A wheel over the flyout must not chain into the parent scroll box, whose onScroll
would dismiss this flyout while the pointer is still over it */
overscroll-behavior: contain;
}
.ctx-swatches {
padding: 6px 10px;
}
.ctx-swatches-label {
display: block;
font-size: 12px;
color: var(--text-dim);
margin-bottom: 5px;
}
.ctx-swatches-row {
display: flex;
gap: 4px;
}
.ctx-swatch {
width: 18px;
height: 18px;
border: 1px solid var(--border-strong);
border-radius: 3px;
cursor: pointer;
padding: 0;
font-size: 10px;
line-height: 1;
color: var(--text-dim);
}
.ctx-swatch:hover {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.ctx-swatch-none {
background: var(--surface);
}
/* Shape style preset grid (fill+stroke combos; colors are document data, set
* inline) — used by the Shape Tools ribbon gallery. The cell selector carries
* the button tag to outrank the generic .rb-menu button rule (its padding
* otherwise stretches the swatches into wide pills). */
.ctx-style-grid {
display: grid;
grid-template-columns: repeat(8, 22px);
/* hover outline (2px + 1px offset) extends 3px per side — keep clearance */
gap: 10px;
}
.rb-menu button.ctx-style-cell,
.ctx-style-cell {
box-sizing: border-box;
width: 22px;
height: 22px;
border: 1.5px solid;
border-radius: 3px;
cursor: pointer;
padding: 0;
}
.ctx-style-cell:hover {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
/* PowerPoint-style shape fill popup (Shape Tools > Fill): color sections reuse
the shared gcp-* picker styles (the root carries .gcp-palette) at their
default compact scale; the action rows below (more colors / picture /
texture) are full-bleed menu rows. */
.gcp-palette.rb-fill-menu {
max-height: calc(100vh - 140px);
overflow-y: auto;
}
.rb-fill-menu .rbf-actions {
margin: 10px -12px 0;
padding: 3px 0;
}
/* inset separator above each action block (same look as .rb-menu-sep, not full-bleed) */
.rb-fill-menu .rbf-actions::before {
content: '';
display: block;
height: 1px;
margin: 0 12px 3px;
background: var(--border);
}
.rb-fill-menu .rbf-actions + .gcp-section-title {
margin-top: 8px;
}
.rb-fill-menu.rb-fill-menu .rbf-row {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
min-width: 0;
width: 100%;
height: auto;
padding: 6px 14px;
border: none;
border-radius: 0;
background: none;
color: var(--text);
font-size: 12.5px;
font-weight: 400;
font-family: inherit;
text-align: left;
cursor: pointer;
}
.rb-fill-menu.rb-fill-menu .rbf-row:hover {
background: var(--hover);
}
.rb-fill-menu .rbf-row input[type='color'] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
/* Gradient 变体 tiles (light/dark rows × 3 directions + radial); the gradients
themselves are document fill previews, painted inline. */
.rb-fill-menu .rbf-gradients {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.rb-fill-menu.rb-fill-menu .rbf-gradient-tile {
box-sizing: border-box;
min-width: 0;
height: 26px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
border-radius: 0;
cursor: pointer;
}
.rb-fill-menu.rb-fill-menu .rbf-gradient-tile:hover {
position: relative;
z-index: 1;
outline: 2px solid var(--accent);
outline-offset: 1px;
}
/* Bundled texture preset tiles (the texture bitmaps are document fill data, referenced inline) */
.rb-fill-menu .rbf-textures {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.rb-fill-menu.rb-fill-menu .rbf-texture-tile {
box-sizing: border-box;
min-width: 0;
height: 26px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
border-radius: 0;
cursor: pointer;
}
.rb-fill-menu.rb-fill-menu .rbf-texture-tile:hover {
position: relative;
z-index: 1;
outline: 2px solid var(--accent);
outline-offset: 1px;
}
/* the menu's bottom action block bleeds into the panel's rounded bottom */
.rb-fill-menu > .rbf-actions {
margin-bottom: -10px;
padding-bottom: 6px;
border-radius: 0 0 8px 8px;
overflow: hidden;
}
.rb-fill-menu.rb-fill-menu .rbf-row-sub {
justify-content: space-between;
}
.rbf-sub-caret {
color: var(--text-dim);
}
/* Gradient/texture hover flyout: fixed so it escapes the menu's overflow clip */
.rb-fill-menu .rbf-flyout {
position: fixed;
z-index: 70;
padding: 10px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 8px;
box-shadow: var(--slides-shadow-popup);
}
.rb-fill-menu .rbf-flyout .rbf-textures {
grid-template-columns: repeat(4, 56px);
}
/* PowerPoint's variant gallery uses square tiles */
.rb-fill-menu .rbf-flyout .rbf-gradients {
grid-template-columns: repeat(4, 32px);
}
.rb-fill-menu .rbf-flyout .rbf-gradient-tile {
height: 32px;
}
.rb-fill-menu .rbf-flyout .rbf-actions {
margin: 8px -10px -10px;
padding: 3px 0 4px;
}
.rb-fill-menu .rbf-flyout .rbf-actions::before {
margin: 0 10px 3px;
}
/* flyout's leading row (无渐变): bleeds to the top rounding, no separator line */
.rb-fill-menu .rbf-flyout .rbf-actions-top {
margin: -10px -10px 0;
padding: 4px 0 3px;
border-radius: 8px 8px 0 0;
overflow: hidden;
}
.rb-fill-menu .rbf-flyout .rbf-actions-top::before {
display: none;
}
.rb-fill-menu.rb-fill-menu .rbf-flyout .rbf-row {
padding: 6px 12px;
}
/* ---- Draw (freehand ink) ---- */
.ink-overlay {
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
}
.ink-overlay.ink-active {
pointer-events: auto;
touch-action: none;
}
.ink-tool-pen,
.ink-tool-highlighter {
cursor: crosshair;
}
.ink-tool-eraser {
/* Custom eraser-shaped cursor (the cell crosshair leaves users unsure which tool is active);
white fill with dark stroke stays visible on light and dark backgrounds, hotspot at center (= erase test point) */
cursor:
url('data:image/svg+xml;utf8,')
11 11,
cell;
}
.ink-svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.ink-settings {
display: flex;
flex-direction: column;
gap: 4px;
justify-content: center;
}
/* ===== Draw tab: pen tray ===== */
.pen-tray {
display: flex;
align-items: flex-start;
gap: 2px;
align-self: stretch;
padding: 0 10px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 6px;
overflow: hidden;
}
/* pens hang from the tray top; the held pen slides down */
.pen-btn {
border: none;
background: none;
padding: 0 3px;
cursor: pointer;
transform: translateY(-12px);
transition: transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pen-btn svg {
display: block;
}
.pen-btn:hover:not(:disabled) {
transform: translateY(-6px);
}
.pen-btn.down {
transform: translateY(0);
}
.pen-btn:disabled {
opacity: 0.55;
cursor: default;
}
/* color/width flyout for the held pen */
.pen-flyout-backdrop {
position: fixed;
inset: 0;
z-index: 80;
}
.pen-flyout {
position: fixed;
z-index: 81;
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 8px;
box-shadow: var(--slides-shadow-popup);
}
/* the pen tray sits flush against the ink settings in the same group */
.pen-tray + .ink-settings {
margin-left: 8px;
}
/* 6px so the active swatch's outline (2px + 1px offset) keeps clear air */
.ink-swatches {
display: flex;
gap: 6px;
}
.ink-swatch {
width: 16px;
height: 16px;
border: 1px solid var(--slides-swatch-ring-strong);
border-radius: 3px;
cursor: pointer;
padding: 0;
}
.ink-swatch.active {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.ink-widths {
display: flex;
gap: 3px;
}
.ink-width {
width: 24px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 3px;
background: none;
cursor: pointer;
padding: 0;
}
.ink-width:hover {
background: var(--hover);
}
.ink-width.active {
border-color: var(--accent);
background: var(--accent-soft);
}
.ink-width-dot {
border-radius: 50%;
display: inline-block;
}
/* ── View tab: view modes / ruler / grid / guides / notes / comments ─── */
/* Canvas column: stage + bottom notes pane */
.stage-col {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.stage-col .stage-wrap {
flex: 1;
}
/* AI quick actions anchored right above the slide card (mirrors the Home-tab
Lycero AI group); absolute so it doesn't distort the zoom-box extent.
z-index lifts it over the Konva stage's transparent 160px bleed, which
otherwise swallows the clicks */
/* Lycero SAS floating toolbar, matched to the reference stage-toolbar:
white bar (padding 3px 5px, ~35px tall); 24px borderless tool buttons
with 12px #374151 labels; thin span dividers separate the groups; the
assistant toggle shows a gray selected state while the panel is open */
.stage-ai-bar {
position: absolute;
bottom: 100%;
left: 0;
z-index: 5;
display: inline-flex;
align-items: center;
/* Deck-wide presets and the selection-scoped entry sit in separate pills, so
* the gap itself tells them apart — they act on different things */
gap: 8px;
margin-bottom: 6px;
white-space: nowrap;
}
.stage-ai-group {
display: inline-flex;
align-items: center;
padding: 3px 5px;
background: var(--surface);
border: 1px solid var(--border-subtle);
border-radius: 8px;
box-shadow: var(--slides-shadow-toolbar);
}
.stage-ai-btn {
display: inline-flex;
align-items: center;
gap: 4px;
height: 24px;
padding: 0 8px;
border: none;
border-radius: 6px;
background: transparent;
color: var(--slides-stagebar-ink);
font-size: 12px;
white-space: nowrap;
cursor: pointer;
transition: background 0.1s;
}
.stage-ai-btn:hover {
background: var(--hover);
}
.stage-ai-btn:active {
background: var(--pressed);
transform: translateY(0.5px) scale(0.98);
}
.stage-ai-btn.active {
background: var(--hover);
}
.stage-ai-divider {
flex-shrink: 0;
width: 1px;
height: 16px;
margin: 0 6px;
background: var(--border);
}
.stage-ai-btn svg {
flex-shrink: 0;
/* AI feature glyphs match the ribbon's blue */
color: var(--color-brand-secondary);
}
/* the brand mark uses currentColor and keeps the button's ink, not the blue */
.stage-ai-btn svg.lycero-mark {
color: var(--slides-stagebar-ink);
}
/* Notes pane (bottom, PowerPoint style) */
.notes-pane {
flex-shrink: 0;
height: 118px;
/* stage gray, not card white: the bar reads as part of the work area;
* the divider needs --border-strong to stay visible on that gray */
background: var(--canvas);
border-top: 1px solid var(--border-strong);
display: flex;
flex-direction: column;
padding: 0 14px 10px;
}
.notes-resize-handle {
height: 6px;
flex-shrink: 0;
cursor: ns-resize;
background: transparent;
margin: 0 -14px 4px;
}
.notes-pane textarea {
flex: 1;
border: none;
outline: none;
resize: none;
font:
13px/1.5 'Segoe UI',
var(--ui-cjk),
sans-serif;
color: var(--text);
background: transparent;
}
.notes-pane textarea::placeholder {
color: var(--text-tertiary);
}
/* Long notes must stay readable at any pane height: native wheel scrolling
* plus a slim scrollbar (PowerPoint/WPS keep the notes pane scrollable even
* when it's dragged down to a single line) */
.notes-pane textarea::-webkit-scrollbar {
width: 5px;
}
.notes-pane textarea::-webkit-scrollbar-track {
background: transparent;
}
.notes-pane textarea::-webkit-scrollbar-thumb {
border-radius: 2.5px;
background: var(--slides-scroll-thumb);
}
/* Hidden pane: an invisible strip stays along the bottom edge so the splitter
* remains grabbable — drag up to pull the notes pane back out (PPT behavior) */
.notes-pull-zone {
flex-shrink: 0;
height: 6px;
cursor: ns-resize;
}
/* Thin state (PowerPoint-style): dragged down to a one-line bar that stays
* directly editable — click and type in place, or drag the handle back up.
* The handle overlays the top edge (absolute) so the textarea gets the full
* bar height and its line-height centers the single line vertically.
* Scrolling stays enabled (textarea default overflow) so multi-line notes
* remain reachable with the wheel even in the one-line bar. */
.notes-pane.notes-thin {
position: relative;
padding-bottom: 0;
}
.notes-pane.notes-thin .notes-resize-handle {
position: absolute;
inset: 0 0 auto;
z-index: 1;
}
.notes-pane.notes-thin textarea {
line-height: 30px;
}
/* ── Transitions tab: one-shot canvas preview played when an effect is clicked.
push/cover enter from top/left only — down/right transforms extend the
scroll area and can flash scrollbars / retrigger the fit logic. ── */
.stage-rel[class*=' tp-'] {
pointer-events: none;
}
.tp-morph {
animation: tp-morph 400ms ease-out;
}
@keyframes tp-morph {
from {
opacity: 0;
transform: scale(0.96);
}
}
.tp-fade {
animation: tp-fade 500ms ease-out;
}
@keyframes tp-fade {
from {
opacity: 0;
}
}
.tp-push {
animation: tp-push 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes tp-push {
from {
transform: translateY(-100%);
}
}
.tp-wipe {
animation: tp-wipe 500ms ease-out;
}
@keyframes tp-wipe {
from {
clip-path: inset(0 100% 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}
.tp-split {
animation: tp-split 500ms ease-out;
}
@keyframes tp-split {
from {
clip-path: inset(0 50%);
}
to {
clip-path: inset(0 0);
}
}
.tp-circle {
animation: tp-circle 550ms ease-out;
}
@keyframes tp-circle {
from {
clip-path: circle(0% at 50% 50%);
}
to {
clip-path: circle(75% at 50% 50%);
}
}
.tp-cover {
animation: tp-cover 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes tp-cover {
from {
transform: translateX(-100%);
}
}
.tp-pull {
animation: tp-pull 500ms ease-out;
}
@keyframes tp-pull {
from {
clip-path: inset(0 0 0 100%);
}
to {
clip-path: inset(0 0 0 0);
}
}
.tp-dissolve {
animation: tp-dissolve 600ms steps(9);
}
@keyframes tp-dissolve {
from {
opacity: 0;
}
}
.tp-zoom {
animation: tp-zoom 450ms cubic-bezier(0.34, 1.2, 0.64, 1);
}
@keyframes tp-zoom {
from {
opacity: 0;
transform: scale(0.5);
}
}
/* Ruler: inside .stage-scale, scales with zoom and stays aligned with the slide */
/* Stage rulers are fixed chrome OUTSIDE the zoomed canvas (PowerPoint-style):
* constant type size at any zoom, 0 at the slide center, ticks across the
* whole work area. Press-drag on a strip pulls out a guide. */
.ruler-row {
display: flex;
flex-shrink: 0;
}
.ruler-track {
flex: 1;
min-width: 0;
min-height: 0;
display: flex;
}
.ruler-corner {
width: 20px;
height: 20px;
flex-shrink: 0;
background: var(--surface);
border-right: 1px solid var(--border-strong);
border-bottom: 1px solid var(--border-strong);
}
.ruler {
position: relative;
background: var(--surface);
overflow: hidden;
user-select: none;
touch-action: none;
}
/* Guides pull out PARALLEL to their ruler (Photoshop/Keynote convention):
* drag down from the top strip → horizontal guide, right from the left
* strip → vertical guide; cursors point along the pull direction */
.ruler-h {
flex: 1;
height: 20px;
border-bottom: 1px solid var(--border-strong);
cursor: row-resize;
}
.ruler-v {
width: 20px;
flex-shrink: 0;
border-right: 1px solid var(--border-strong);
cursor: col-resize;
}
.ruler-num {
position: absolute;
font-size: 9px;
color: var(--text-dim);
line-height: 1;
}
.ruler-h .ruler-num {
top: 5px;
transform: translateX(-50%);
}
.ruler-v .ruler-num {
left: 50%;
transform: translate(-50%, -50%);
}
.ruler-tick {
position: absolute;
background: var(--border-strong);
}
.ruler-h .ruler-tick {
bottom: 0;
width: 1px;
height: 5px;
}
.ruler-v .ruler-tick {
right: 0;
height: 1px;
width: 5px;
}
/* Pointer-position hairline while dragging on the stage */
.ruler-indicator {
position: absolute;
display: none;
pointer-events: none;
background: var(--accent);
}
.ruler-h .ruler-indicator {
inset: 0 auto 0 0;
width: 1px;
}
.ruler-v .ruler-indicator {
inset: 0 0 auto;
height: 1px;
}
/* Coordinate readout while dragging a guide (distance from slide center) */
.ruler-bubble {
position: fixed;
z-index: 1000;
padding: 2px 6px;
font-size: 11px;
line-height: 1.4;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border-strong);
border-radius: 4px;
box-shadow: var(--slides-shadow-popup);
pointer-events: none;
white-space: nowrap;
}
/* Grid line / guide overlay (doesn't intercept the mouse) */
.grid-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
background-image:
repeating-linear-gradient(to right, var(--slides-grid-line) 0 1px, transparent 1px 48px),
repeating-linear-gradient(to bottom, var(--slides-grid-line) 0 1px, transparent 1px 48px);
}
.guide-line {
position: absolute;
pointer-events: none;
z-index: 6;
}
.guide-v {
left: 50%;
top: 0;
bottom: 0;
border-left: 1px dashed var(--slides-guide);
}
.guide-h {
top: 50%;
left: 0;
right: 0;
border-top: 1px dashed var(--slides-guide);
}
/* Draggable guides: widened hit area (border is still a 1px visual line); double-click or drag off canvas to delete */
.guide-draggable {
pointer-events: auto;
}
.guide-draggable.guide-v {
width: 9px;
margin-left: -4px;
cursor: col-resize;
}
.guide-draggable.guide-h {
height: 9px;
margin-top: -4px;
cursor: row-resize;
}
/* Outline view (replaces the left thumbnail bar) */
.outline-pane {
width: 280px;
flex-shrink: 0;
background: var(--surface);
border-right: 1px solid var(--border);
overflow-y: auto;
padding: 8px;
}
.outline-item {
display: flex;
gap: 8px;
padding: 8px 8px 10px;
border-radius: 6px;
cursor: pointer;
border: 1px solid transparent;
}
.outline-item:hover {
background: var(--hover);
}
.outline-item.active {
background: var(--active-bg);
border-color: var(--accent);
}
.outline-num {
font-size: 11px;
color: var(--text-dim);
min-width: 16px;
padding-top: 2px;
}
.outline-body {
min-width: 0;
}
.outline-title {
font-size: 13px;
font-weight: 600;
margin-bottom: 2px;
word-break: break-word;
}
.outline-line {
font-size: 12px;
color: var(--text-dim);
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.outline-more {
color: var(--border-strong);
}
/* Slide sorter (grid overview) */
.sorter-view {
flex: 1;
overflow-y: auto;
padding: 24px;
display: flex;
flex-wrap: wrap;
gap: 18px;
align-content: flex-start;
background: var(--canvas);
}
.sorter-item {
position: relative;
background: var(--slides-paper);
border: 2px solid var(--border-strong);
border-radius: 4px;
overflow: hidden;
cursor: pointer;
line-height: 0;
height: fit-content;
}
.sorter-item.dragging {
opacity: 0.4;
}
.sorter-item.drop-before {
box-shadow: -12px 0 0 -3px var(--accent);
}
.sorter-item.drop-after {
box-shadow: 12px 0 0 -3px var(--accent);
}
.sorter-item:hover {
border-color: var(--text-dim);
}
.sorter-item.selected {
border-color: var(--accent);
border-style: dashed;
}
.sorter-item.active {
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-soft);
}
.sorter-num {
position: absolute;
left: 5px;
bottom: 4px;
font-size: 11px;
color: var(--slides-badge-ink);
line-height: 1;
background: var(--slides-badge-bg);
border-radius: 3px;
padding: 2px 5px;
}
/* Reading view (full-area page-by-page browsing) */
.reading-view {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
background: var(--slides-reading-bg);
padding: 20px;
min-width: 0;
}
.reading-slide {
line-height: 0;
box-shadow: var(--slides-shadow-reading);
cursor: pointer;
}
.reading-bar {
display: flex;
align-items: center;
gap: 12px;
}
.reading-bar button {
background: var(--slides-show-fill-12);
color: var(--slides-reading-ink);
border: 1px solid var(--slides-show-line-25);
border-radius: 5px;
font-size: 12.5px;
padding: 5px 12px;
cursor: pointer;
}
.reading-bar button:hover:not(:disabled) {
background: var(--slides-show-fill-22);
}
.reading-bar button:disabled {
opacity: 0.4;
cursor: default;
}
.reading-page {
color: var(--slides-reading-ink-dim);
font-size: 12.5px;
min-width: 56px;
text-align: center;
}
.reading-exit {
margin-left: 16px;
}
/* ── Review tab: comments pane ──────────────────────────────────────── */
.comments-pane {
width: 300px;
flex-shrink: 0;
display: flex;
flex-direction: column;
background: var(--surface);
border-left: 1px solid var(--border);
font-family: 'Segoe UI', var(--ui-cjk), sans-serif;
}
.comments-list {
flex: 1;
overflow-y: auto;
padding: 12px;
}
.comments-empty {
text-align: center;
color: var(--text-dim);
padding: 40px 18px;
}
.comments-empty p {
margin: 10px 0 0;
font-size: 13px;
}
.comments-empty-sub {
font-size: 11.5px !important;
color: var(--border-strong);
}
.comment-card {
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 10px;
background: var(--slides-comment-bg);
}
.comment-head {
display: flex;
align-items: center;
gap: 8px;
}
.comment-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--accent);
color: var(--slides-on-accent);
font-size: 10.5px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
user-select: none;
}
.comment-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.comment-author {
font-size: 12.5px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.comment-time {
font-size: 10.5px;
color: var(--text-dim);
}
.comment-del {
border: none;
background: none;
color: var(--text-dim);
cursor: pointer;
font-size: 12px;
padding: 2px 5px;
border-radius: 4px;
}
.comment-del:hover {
background: var(--hover);
color: var(--accent);
}
.comment-text {
font-size: 13px;
line-height: 1.5;
margin-top: 6px;
white-space: pre-wrap;
word-break: break-word;
}
.comment-new {
border-top: 1px solid var(--border);
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.comment-new textarea {
resize: none;
border: 1px solid var(--border-strong);
border-radius: 6px;
padding: 8px 10px;
font:
13px/1.5 'Segoe UI',
var(--ui-cjk),
sans-serif;
outline: none;
}
.comment-new textarea:focus {
border-color: var(--accent);
}
.comment-new .btn-primary {
align-self: flex-end;
}
/* ---- Design tab: theme gallery ---- */
.theme-gallery {
display: flex;
gap: 6px;
align-items: center;
max-width: 560px;
overflow-x: auto;
padding: 2px;
}
.theme-card {
flex: 0 0 auto;
width: 74px;
height: 62px;
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
padding: 5px 6px 4px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
box-shadow: var(--slides-theme-card-gloss);
transition:
border-color 0.1s,
box-shadow 0.1s;
}
.theme-card:hover:not(:disabled) {
border-color: var(--accent);
box-shadow: var(--slides-shadow-float);
}
.theme-card:disabled {
opacity: 0.5;
cursor: default;
}
.theme-card-aa {
font-size: 17px;
line-height: 1;
font-weight: 600;
}
.theme-card-dots {
display: flex;
gap: 3px;
}
.theme-card-dot {
width: 9px;
height: 9px;
border-radius: 2px;
border: 1px solid var(--slides-swatch-ring);
}
.theme-card-name {
font-size: 10px;
line-height: 1;
opacity: 0.75;
color: inherit;
mix-blend-mode: normal;
}
/* ── Slide show (full-screen black playback) ──────────────────────── */
/* Click-time curtain: dropped synchronously when a show is requested so the very
next frame is already black; the mount + window snap happen behind it. Sits
just under .slideshow, which takes over once revealed. */
body.show-curtain::after {
content: '';
position: fixed;
inset: 0;
z-index: 399;
background: var(--slides-show-black);
}
.slideshow {
position: fixed;
inset: 0;
z-index: 400;
background: var(--slides-show-black);
display: flex;
align-items: center;
justify-content: center;
cursor: default;
user-select: none;
}
.slideshow .ss-frame {
line-height: 0;
}
/* Page transition animations: CSS approximations of the Transitions-tab PowerPoint effects (applied to the entering page) */
.slideshow .ss-anim-fade {
animation: ss-fade 0.5s ease both;
}
.slideshow .ss-anim-push {
animation: ss-push 0.5s ease-out both;
}
.slideshow .ss-anim-wipe {
animation: ss-wipe 0.6s ease-out both;
}
.slideshow .ss-anim-split {
animation: ss-split 0.55s ease-out both;
}
.slideshow .ss-anim-circle {
animation: ss-circle 0.6s ease-out both;
}
@keyframes ss-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes ss-push {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes ss-wipe {
from {
clip-path: inset(0 100% 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}
@keyframes ss-split {
from {
clip-path: inset(50% 0 50% 0);
}
to {
clip-path: inset(0 0 0 0);
}
}
@keyframes ss-circle {
from {
clip-path: circle(0% at 50% 50%);
}
to {
clip-path: circle(75% at 50% 50%);
}
}
.slideshow .ss-counter {
position: absolute;
right: 14px;
bottom: 10px;
font-size: 12px;
color: var(--slides-show-ink-40);
background: var(--slides-show-counter-bg);
border-radius: 4px;
padding: 3px 8px;
line-height: 1;
pointer-events: none;
}
.slideshow .ss-end {
color: var(--slides-show-ink-75);
font-size: 15px;
letter-spacing: 0.05em;
}
/* Audience show window (presenter view external screen): frame positioning box + presenter blackout */
.slideshow .ss-stagebox {
position: relative;
line-height: 0;
}
.slideshow .ss-black,
.slideshow .ss-white {
position: fixed;
inset: 0;
background: var(--slides-show-black);
z-index: 10;
}
.slideshow .ss-white {
background: var(--slides-show-white);
}
/* "See All Slides" overlay: numbered thumbnails of the play order, click to jump */
.slideshow .ss-grid {
position: fixed;
inset: 0;
z-index: 20;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 18px;
padding: 28px;
background: var(--slides-show-black);
}
.slideshow .ss-grid-item {
position: relative;
flex: none;
line-height: 0;
padding: 0;
border: 2px solid transparent;
border-radius: 4px;
overflow: hidden;
background: none;
cursor: pointer;
opacity: 0.8;
}
.slideshow .ss-grid-item:hover,
.slideshow .ss-grid-item.ss-grid-cur {
opacity: 1;
border-color: var(--slides-show-ink-75);
}
.slideshow .ss-grid-num {
position: absolute;
left: 6px;
bottom: 6px;
font-size: 12px;
line-height: 1;
color: var(--slides-show-ink);
background: var(--slides-show-pill-bg);
border-radius: 4px;
padding: 3px 7px;
}
/* Show ink overlay (presenter pen/laser pointer, mirrored for the audience) */
.ink-layer {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
z-index: 5;
}
.ink-laser {
position: absolute;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border-radius: 50%;
background: radial-gradient(
circle,
var(--slides-laser-core) 0%,
var(--slides-laser-mid) 55%,
var(--slides-laser-edge) 75%
);
box-shadow: var(--slides-laser-glow);
pointer-events: none;
}
/* ── Rehearsal timer bar (top of the show: current page dwell + total time) ── */
.slideshow .ss-rehearse {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: baseline;
gap: 14px;
background: var(--slides-show-pill-bg);
border: 1px solid var(--slides-show-line-15);
border-radius: 6px;
padding: 6px 14px;
pointer-events: none;
font-variant-numeric: tabular-nums;
}
.slideshow .ss-rehearse-cur {
color: var(--slides-show-ink);
font-size: 16px;
font-weight: 600;
}
.slideshow .ss-rehearse-total {
color: var(--slides-show-ink-60);
font-size: 12px;
}
/* ── Custom show management dialog ──────────────────────────────── */
.modal.csd {
width: 580px;
}
.csd-body {
display: flex;
gap: 14px;
min-height: 260px;
}
.csd-shows {
width: 170px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.csd-detail {
flex: 1;
min-width: 0;
}
.csd-list {
flex: 1;
overflow-y: auto;
border: 1px solid var(--border-strong);
border-radius: 4px;
padding: 4px;
display: flex;
flex-direction: column;
gap: 2px;
}
.csd-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
border: none;
background: none;
border-radius: 3px;
padding: 5px 8px;
font-size: 12.5px;
text-align: left;
cursor: pointer;
color: inherit;
}
.csd-item:hover {
background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.csd-item.active {
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: var(--accent);
font-weight: 600;
}
.csd-item-count {
font-size: 11px;
color: var(--text-dim);
font-weight: 400;
}
.csd-list-actions {
display: flex;
gap: 6px;
}
.csd-list-actions button {
flex: 1;
}
.csd-columns {
display: flex;
gap: 10px;
}
.csd-col {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.csd-col-title {
font-size: 12px;
color: var(--text-dim);
margin-bottom: 4px;
}
.csd-pages {
height: 180px;
}
/* Override .modal input's full-row style: keep checkboxes inline */
.csd-page {
display: flex !important;
align-items: center;
gap: 6px;
margin: 0 !important;
padding: 3px 4px;
font-size: 12.5px;
color: inherit !important;
}
.csd-page input[type='checkbox'] {
display: inline-block;
width: auto;
height: auto;
margin: 0;
}
.csd-order-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 3px 4px;
font-size: 12.5px;
}
.csd-order-btns {
display: flex;
gap: 3px;
}
.csd-order-btns button {
border: 1px solid var(--border-strong);
background: var(--surface);
border-radius: 3px;
width: 20px;
height: 20px;
line-height: 1;
font-size: 11px;
cursor: pointer;
padding: 0;
}
.csd-order-btns button:disabled {
opacity: 0.35;
cursor: default;
}
.csd-empty {
color: var(--text-dim);
font-size: 12px;
padding: 10px 8px;
}
/* Rehearsal-timing save confirmation body text */
.rehearse-summary {
margin: 0 0 6px;
font-size: 13px;
line-height: 1.6;
}
/* ── Hidden slides (marked in thumbnails/slide sorter) ────────────── */
.thumb.thumb-hidden canvas,
.sorter-item.thumb-hidden canvas {
opacity: 0.4;
}
.thumb.thumb-hidden .thumb-num,
.sorter-item.thumb-hidden .sorter-num {
text-decoration: line-through;
opacity: 0.85;
}
/* ── Presenter view (PowerPoint style: top bar / large frame + tools / right column / bottom thumbnail strip) ── */
.presenter {
position: fixed;
inset: 0;
z-index: 400;
background: var(--slides-show-black);
display: flex;
flex-direction: column;
user-select: none;
}
/* Until the fullscreen snap settles only the black root shows — the windowed
layout still computes, but never paints (same guard as the show's covered gate) */
.presenter.pv-uncovered > * {
visibility: hidden;
}
.presenter .pv-top {
height: 44px;
flex: none;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 6px;
padding: 0 10px;
border-bottom: 1px solid var(--slides-show-line-10);
}
.presenter .pv-top-btn {
background: none;
color: var(--slides-show-ink-85);
border: none;
border-radius: 4px;
font-size: 13px;
padding: 6px 12px;
cursor: pointer;
}
.presenter .pv-top-btn:hover:not(:disabled) {
background: var(--slides-show-fill-12);
}
.presenter .pv-top-btn:disabled {
opacity: 0.35;
cursor: default;
}
.presenter .pv-top-exit:hover {
background: var(--slides-pv-exit-hover);
}
.presenter .pv-top-spacer {
flex: 1;
}
.presenter .pv-top-hint {
font-size: 12px;
color: var(--slides-show-ink-40);
}
.presenter .pv-body {
flex: 1;
display: flex;
min-height: 0;
}
.presenter .pv-left {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.presenter .pv-timer-row {
height: 40px;
flex: none;
display: flex;
align-items: center;
gap: 8px;
padding: 0 24px;
}
.presenter .pv-timer {
font-size: 22px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--slides-show-ink);
}
.presenter .pv-clock {
font-size: 22px;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--slides-show-ink-85);
}
.presenter .pv-mini-btn {
background: none;
color: var(--slides-show-ink-75);
border: none;
border-radius: 4px;
font-size: 13px;
min-width: 28px;
padding: 5px 6px;
cursor: pointer;
line-height: 1;
}
.presenter .pv-mini-btn:hover {
background: var(--slides-show-fill-14);
}
.presenter .pv-stage {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
cursor: default;
}
.presenter .pv-stagebox {
position: relative;
line-height: 0;
}
.presenter .pv-stagebox.pv-tool-pen {
cursor: crosshair;
}
.presenter .pv-stagebox.pv-tool-laser {
cursor: none;
}
.presenter .pv-black,
.presenter .pv-white {
position: absolute;
inset: 0;
background: var(--slides-show-black);
}
.presenter .pv-white {
background: var(--slides-show-white);
}
.presenter .pv-end {
color: var(--slides-show-ink-75);
font-size: 15px;
letter-spacing: 0.05em;
line-height: 1.5;
}
.presenter .pv-bottomrow {
height: 56px;
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
}
.presenter .pv-tools {
display: flex;
align-items: center;
gap: 8px;
}
.presenter .pv-tool-btn {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--slides-show-fill-8);
border: 1px solid var(--slides-show-line-18);
color: var(--slides-show-ink-85);
font-size: 15px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.presenter .pv-tool-btn:hover:not(:disabled) {
background: var(--slides-show-fill-18);
}
.presenter .pv-tool-btn:disabled {
opacity: 0.35;
cursor: default;
}
.presenter .pv-tool-btn.pv-tool-on {
background: var(--slides-pv-accent);
border-color: var(--slides-pv-accent);
color: var(--slides-show-ink);
}
.presenter .pv-nav {
display: flex;
align-items: center;
gap: 14px;
}
.presenter .pv-round {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--slides-show-fill-8);
border: 1px solid var(--slides-show-line-25);
color: var(--slides-show-ink);
font-size: 20px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 3px;
}
.presenter .pv-round:hover:not(:disabled) {
background: var(--slides-show-fill-20);
}
.presenter .pv-round:disabled {
opacity: 0.35;
cursor: default;
}
.presenter .pv-nav-mid {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
min-width: 130px;
}
.presenter .pv-nav-label {
font-size: 13px;
color: var(--slides-show-ink-85);
font-variant-numeric: tabular-nums;
}
.presenter .pv-progress {
width: 130px;
height: 3px;
border-radius: 2px;
background: var(--slides-show-fill-18);
overflow: hidden;
}
.presenter .pv-progress > div {
height: 100%;
background: var(--slides-pv-accent);
border-radius: 2px;
}
.presenter .pv-side {
width: 340px;
flex: none;
box-sizing: border-box;
padding: 12px 14px;
border-left: 1px solid var(--slides-show-line-10);
display: flex;
flex-direction: column;
min-height: 0;
color: var(--slides-pv-ink);
}
.presenter .pv-section-label {
font-size: 12px;
font-weight: 600;
color: var(--slides-show-ink-55);
margin: 6px 0 6px;
}
.presenter .pv-next {
line-height: 0;
border: 1px solid var(--slides-show-line-18);
border-radius: 3px;
overflow: hidden;
align-self: flex-start;
}
.presenter .pv-next-none {
line-height: 1.4;
font-size: 12px;
color: var(--slides-show-ink-45);
padding: 18px 12px;
}
.presenter .pv-notes {
flex: 1;
min-height: 0;
overflow-y: auto;
margin-top: 2px;
line-height: 1.6;
color: var(--slides-show-ink-88);
white-space: pre-wrap;
word-break: break-word;
}
.presenter .pv-notes-size {
flex: none;
display: flex;
justify-content: center;
gap: 10px;
padding-top: 8px;
border-top: 1px solid var(--slides-show-line-10);
margin-top: 8px;
}
.presenter .pv-film {
height: 118px;
flex: none;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 10px;
padding: 0 14px;
overflow-x: auto;
overflow-y: hidden;
border-top: 1px solid var(--slides-show-line-10);
}
.presenter .pv-film-item {
flex: none;
line-height: 0;
border: 2px solid transparent;
border-radius: 3px;
overflow: hidden;
cursor: pointer;
opacity: 0.75;
}
.presenter .pv-film-item:hover {
opacity: 1;
}
.presenter .pv-film-item.pv-film-cur {
border-color: var(--slides-pv-accent);
opacity: 1;
}
/* ── Insert tab: shape gallery / icon gallery / WordArt / SmartArt / chart dropdown ── */
.rb-drop-title {
font-size: 11px;
font-weight: 600;
color: var(--text-dim);
padding: 4px 2px 3px;
}
.rb-shape-gallery {
width: 264px;
max-height: 320px;
overflow-y: auto;
}
.rb-shape-grid {
display: grid;
grid-template-columns: repeat(8, 28px);
gap: 3px;
margin-bottom: 4px;
}
.rb-shape-cell {
width: 28px;
height: 28px;
border: 1px solid transparent;
border-radius: 4px;
background: none;
font-size: 15px;
line-height: 1;
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.rb-shape-cell:hover {
border-color: var(--accent);
background: var(--hover);
}
.rb-icon-gallery {
width: 236px;
}
.rb-icon-colors {
display: flex;
gap: 5px;
/* 3px headroom: the panel's bubble-tail diamond (.rb-drop::before) dips
~7px into the panel and would otherwise cover the first swatch's
selection outline (2px + 1px offset above the 8px panel padding) */
padding-top: 3px;
padding-bottom: 6px;
margin-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.rb-swatch.on {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.rb-icon-grid {
display: grid;
grid-template-columns: repeat(6, 34px);
gap: 4px;
max-height: 240px;
overflow-y: auto;
}
.rb-icon-cell {
width: 34px;
height: 34px;
border: 1px solid transparent;
border-radius: 4px;
background: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.rb-icon-cell:hover {
border-color: var(--accent);
background: var(--hover);
}
.rb-wordart-grid {
display: grid;
grid-template-columns: repeat(4, 44px);
gap: 5px;
}
.rb-wordart-cell {
width: 44px;
height: 44px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--surface);
font-size: 26px;
font-family: Georgia, serif;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.rb-wordart-cell:hover {
border-color: var(--accent);
}
.rb-menu-wide {
min-width: 180px;
}
.rb-menu-wide button {
display: flex;
align-items: center;
gap: 8px;
}
.rb-menu-glyph {
display: inline-flex;
width: 30px;
justify-content: center;
align-items: center;
/* inline-flex sits on the text baseline, riding the icon high — middle-align it to the label,
then nudge 1px up for optical centering against the label's cap height */
vertical-align: middle;
position: relative;
top: -1px;
font-size: 14px;
/* neutral glyphs — no accent tint in menus */
color: var(--text);
}
/* SmartArt / chart menu entries carry an SVG thumbnail instead of a text glyph */
.rb-menu-thumb {
width: 44px;
align-items: center;
flex-shrink: 0;
}
.rb-menu-scroll {
max-height: 260px;
overflow-y: auto;
}
/* ── Insert dialogs: hyperlink / header & footer / equation ────────────── */
.modal.modal-wide {
width: 460px;
max-width: 90vw;
}
.modal.zoom-dlg {
width: 720px;
max-width: 90vw;
}
.zoom-dlg-grid {
display: grid;
grid-template-columns: repeat(auto-fill, 164px);
justify-content: center;
gap: 12px;
max-height: 60vh;
overflow-y: auto;
padding: 4px;
}
.zoom-dlg-item {
padding: 0;
border: 2px solid var(--border-strong);
border-radius: 4px;
background: var(--slides-paper);
overflow: hidden;
line-height: 0;
text-align: left;
cursor: pointer;
}
.zoom-dlg-item:hover:not(:disabled) {
border-color: var(--text-dim);
}
.zoom-dlg-item.selected {
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-soft);
}
.zoom-dlg-item:disabled {
opacity: 0.4;
cursor: default;
}
.zoom-dlg-caption {
display: block;
padding: 4px 6px;
font-size: 11.5px;
line-height: 1.3;
color: var(--text-dim);
background: var(--surface);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zoom-dlg-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 14px;
}
.zoom-dlg-footer .modal-actions {
margin-top: 0;
}
.zoom-dlg-count {
font-size: 12.5px;
color: var(--text-dim);
}
.dlg-radio-row {
display: flex;
gap: 18px;
margin-bottom: 12px;
}
.dlg-two-col {
display: flex;
gap: 12px;
}
.dlg-two-col > label {
flex: 1;
min-width: 0;
}
/* a validation hint under a dialog's fields (Custom Slide Size) */
.modal .dlg-note {
margin: 4px 0 0;
font-size: 12px;
color: var(--danger);
}
/* Override .modal label / .modal input full-row styles: checkbox/radio rows lay out inline */
.modal label.dlg-radio,
.modal label.dlg-check {
display: flex;
align-items: center;
gap: 7px;
font-size: 13px;
color: var(--text);
cursor: pointer;
margin: 0;
}
.modal label.dlg-check {
margin: 10px 0;
}
.modal .dlg-radio input[type='radio'],
.modal .dlg-check input[type='checkbox'] {
display: inline-block;
width: 14px;
height: 14px;
margin: 0;
padding: 0;
flex: none;
accent-color: var(--accent);
}
.dlg-indent {
margin: 6px 0 10px 21px;
}
.modal .dlg-indent input[type='text'] {
margin-top: 6px;
}
.dlg-danger {
color: var(--slides-error);
}
.eq-gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin: 10px 0;
}
.eq-item {
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
padding: 8px 10px;
text-align: left;
cursor: pointer;
}
.eq-item:hover {
border-color: var(--accent);
}
.eq-preview {
font-family: 'Cambria Math', 'STIX Two Math', Georgia, serif;
font-style: italic;
font-size: 16px;
display: block;
}
.eq-label {
font-size: 11px;
color: var(--text-dim);
}
/* Starting up (while pending file parsing): lightweight placeholder, don't flash the start screen */
.start-booting {
justify-content: center;
color: var(--text-dim);
font-size: 13px;
}
/* AI survey card */
/* Clarify card docked in the composer slot */
.ai-clarify-card {
display: flex;
flex-direction: column;
box-sizing: border-box;
width: 100%;
/* The card sits outside the chat scroll area, so without a height clamp a
long option list pushes the Skip/next/submit row below the window edge
on short windows — leaving no reachable way to advance the wizard (r58).
Clamp the card and let the question block scroll instead. */
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);
}
@keyframes ai-clarify-rise {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 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(--slides-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;
/* scroll region when the clamped card cannot fit the whole option list;
head and actions stay pinned either side of it */
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);
}
@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);
}
}
.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(--slides-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;
}
/* Composer variant: single-select radios are visually removed — selection reads
from the row fill; a hover-revealed advance arrow appears on the right */
.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(--slides-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(--slides-focus-ring);
}
/* Footer actions */
.ai-clarify-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
}
/* Multi-select foot: "{n} selected" left, actions right */
.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(--slides-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(--slides-focus-ring);
}
/* Answered receipt: the submitted Q/A shown as a right-aligned user-reply card
(answered state) */
.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-chip-bounce {
0%,
100% {
transform: translateY(-1.5px);
}
50% {
transform: translateY(1.5px);
}
}
@media (prefers-reduced-motion: reduce) {
.ai-clarify-card,
.ai-clarify-chip-arrow,
.ai-clarify-q.slide-next,
.ai-clarify-q.slide-prev {
animation: none;
}
}
/* ================= Generation progress card (deck-progress-card) ================= */
/* Interactive card framing: white card, quiet border, soft shadow */
.deck-progress-card {
margin: 6px 0 4px;
padding: 12px 16px;
background: var(--color-bg-page);
border: 1px solid var(--color-border-default);
border-radius: 12px;
box-shadow: var(--slides-shadow-card);
font-size: 14px;
color: var(--color-text-secondary);
}
/* Collapsible head: one-line status + caret; the only loader while collapsed */
.deck-progress-head {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 0;
margin: 0;
background: none;
border: none;
cursor: pointer;
user-select: none;
font-family: inherit;
font-size: 14px;
text-align: left;
color: inherit;
}
.deck-progress-head:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--slides-focus-ring);
border-radius: 4px;
}
.deck-progress-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.deck-progress-body.open {
grid-template-rows: 1fr;
}
.deck-progress-body-inner {
overflow: hidden;
min-height: 0;
}
.deck-progress-body.open .deck-progress-body-inner {
padding-top: 8px;
}
.deck-progress-title {
font-size: 14px;
font-weight: 400;
color: var(--color-text-secondary);
}
.deck-progress-title.is-error {
color: var(--slides-ai-step-error);
animation: none;
}
.deck-progress-done {
font-size: 14px;
font-weight: 500;
color: var(--color-text-primary);
}
.deck-progress-steps {
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 2px;
}
.deck-progress-step {
display: flex;
align-items: center;
gap: 7px;
}
.deck-progress-icon {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
flex-shrink: 0;
}
.deck-progress-icon.done,
.deck-progress-icon.stopped {
color: var(--color-text-secondary);
}
.deck-progress-icon.error {
color: var(--slides-ai-step-error);
}
.deck-progress-icon.running {
color: var(--color-brand-secondary);
}
.deck-progress-spinner {
display: inline-block;
width: 6px;
height: 6px;
background: var(--color-brand-secondary);
border-radius: 50%;
animation: deck-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes deck-dot-pulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.4;
transform: scale(1.3);
}
}
@media (prefers-reduced-motion: reduce) {
.deck-progress-spinner {
animation: none;
}
}
.deck-progress-step-label {
color: var(--color-text-secondary);
font-size: 14px;
}
.deck-progress-pages {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 3px;
max-height: 120px;
overflow-y: auto;
padding-right: 2px;
}
.deck-progress-page-item {
display: flex;
align-items: center;
gap: 5px;
padding: 2px 0;
}
.deck-progress-page-icon {
font-size: 10px;
width: 14px;
flex-shrink: 0;
text-align: center;
}
.deck-progress-page-title {
font-size: 12px;
color: var(--color-text-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.deck-progress-page-error-text {
font-size: 10.5px;
color: var(--slides-ai-step-error);
opacity: 0.75;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
min-width: 0;
}
.deck-progress-page-done .deck-progress-page-icon {
color: var(--color-text-secondary);
}
.deck-progress-page-running .deck-progress-page-icon {
color: var(--color-brand-secondary);
}
.deck-progress-page-error .deck-progress-page-icon {
color: var(--slides-ai-step-error);
}
.deck-progress-page-done .deck-progress-page-title {
color: var(--color-text-tertiary);
}
.deck-progress-page-error .deck-progress-page-title {
color: var(--slides-ai-step-error);
}
.deck-progress-page-running .deck-progress-page-title {
color: var(--color-text-primary);
font-weight: 500;
}
/* ── Contextual tabs (picture/table/chart design) ───────────────────
* Same look as the regular tabs (.ribbon-tab covers hover/active/underline);
* no separate styling. */
/* Table style cards */
.rb-table-style-card {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
width: 60px;
padding: 4px 3px;
border: 1.5px solid var(--border);
border-radius: 5px;
background: var(--surface);
cursor: pointer;
font-size: 11px;
color: var(--text);
transition: border-color 0.12s;
}
.rb-table-style-card:hover:not(:disabled) {
border-color: var(--accent);
background: var(--hover);
}
.rb-table-style-card:disabled {
opacity: 0.4;
cursor: default;
}
.rb-table-style-preview {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 26px;
border-radius: 2px;
overflow: hidden;
}
.rb-table-style-label {
font-size: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 56px;
}
/* Shading palette */
.rb-table-shading {
display: flex;
flex-wrap: wrap;
gap: 3px;
padding: 2px;
max-width: 130px;
}
.rb-color-swatch {
width: 18px;
height: 18px;
border: 1.5px solid var(--border-strong);
border-radius: 3px;
cursor: pointer;
padding: 0;
}
.rb-color-swatch:hover:not(:disabled) {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.rb-color-swatch:disabled {
opacity: 0.4;
cursor: default;
}
.rb-color-none {
background: var(--slides-paper) !important;
font-size: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--slides-swatch-none-ink);
}
/* Border controls */
.rb-table-border-row {
display: flex;
align-items: center;
gap: 4px;
margin-top: 4px;
}
.rb-label {
font-size: 11px;
color: var(--text-dim);
white-space: nowrap;
}
.rb-color-input {
width: 28px;
height: 22px;
border: 1px solid var(--border);
border-radius: 3px;
padding: 1px;
cursor: pointer;
}
/* Table border-weight dropdown: compact trigger, sized to "2.25pt" */
.rb-border-weight-dd {
width: 74px;
}
.rb-border-weight-dd .gs-dd-btn {
height: 22px;
font-size: 11px;
}
/* Chart color scheme cards */
.rb-chart-scheme-card {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 3px;
width: 68px;
padding: 5px 3px;
border: 1.5px solid var(--border);
border-radius: 5px;
background: var(--surface);
cursor: pointer;
font-size: 11px;
color: var(--text);
transition: border-color 0.12s;
}
.rb-chart-scheme-card:hover:not(:disabled) {
border-color: var(--slides-select-border);
background: var(--slides-select-hover-bg);
}
.rb-chart-scheme-card:disabled {
opacity: 0.4;
cursor: default;
}
.rb-chart-scheme-swatches {
display: flex;
gap: 2px;
}
.rb-chart-scheme-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid var(--slides-swatch-ring);
}
.rb-chart-scheme-label {
font-size: 10px;
}
.rb-input-sm {
font-size: 11px;
padding: 2px 6px;
border: 1px solid var(--border);
border-radius: 3px;
background: var(--surface);
color: var(--text);
width: 120px;
}
/* Add-chart-element dropdown (title/axis titles/legend/toggles) */
.rb-chart-elem-drop {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px;
min-width: 250px;
}
.rb-chart-elem-drop .rb-drop-title {
margin: 2px 0 0;
}
/* Change-colors dropdown (color card grid) */
.rb-chart-colors-drop {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 10px;
width: 316px;
}
.rb-menu button.active {
background: var(--slides-select-active-bg);
font-weight: 600;
}
/* Change chart type dialog */
.chart-type-modal {
width: min(460px, 92vw);
}
.chart-type-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.chart-type-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 4px 6px;
border: 1.5px solid var(--border);
border-radius: 6px;
background: var(--surface);
cursor: pointer;
color: var(--text);
transition:
border-color 0.12s,
background 0.12s;
}
.chart-type-card:hover {
border-color: var(--slides-select-border);
background: var(--slides-select-hover-bg);
}
.chart-type-card.active {
border-color: var(--slides-select-border);
background: var(--slides-select-active-bg);
}
.chart-type-label {
font-size: 12px;
}
/* Chart data edit dialog */
.chart-data-modal {
width: min(760px, 92vw);
}
.chart-data-scroll {
max-height: 60vh;
overflow: auto;
}
.chart-data-grid {
border-collapse: collapse;
width: 100%;
}
.chart-data-grid th,
.chart-data-grid td {
border: 1px solid var(--border);
padding: 0;
}
.chart-data-grid input {
width: 110px;
height: 28px;
margin: 0;
border: none;
padding: 0 8px;
font-size: 12px;
background: transparent;
outline: none;
}
.chart-data-grid thead input {
font-weight: 600;
}
.chart-data-grid tbody th input {
font-weight: 600;
}
.chart-data-grid input:focus {
background: var(--slides-cell-focus-bg);
}
.chart-data-corner,
.chart-data-addcol {
border: none !important;
background: transparent;
}
.chart-data-ser-head {
display: flex;
align-items: center;
}
.chart-data-del {
border: none;
background: transparent;
color: var(--text-dim);
cursor: pointer;
font-size: 13px;
padding: 0 6px;
}
.chart-data-del:disabled {
opacity: 0.3;
cursor: default;
}
.chart-data-del:hover:not(:disabled) {
color: var(--slides-error);
}
.chart-data-add {
border: 1px dashed var(--border-strong);
background: transparent;
border-radius: 4px;
color: var(--text-dim);
cursor: pointer;
font-size: 12px;
padding: 4px 8px;
margin: 2px 4px;
white-space: nowrap;
}
.chart-data-add:hover {
color: var(--accent);
border-color: var(--accent);
}
/* Chart style gallery */
.rb-chart-style-row {
display: flex;
gap: 4px;
max-width: 440px;
overflow-x: auto;
padding-bottom: 2px;
}
.rb-chart-style-card {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 3px 3px 4px;
border: 1.5px solid var(--border);
border-radius: 5px;
background: var(--surface);
cursor: pointer;
color: var(--text);
flex: 0 0 auto;
transition: border-color 0.12s;
}
.rb-chart-style-card:hover:not(:disabled) {
border-color: var(--slides-select-border);
background: var(--slides-select-hover-bg);
}
.rb-chart-style-card.active {
border-color: var(--slides-select-border);
background: var(--slides-select-active-bg);
}
.rb-chart-style-card:disabled {
opacity: 0.4;
cursor: default;
}
/* ---- Picture crop overlay ---- */
.crop-overlay {
position: absolute;
inset: 0;
z-index: 20;
user-select: none;
}
.crop-mask {
position: absolute;
background: var(--slides-crop-mask);
pointer-events: none;
}
.crop-frame {
position: absolute;
border: 2px solid var(--slides-crop-ink);
box-shadow: 0 0 0 1px var(--slides-crop-ring);
pointer-events: none;
/* Rule-of-thirds guides */
background:
linear-gradient(
to right,
transparent calc(33.33% - 0.5px),
var(--slides-crop-thirds) calc(33.33%),
transparent calc(33.33% + 0.5px),
transparent calc(66.66% - 0.5px),
var(--slides-crop-thirds) calc(66.66%),
transparent calc(66.66% + 0.5px)
),
linear-gradient(
to bottom,
transparent calc(33.33% - 0.5px),
var(--slides-crop-thirds) calc(33.33%),
transparent calc(33.33% + 0.5px),
transparent calc(66.66% - 0.5px),
var(--slides-crop-thirds) calc(66.66%),
transparent calc(66.66% + 0.5px)
);
}
.crop-handle {
position: absolute;
background: var(--slides-crop-ink);
border: 1.5px solid var(--slides-crop-ring);
border-radius: 1px;
z-index: 21;
}
.crop-hint {
position: absolute;
background: var(--slides-crop-hint-bg);
color: var(--slides-crop-ink);
font-size: 11px;
padding: 3px 8px;
border-radius: 3px;
pointer-events: none;
white-space: nowrap;
}
/* ── Format painter mode: canvas cursor becomes a brush ───────────────── */
.format-brush-mode .konvajs-content canvas,
.format-brush-mode .konvajs-content {
cursor:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16'%3E%3Crect x='1' y='1.5' width='7' height='4' rx='0.8' fill='%23000'/%3E%3Crect x='3.5' y='5.5' width='2' height='1.5' fill='%23000'/%3E%3Cpath d='M2.5 7h5v5.5q-1.25.8-2.5.8-1.25 0-2.5-.8z' fill='%23000' opacity='.7'/%3E%3C/svg%3E")
4 14,
crosshair !important;
}
/* ── Split button (main action + caret dropdown) ─────────────────────── */
/* Two hit zones tiling one big button (PowerPoint split button, measured
* from PPT: non-hovered half light, hovered half a step darker, the halves
* seamlessly forming one rounded block) — the zones replace the icon-row
* wash instead of floating inside it */
.rb-split .rb-big-icon {
gap: 0;
padding: 0;
}
/* 3px vertical padding lives in the zones (not the row) so the pill height
matches the plain buttons' icon-row wash exactly */
.rb-split .rb-split-main {
display: inline-flex;
align-items: center;
align-self: stretch;
padding: 3px 4px 3px 6px;
border-radius: 4px 0 0 4px;
}
.rb-caret-hit {
display: inline-flex;
align-items: center;
align-self: stretch;
padding: 3px 5px 3px 2px;
border-radius: 0 4px 4px 0;
}
/* the two zones paint the hover themselves, edge to edge */
.rb-split:hover:not(:disabled) .rb-big-icon {
background: none;
}
.rb-split:hover:not(:disabled) .rb-split-main,
.rb-split:hover:not(:disabled) .rb-caret-hit {
background: var(--hover);
}
/* the half under the pointer (or with its dropdown open) darkens a step */
.rb-split:not(:disabled) .rb-split-main:hover,
.rb-split:not(:disabled) .rb-caret-hit:hover,
.rb-split .rb-caret-hit.active {
background: var(--active-bg);
}
/* collapsed-group flyout: the group's original controls in a floating row
* (PowerPoint's responsive ribbon) */
.rb-collapse-panel {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 8px;
}
/* ── Layout picker panel ──────────────────────────────────────────────── */
.rb-layout-panel {
width: 320px;
max-height: 360px;
}
.rb-layout-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
overflow-y: auto;
max-height: 300px;
padding: 2px;
}
.rb-layout-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 4px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--surface);
cursor: pointer;
transition:
border-color 0.12s,
background 0.12s;
width: 136px;
}
.rb-layout-item:hover {
border-color: var(--accent);
background: var(--slides-hover-wash-soft);
}
.rb-layout-preview {
position: relative;
width: 120px;
height: 68px;
background: var(--slides-paper);
border: 1px solid var(--border);
border-radius: 2px;
overflow: hidden;
flex-shrink: 0;
}
.rb-layout-ph {
position: absolute;
border: 1px dashed var(--slides-ph-border);
border-radius: 2px;
background: var(--slides-ph-bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
color: var(--slides-ph-ink);
overflow: hidden;
}
.rb-layout-name {
font-size: 11px;
color: var(--text);
max-width: 128px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
.rb-layout-empty {
font-size: 12px;
color: var(--text-dim);
padding: 8px;
}
/* ── Find/replace floating panel ─────────────────────────────────── */
.find-panel {
position: absolute;
top: 8px;
right: 16px;
z-index: 40;
/* the panel overlaps the ribbon-tabs row, which is a window drag region;
* drag regions hit-test by rectangle regardless of z-order and would
* swallow every click (notably the × close button) */
-webkit-app-region: no-drag;
width: 280px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 8px;
box-shadow: var(--slides-shadow-menu);
padding: 10px 12px;
font-size: 13px;
}
.find-panel-head {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
margin-bottom: 8px;
}
.find-panel-close {
border: none;
background: none;
font-size: 16px;
cursor: pointer;
color: var(--text-dim);
padding: 0 4px;
}
.find-panel-close:hover {
color: var(--text);
}
.find-panel-row {
margin-bottom: 6px;
}
.find-panel-row input[type='text'],
.find-panel-row input:not([type]) {
width: 100%;
box-sizing: border-box;
padding: 5px 8px;
border: 1px solid var(--border-strong);
border-radius: 4px;
font-size: 13px;
}
.find-panel-opts {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text);
}
.find-panel-opts label {
display: flex;
align-items: center;
gap: 4px;
}
.find-panel-status {
color: var(--text-muted);
font-size: 12px;
}
.find-panel-actions {
display: flex;
gap: 6px;
justify-content: flex-end;
margin-bottom: 0;
}
.find-panel-actions button {
padding: 4px 10px;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: var(--surface-subtle);
cursor: pointer;
}
.find-panel-actions button:hover:not(:disabled) {
background: var(--pressed);
}
.find-panel-actions button:disabled {
opacity: 0.5;
cursor: default;
}
/* ── Slide master editing view (full-screen overlay) ── */
.master-view {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
flex-direction: column;
background: var(--canvas);
}
.master-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 14px;
background: var(--accent);
color: var(--slides-on-accent);
flex-shrink: 0;
/* The overlay covers the .ribbon-tabs window drag region; drag regions
* hit-test by rectangle regardless of z-order and would swallow every
* real click on this bar (notably the Close Master View button) */
-webkit-app-region: no-drag;
}
.master-bar-title {
font-size: 13px;
font-weight: 600;
}
.master-close-btn {
margin-left: auto;
padding: 4px 12px;
border: 1px solid var(--slides-on-accent-border);
border-radius: 4px;
background: var(--slides-on-accent-bg);
color: var(--slides-on-accent);
font-size: 12px;
cursor: pointer;
}
.master-close-btn:hover {
background: var(--slides-on-accent-hover);
}
/* Insert controls (text box / shapes gallery) in the master bar; the accent
* background needs its own on-accent tokens, same as the close button */
.master-tools {
display: flex;
align-items: center;
gap: 2px;
}
.master-tool {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 24px;
padding: 0;
border: none;
border-radius: 4px;
background: transparent;
color: var(--slides-on-accent);
cursor: pointer;
}
.master-tool:hover,
.master-tool.active {
background: var(--slides-on-accent-hover);
}
.master-tool-anchor {
position: relative;
display: flex;
}
.master-tool-drop {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 60;
padding: 6px;
border: 1px solid var(--border-strong);
border-radius: 10px;
background: var(--surface);
box-shadow: var(--slides-shadow-drop);
color: var(--text);
}
.master-body {
flex: 1;
display: flex;
overflow: hidden;
}
.master-list {
width: 170px;
}
.master-thumb {
margin-bottom: 22px;
overflow: visible; /* Label hangs below the thumbnail's bottom edge */
}
.master-thumb-layout {
margin-left: 18px;
}
.master-thumb-label {
position: absolute;
left: 0;
right: 0;
bottom: -16px;
font-size: 10px;
line-height: 14px;
color: var(--text-dim);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.master-stage {
flex: 1;
overflow: auto;
padding: 28px;
display: flex;
justify-content: safe center;
}
.master-stage .stage-rel {
flex-shrink: 0;
background: var(--slides-paper);
box-shadow: var(--slides-shadow-stage);
}
/* CSS approximations of the newly added transition effects */
.slideshow .ss-anim-cover {
animation: ss-cover 0.5s ease both;
}
.slideshow .ss-anim-pull {
animation: ss-pull 0.5s ease both;
}
.slideshow .ss-anim-dissolve {
animation: ss-fade 0.6s steps(12) both;
}
.slideshow .ss-anim-zoom {
animation: ss-zoomin 0.5s ease both;
}
@keyframes ss-cover {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes ss-pull {
from {
clip-path: inset(0 0 0 100%);
}
to {
clip-path: inset(0 0 0 0);
}
}
@keyframes ss-zoomin {
from {
transform: scale(0.2);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* Print dialog (PowerPoint-style: preview pane + options column) */
.modal.print-dialog {
width: min(880px, calc(100vw - 64px));
}
.print-dialog-body {
display: flex;
gap: 18px;
height: min(560px, calc(100vh - 220px));
}
.print-preview-pane {
flex: 1;
min-width: 0;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--hover);
overflow: hidden;
}
.print-preview-pane iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.print-preview-empty {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-dim);
font-size: 13px;
}
.print-options {
width: 240px;
flex-shrink: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.print-options fieldset {
margin: 0;
padding: 8px 10px 6px;
border: 1px solid var(--border);
border-radius: 8px;
}
.print-options legend {
padding: 0 4px;
font-size: 12px;
color: var(--text-dim);
}
.print-options .print-radio {
display: flex;
align-items: center;
gap: 7px;
margin: 0 0 7px;
font-size: 13px;
color: var(--text);
cursor: pointer;
}
.print-options .print-radio input {
display: inline-block;
width: auto;
height: auto;
margin: 0;
accent-color: var(--accent);
}
.print-options .print-radio:has(input:disabled) {
opacity: 0.45;
cursor: default;
}
.print-options .print-range-input {
display: block;
width: 100%;
box-sizing: border-box;
height: 28px;
margin: 0;
border: 1px solid var(--border-strong);
border-radius: 4px;
padding: 0 8px;
font-size: 12px;
outline: none;
background: var(--surface);
}
.print-options .print-range-input:focus {
border-color: var(--accent);
}
.print-options .print-range-input.invalid {
border-color: var(--danger);
}
.print-options .print-select {
display: block;
width: 100%;
box-sizing: border-box;
height: 28px;
margin: 2px 0 6px;
border: 1px solid var(--border-strong);
border-radius: 4px;
padding: 0 6px;
font-size: 12px;
outline: none;
background: var(--surface);
color: inherit;
}
.print-options .print-select:focus {
border-color: var(--accent);
}
.print-options .print-copies-row {
display: flex;
align-items: center;
gap: 8px;
margin: 4px 0;
}
.print-options .print-copies-row label:first-child {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
}
.print-options .print-copies-row .print-range-input {
width: 64px;
}
.print-page-count {
margin-top: auto;
padding: 2px 2px 0;
font-size: 12px;
color: var(--text-dim);
text-align: right;
}
/* Sliding AI dock: one persistent wrapper animates between the panel width and
* the 34px collapsed rail (Excel-parity 180ms ease); --ai-panel-width tracks
* the panel's drag-resizer */
.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 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;
}
/* full-viewport slideshow transitions are the highest vestibular risk */
.slideshow [class*='ss-anim-'] {
animation-duration: 0.01ms !important;
}
}
.ai-login-btn {
margin-top: 8px;
border: 1px solid var(--accent);
border-radius: 6px;
background: var(--accent);
padding: 4px 14px;
font-size: 13px;
color: var(--slides-on-accent);
cursor: pointer;
}
.ai-login-btn:hover {
opacity: 0.88;
}
/* ================= transient toast (save feedback) ================= */
.app-toast {
position: fixed;
top: 64px;
left: 50%;
transform: translate(-50%, -8px);
z-index: 2000;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 8px;
background: var(--slides-toast-bg);
color: var(--slides-toast-ink);
font-size: 13px;
box-shadow: var(--slides-shadow-toast);
opacity: 0;
pointer-events: none;
transition:
opacity 0.18s ease,
transform 0.18s ease;
max-width: 60vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-toast.show {
opacity: 1;
transform: translate(-50%, 0);
}
.app-toast.error {
background: var(--slides-toast-error-bg);
}
.app-toast-icon {
width: 16px;
height: 16px;
flex: none;
}
.app-toast.success .app-toast-icon {
color: var(--slides-toast-ok);
}
/* body row (AI dock + content column) — the status bar spans only the content
column so the dock runs the full height of the window */
.app-main {
display: flex;
flex: 1;
min-height: 0;
}
.app-content {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
/* Editing overlay bullets: the canvas hides the edited node's text, so each paragraph div
* draws its bullet as a ::before filling the hanging indent (set by TextEditOverlay) */
.slide-text-editor > div[data-bullet-text]::before {
content: attr(data-bullet-text);
display: inline-block;
/* hangs into the left margin like the canvas bullet; the width past the hang pushes the text */
margin-left: calc(-1 * var(--bullet-hang));
width: var(--bullet-w);
/* zero line box: a glyph larger than the text keeps the baseline without growing the line */
line-height: 0;
font-family: var(--bullet-font, inherit);
font-size: var(--bullet-size, inherit);
font-weight: var(--bullet-weight, normal);
color: var(--bullet-color, inherit);
white-space: pre;
user-select: none;
pointer-events: none;
}
.slide-text-editor > div[data-bullet-img] {
position: relative;
}
/* Picture bullet: the ::before (an invisible glyph) reserves the hanging indent, the ::after paints the image */
.slide-text-editor > div[data-bullet-img]::after {
content: '';
position: absolute;
left: var(--bullet-x);
top: var(--bullet-y);
width: var(--bullet-img-w);
height: var(--bullet-h);
background: var(--bullet-img) center / contain no-repeat;
user-select: none;
pointer-events: none;
}
/* ── Slide Show > Record: the recording bar ─────────────────────── */
.slideshow .ss-record {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 12px;
background: var(--slides-show-pill-bg);
border: 1px solid var(--slides-show-line-15);
border-radius: 6px;
padding: 6px 14px;
font-variant-numeric: tabular-nums;
color: var(--slides-show-ink);
z-index: 2;
}
.slideshow .ss-record-failed {
pointer-events: none;
}
.slideshow .ss-record-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--slides-show-ink-60);
}
.slideshow .ss-record-dot.on {
background: var(--danger);
}
.slideshow .ss-record-state {
font-size: 13px;
}
.slideshow .ss-record-cur {
font-size: 16px;
font-weight: 600;
}
.slideshow .ss-record-total {
color: var(--slides-show-ink-60);
font-size: 12px;
}
.slideshow .ss-record-btn {
font: inherit;
font-size: 12px;
color: var(--slides-show-ink);
background: transparent;
border: 1px solid var(--slides-show-line-15);
border-radius: 4px;
padding: 2px 10px;
cursor: pointer;
}
/* ── 3D models: the rotation handle and the live model while it turns ── */
.m3d-turn {
position: absolute;
z-index: 20;
pointer-events: none;
}
.m3d-turn canvas {
width: 100%;
height: 100%;
visibility: hidden;
}
.m3d-turn.turning canvas {
visibility: visible;
}
.m3d-turn-handle {
position: absolute;
top: 50%;
left: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
transform: translate(-50%, -50%);
border: 1px solid var(--border-strong);
border-radius: 50%;
background: var(--surface);
color: var(--text);
box-shadow: var(--slides-shadow-badge);
cursor: grab;
pointer-events: auto;
touch-action: none;
}
.m3d-turn.turning .m3d-turn-handle {
cursor: grabbing;
}
/* ── AI Real-Time On-Canvas Position & Element Spotlight ── */
.ai-live-stage-layer {
position: absolute;
inset: 0;
z-index: 28;
pointer-events: none;
overflow: visible;
}
.ai-live-morph-frame {
position: absolute;
z-index: 3;
box-sizing: border-box;
border: 2px solid #8B3A1A;
border-radius: 5px;
background: rgba(217, 119, 87, 0.08);
box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.16);
transition:
left 220ms cubic-bezier(0.16, 1, 0.3, 1),
top 220ms cubic-bezier(0.16, 1, 0.3, 1),
width 220ms cubic-bezier(0.16, 1, 0.3, 1),
height 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-live-morph-pointer {
position: absolute;
top: -26px;
left: -2px;
display: inline-flex;
align-items: center;
gap: 5px;
max-width: 380px;
padding: 3px 9px;
border-radius: 6px;
background: #8B3A1A;
color: #FFFFFF;
font-family: var(--font-ui, 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif);
font-size: 11px;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-shadow: 0 3px 10px rgba(28, 27, 24, 0.28);
transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-live-el-spotlight {
position: absolute;
z-index: 2;
box-sizing: border-box;
border: 1.5px dashed rgba(217, 119, 87, 0.75);
border-radius: 4px;
background: rgba(217, 119, 87, 0.06);
transition:
left 220ms cubic-bezier(0.16, 1, 0.3, 1),
top 220ms cubic-bezier(0.16, 1, 0.3, 1),
width 220ms cubic-bezier(0.16, 1, 0.3, 1),
height 220ms cubic-bezier(0.16, 1, 0.3, 1),
opacity 180ms cubic-bezier(0.16, 1, 0.3, 1);
animation: ai-live-el-breathe 1.4s ease-in-out infinite;
}
.ai-live-el-spotlight.is-focused {
opacity: 0;
}
.ai-live-el-tag {
position: absolute;
top: -22px;
left: -2px;
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 320px;
padding: 2px 7px;
border-radius: 4px;
background: rgba(139, 58, 26, 0.85);
color: #FFFFFF;
font-family: var(--font-ui, 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif);
font-size: 10.5px;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-shadow: 0 2px 6px rgba(28, 27, 24, 0.22);
}
.thumb.ai-live-thumb {
border-color: var(--color-ai-action, #8B3A1A) !important;
box-shadow: 0 0 0 2px rgba(217, 119, 87, 0.32) !important;
transition: box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ai-live-banner-shift {
from {
opacity: 0.5;
transform: translate(-50%, -4px);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
@keyframes ai-live-stage-pulse-anim {
0%, 100% {
transform: scale(0.9);
opacity: 0.85;
}
50% {
transform: scale(1.2);
opacity: 1;
}
}
@keyframes ai-live-el-breathe {
0%, 100% {
border-color: #D97757;
background: rgba(217, 119, 87, 0.08);
}
50% {
border-color: #8B3A1A;
background: rgba(217, 119, 87, 0.16);
}
}
/* ── Phase 4 Real-time Slides Collaboration & Live Web Presenter (WBS 04.01) ── */
.slides-collab-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 12px;
background: var(--surface);
border-bottom: 1px solid var(--border);
font-size: 12px;
color: var(--text);
z-index: 40;
}
.slides-collab-presence {
display: flex;
align-items: center;
gap: 4px;
}
.slides-presence-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid var(--accent);
background: var(--surface-hover);
color: var(--text);
font-size: 10px;
font-weight: 600;
}
.slides-collab-sync-badge {
padding: 2px 8px;
border-radius: 999px;
background: var(--surface-hover);
border: 1px solid var(--border);
font-size: 11px;
color: var(--text-muted);
}
.slides-collab-slide-picker {
display: inline-flex;
align-items: center;
gap: 6px;
}
.slides-collab-active-label {
font-weight: 600;
color: var(--text);
}
.slides-collab-select {
padding: 2px 6px;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 11.5px;
}
.slides-collab-btn {
padding: 3px 10px;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 11.5px;
cursor: pointer;
}
.slides-collab-btn.is-active {
background: var(--accent);
border-color: var(--accent);
color: var(--surface);
font-weight: 600;
}
.slides-live-presenter-badge {
padding: 2px 8px;
border-radius: 4px;
background: var(--accent-soft);
border: 1px solid var(--accent);
color: var(--accent);
font-size: 11px;
font-weight: 600;
}
.slides-collab-elements-layer {
position: fixed;
left: 260px;
top: 130px;
width: 640px;
height: 360px;
pointer-events: none;
z-index: 35;
}
.slides-collab-element-card {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
border-radius: 6px;
border: 2px solid var(--accent);
background: var(--surface);
color: var(--text);
font-size: 13px;
font-weight: 600;
}
.slides-remote-cursor {
position: absolute;
pointer-events: none;
}
.slides-remote-cursor-label {
display: inline-block;
padding: 2px 6px;
border-radius: 4px;
background: var(--accent);
color: var(--surface);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}