/*
* App-specific styling for File Preview — tuned to blend with Claude's UI.
*/
:root {
--code-bg: var(--panel);
--code-text: var(--color-text-primary, var(--text));
--hljs-keyword: var(--color-text-accent, #8b5cf6);
--hljs-string: var(--color-text-success, #059669);
--hljs-comment: var(--color-text-tertiary, #94a3b8);
--hljs-type: var(--color-text-info, #0f766e);
--hljs-number: var(--color-text-warning, #b45309);
--hljs-attr: var(--color-text-info, #2563eb);
--hljs-built-in: var(--color-text-accent, #6366f1);
--hljs-tag: var(--color-text-info, #0ea5a8);
--content-height: min(82vh, 920px);
--markdown-text: var(--text);
--markdown-muted: var(--text-secondary);
--inline-code-bg: var(--panel-subtle);
--inline-code-border: var(--border);
--inline-code-text: var(--text);
--notice-bg: var(--warning-bg);
--notice-border: var(--warning-border);
--notice-text: var(--warning-text);
}
/* ── Compact row ── */
.compact-row {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 2px;
font-size: 13px;
color: var(--muted);
line-height: 1;
user-select: none;
}
.compact-row--ready {
cursor: pointer;
border-radius: 8px;
transition: color 150ms ease;
}
.compact-row--ready:hover { color: var(--text-secondary); }
.compact-row--ready:hover .compact-chevron { color: var(--text-secondary); }
.compact-chevron {
width: 14px;
height: 14px;
fill: currentColor;
color: var(--muted);
flex-shrink: 0;
transition: transform 200ms ease, color 150ms ease;
}
.tool-shell.expanded .compact-chevron { transform: rotate(90deg); }
.compact-label { color: inherit; }
.compact-filename { color: var(--text-secondary); font-weight: 500; }
.compact-row--ready .compact-label::after { content: ' · '; }
.compact-row--loading {
animation: fade-pulse 1.5s ease-in-out infinite;
}
@keyframes fade-pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* ── Panel (Claude-style card) ── */
.panel {
margin-top: 6px;
border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
border-radius: 16px;
background: var(--panel);
overflow: hidden;
}
@media (prefers-color-scheme: dark) {
.panel {
background: color-mix(in srgb, var(--panel), white 6%);
}
}
[data-theme="dark"] .panel {
background: color-mix(in srgb, var(--panel), white 6%);
}
.tool-shell.collapsed .panel { display: none; }
/* ── Top bar ── */
.panel-topbar {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 12px;
padding: 10px 16px;
border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}
.panel-breadcrumb {
font-size: 13px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 0;
width: 0;
min-width: 0;
}
.breadcrumb-sep {
color: color-mix(in srgb, var(--muted) 50%, transparent);
margin: 0 2px;
}
.panel-topbar-actions {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 4px;
flex: 0 0 auto;
margin-left: auto;
}
.panel-action {
font-size: 13px;
font-weight: 500;
color: var(--muted);
background: none;
border: none;
border-radius: 8px;
padding: 5px 12px;
cursor: pointer;
white-space: nowrap;
transition: color 150ms ease, background 150ms ease;
line-height: 1.4;
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 5px;
}
.panel-action:hover {
color: var(--text);
background: var(--panel-subtle);
}
.panel-action:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.panel-action svg { flex-shrink: 0; opacity: 0.7; }
.panel-action:hover svg { opacity: 1; }
/* ── Footer ── */
.panel-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.01em;
}
.footer-comment-btn {
margin-left: auto;
}
/* ── Selection hint (floating tooltip near selection) ── */
.selection-hint {
position: absolute;
z-index: 10;
padding: 4px 10px;
font-size: 11px;
color: var(--text-secondary);
background: var(--panel);
border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 150ms ease;
}
.selection-hint.visible {
opacity: 1;
}
/* ── Content areas ── */
.panel-content-wrapper {
max-height: var(--content-height);
overflow: auto;
position: relative;
}
.panel-content {
min-height: 0;
}
.source-content .code-viewer { height: 100%; overflow: auto; }
.html-content .html-rendered-frame { min-height: 300px; height: var(--content-height); }
.markdown-content { overflow: auto; padding: 0 4px 0 0; }
.image-content {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, color-mix(in oklab, var(--panel) 86%, var(--panel-muted) 14%), var(--panel));
padding: 16px;
}
.image-preview {
width: 100%;
height: var(--content-height);
max-width: 920px;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.image-preview img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--panel);
}
.notice {
background: var(--notice-bg);
color: var(--notice-text);
padding: 10px 16px;
font-size: 13px;
}
/* ── Load-more banners ── */
.load-lines-banner {
display: block;
width: 100%;
padding: 8px 16px;
font-size: 12px;
font-family: inherit;
color: var(--text-secondary);
background: color-mix(in srgb, var(--panel-muted) 40%, transparent);
border: none;
cursor: pointer;
text-align: center;
transition: color 150ms ease, background 150ms ease;
}
#load-before {
border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
}
#load-after {
border-top: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
}
.load-lines-banner:hover {
color: var(--text-secondary);
background: var(--panel-muted);
}
.load-lines-banner:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ── Code viewer ── */
.code-viewer {
background: transparent;
color: var(--code-text);
overflow-x: auto;
padding: 12px 0;
margin: 0;
font-family: var(--font-mono, ui-monospace, monospace);
line-height: 1.5;
font-size: 13px;
white-space: pre;
border: 0;
border-radius: 0;
}
.code-table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.code-line {
transition: background 80ms ease;
}
.code-line:hover {
background: color-mix(in srgb, var(--panel-muted) 50%, transparent);
}
.code-line.selected {
background: color-mix(in srgb, var(--border) 40%, transparent);
}
.code-line.selected:hover {
background: color-mix(in srgb, var(--border) 55%, transparent);
}
.line-num {
padding: 0 12px 0 18px;
text-align: right;
color: var(--muted);
opacity: 0.5;
user-select: none;
cursor: pointer;
vertical-align: top;
white-space: nowrap;
font-size: 12px;
min-width: 2.5em;
transition: opacity 120ms ease;
}
.line-num:hover {
opacity: 1;
color: var(--text-secondary);
}
.code-line.selected .line-num {
opacity: 0.8;
}
.line-content {
padding: 0 18px 0 8px;
white-space: pre;
width: 100%;
}
.code-viewer .hljs {
display: block;
background: transparent;
color: inherit;
}
/* ── Syntax tokens ── */
.hljs-comment, .hljs-quote { color: var(--hljs-comment); }
.hljs-keyword, .hljs-selector-tag, .hljs-name, .hljs-section,
.hljs-selector-id, .hljs-selector-class, .hljs-doctag, .hljs-regexp { color: var(--hljs-keyword); }
.hljs-string, .hljs-template-tag, .hljs-template-variable, .hljs-variable { color: var(--hljs-string); }
.hljs-type, .hljs-params, .hljs-variable.language_ { color: var(--hljs-type); }
.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet { color: var(--hljs-number); }
.hljs-attr, .hljs-attribute, .hljs-property { color: var(--hljs-attr); }
.hljs-built_in, .hljs-built-in { color: var(--hljs-built-in); }
.hljs-tag, .hljs-selector-pseudo, .hljs-selector-attr { color: var(--hljs-tag); }
.hljs-title, .hljs-title.class_, .hljs-title.function_,
.hljs-meta, .hljs-meta .hljs-keyword, .hljs-subst,
.hljs-punctuation, .hljs-operator { color: inherit; }
/* ── Markdown (typographic, airy, Medium-inspired) ── */
.markdown h1, .markdown h2, .markdown h3 { letter-spacing: -.015em; }
.markdown p { margin: 1em 0; }
.markdown ul, .markdown ol { margin: .8em 0; padding-left: 1.4rem; }
.markdown-doc {
max-width: 720px;
margin: 0 auto;
padding: 32px 28px 36px;
line-height: 1.8;
color: var(--markdown-text);
font-size: 16px;
background: transparent;
border: 0;
border-radius: 0;
}
.markdown-doc h1 {
margin: 0 0 24px;
font-size: 28px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--markdown-text);
}
.markdown-doc h2 {
margin: 36px 0 16px;
font-size: 22px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--markdown-text);
}
.markdown-doc h3 {
margin: 28px 0 12px;
font-size: 18px;
font-weight: 600;
line-height: 1.35;
color: var(--markdown-text);
}
.markdown-doc p {
font-size: 15px;
line-height: 1.75;
color: var(--markdown-muted);
margin: 0 0 1.2em;
}
.markdown-doc li {
font-size: 15px;
line-height: 1.7;
color: var(--markdown-muted);
margin-bottom: 0.3em;
}
.markdown-doc ul, .markdown-doc ol {
margin: 8px 0 20px;
padding-left: 1.3em;
}
.markdown-doc blockquote {
margin: 20px 0;
padding: 2px 0 2px 20px;
border-left: 3px solid color-mix(in srgb, var(--border) 70%, transparent);
color: var(--markdown-muted);
font-style: italic;
}
.markdown-doc hr {
border: none;
border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
margin: 32px 0;
}
.markdown-doc img {
max-width: 100%;
border-radius: 8px;
margin: 16px 0;
}
.markdown-doc code:not(.hljs) {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: .9em;
background: var(--inline-code-bg);
color: var(--inline-code-text);
border: 1px solid var(--inline-code-border);
border-radius: 6px;
padding: 2px 6px;
}
.markdown-doc .code-viewer {
margin: 14px 0;
border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
border-radius: 10px;
}
/* ── HTML frame ── */
.html-rendered-frame {
width: 100%;
border: 0;
border-radius: 0;
background: var(--panel);
display: block;
overflow: hidden;
}
/* ── Responsive ── */
@media (max-width: 720px) {
.markdown-doc { padding: 16px; }
.markdown-doc h1 { font-size: 27px; }
.markdown-doc h2 { font-size: 22px; }
.markdown-doc h3 { font-size: 18px; }
.markdown-doc p, .markdown-doc li { font-size: 15px; }
}
