| | :root { |
| | color-scheme: light; |
| | --bg: #f4efe7; |
| | --surface: rgba(255, 250, 242, 0.88); |
| | --surface-strong: #fffaf2; |
| | --surface-soft: rgba(255, 255, 255, 0.52); |
| | --ink: #1f1812; |
| | --muted: #6c5c50; |
| | --line: rgba(70, 49, 28, 0.14); |
| | --line-strong: rgba(70, 49, 28, 0.24); |
| | --accent: #c75a11; |
| | --accent-deep: #8f3f0a; |
| | --accent-soft: rgba(199, 90, 17, 0.14); |
| | --success: #166534; |
| | --shadow: 0 24px 64px rgba(70, 49, 28, 0.14); |
| | } |
| |
|
| | * { |
| | box-sizing: border-box; |
| | } |
| |
|
| | [hidden] { |
| | display: none !important; |
| | } |
| |
|
| | body { |
| | margin: 0; |
| | min-height: 100vh; |
| | color: var(--ink); |
| | font-family: "Space Grotesk", "Segoe UI", sans-serif; |
| | background: |
| | radial-gradient(circle at top left, rgba(199, 90, 17, 0.15), transparent 28%), |
| | radial-gradient(circle at 85% 15%, rgba(26, 95, 63, 0.12), transparent 24%), |
| | linear-gradient(145deg, #f9f4ec, #ece0ce 55%, #e5d4be); |
| | } |
| |
|
| | button, |
| | input, |
| | textarea, |
| | select { |
| | font: inherit; |
| | } |
| |
|
| | button { |
| | cursor: pointer; |
| | } |
| |
|
| | .client-shell { |
| | width: min(1080px, calc(100% - 28px)); |
| | margin: 0 auto; |
| | padding: 18px 0 26px; |
| | } |
| |
|
| | .workspace-card, |
| | .editor-card, |
| | .attachments-card, |
| | .attachment-picker, |
| | .settings-panel, |
| | .output-card { |
| | border: 1px solid var(--line); |
| | border-radius: 28px; |
| | background: var(--surface); |
| | box-shadow: var(--shadow); |
| | backdrop-filter: blur(14px); |
| | } |
| |
|
| | .workspace-card { |
| | padding: 24px; |
| | display: grid; |
| | gap: 18px; |
| | min-height: calc(100vh - 44px); |
| | } |
| |
|
| | .tab-button, |
| | .format-button, |
| | .tool-button, |
| | .send-button, |
| | .secondary-button, |
| | .attachment-remove, |
| | .attachment-preview-trigger, |
| | .attachment-preview__close { |
| | border: 1px solid var(--line); |
| | background: var(--surface-strong); |
| | color: var(--ink); |
| | } |
| |
|
| | .eyebrow { |
| | margin: 0; |
| | font-size: 0.76rem; |
| | letter-spacing: 0.24em; |
| | text-transform: uppercase; |
| | color: var(--accent-deep); |
| | } |
| |
|
| | h2, |
| | h3 { |
| | margin: 0; |
| | font-family: "Avenir Next", "Space Grotesk", sans-serif; |
| | } |
| |
|
| | .section-copy, |
| | .empty-state, |
| | .response-block p, |
| | .attachment-meta span { |
| | margin: 0; |
| | line-height: 1.55; |
| | color: var(--muted); |
| | } |
| |
|
| | .top-bar, |
| | .section-head { |
| | display: flex; |
| | justify-content: flex-start; |
| | gap: 16px; |
| | align-items: center; |
| | } |
| |
|
| | .tab-strip { |
| | display: flex; |
| | gap: 10px; |
| | flex-wrap: wrap; |
| | justify-content: flex-start; |
| | } |
| |
|
| | .tab-button { |
| | min-height: 44px; |
| | padding: 0 18px; |
| | border-radius: 999px; |
| | transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; |
| | } |
| |
|
| | .tab-button.is-active { |
| | border-color: transparent; |
| | color: #fff; |
| | background: linear-gradient(135deg, var(--accent), var(--accent-deep)); |
| | } |
| |
|
| | .tab-button:hover, |
| | .format-button:hover, |
| | .tool-button:hover, |
| | .send-button:hover, |
| | .picker-mode-button:hover, |
| | .picker-action-button:hover, |
| | .attachment-remove:hover, |
| | .attachment-preview-trigger:hover, |
| | .attachment-preview__close:hover { |
| | transform: translateY(-1px); |
| | } |
| |
|
| | .tab-panel { |
| | display: none; |
| | gap: 18px; |
| | animation: panel-in 180ms ease; |
| | } |
| |
|
| | .tab-panel.is-active { |
| | display: grid; |
| | } |
| |
|
| | .editor-card, |
| | .attachments-card, |
| | .attachment-picker, |
| | .settings-panel, |
| | .output-card { |
| | padding: 18px; |
| | } |
| |
|
| | .editor-card { |
| | display: grid; |
| | gap: 14px; |
| | } |
| |
|
| | .editor-toolbar, |
| | .tool-row { |
| | display: flex; |
| | gap: 10px; |
| | flex-wrap: nowrap; |
| | } |
| |
|
| | .format-button, |
| | .tool-button, |
| | .send-button, |
| | .secondary-button { |
| | min-height: 48px; |
| | border-radius: 18px; |
| | padding: 0 16px; |
| | display: inline-flex; |
| | align-items: center; |
| | justify-content: center; |
| | gap: 10px; |
| | transition: transform 160ms ease, opacity 160ms ease, background 160ms ease; |
| | } |
| |
|
| | .format-button { |
| | min-width: 70px; |
| | } |
| |
|
| | .tool-row { |
| | align-items: center; |
| | } |
| |
|
| | .icon-button { |
| | width: 48px; |
| | min-width: 48px; |
| | padding: 0; |
| | flex: 0 0 48px; |
| | } |
| |
|
| | .tool-button svg, |
| | .send-button svg { |
| | width: 20px; |
| | height: 20px; |
| | fill: none; |
| | stroke: currentColor; |
| | stroke-width: 1.8; |
| | stroke-linecap: round; |
| | stroke-linejoin: round; |
| | } |
| |
|
| | .tool-button.is-active { |
| | border-color: var(--line-strong); |
| | background: var(--accent-soft); |
| | } |
| |
|
| | .send-button { |
| | margin-left: auto; |
| | color: #fff; |
| | border-color: transparent; |
| | background: linear-gradient(135deg, var(--accent), var(--accent-deep)); |
| | } |
| |
|
| | .send-button:disabled { |
| | opacity: 0.7; |
| | cursor: progress; |
| | } |
| |
|
| | .secondary-button { |
| | white-space: nowrap; |
| | } |
| |
|
| | .tool-row .send-button { |
| | margin-left: auto; |
| | } |
| |
|
| | .rich-editor { |
| | min-height: 320px; |
| | padding: 22px; |
| | border-radius: 22px; |
| | border: 1px solid var(--line); |
| | background: |
| | linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 251, 246, 0.95)), |
| | repeating-linear-gradient(180deg, transparent, transparent 31px, rgba(70, 49, 28, 0.07) 32px); |
| | outline: none; |
| | font-size: 1rem; |
| | line-height: 1.75; |
| | } |
| |
|
| | .rich-editor:empty::before { |
| | content: attr(data-placeholder); |
| | color: rgba(108, 92, 80, 0.8); |
| | } |
| |
|
| | .attachments-card, |
| | .attachment-picker, |
| | .settings-panel { |
| | display: grid; |
| | gap: 16px; |
| | } |
| |
|
| | .attachment-list { |
| | display: grid; |
| | gap: 12px; |
| | } |
| |
|
| | .picker-mode-row, |
| | .picker-grid { |
| | display: grid; |
| | gap: 12px; |
| | } |
| |
|
| | .picker-mode-row { |
| | grid-template-columns: repeat(2, minmax(0, 1fr)); |
| | } |
| |
|
| | .picker-mode-button, |
| | .picker-action-button { |
| | min-height: 46px; |
| | border-radius: 16px; |
| | border: 1px solid var(--line); |
| | background: var(--surface-strong); |
| | color: var(--ink); |
| | } |
| |
|
| | .picker-mode-button.is-active { |
| | border-color: var(--line-strong); |
| | background: var(--accent-soft); |
| | } |
| |
|
| | .picker-panel { |
| | display: none; |
| | gap: 14px; |
| | padding: 14px; |
| | border-radius: 20px; |
| | border: 1px solid var(--line); |
| | background: var(--surface-soft); |
| | } |
| |
|
| | .picker-panel.is-active { |
| | display: grid; |
| | } |
| |
|
| | .picker-copy { |
| | margin: 0; |
| | color: var(--muted); |
| | } |
| |
|
| | .picker-grid { |
| | grid-template-columns: 180px minmax(0, 1fr); |
| | } |
| |
|
| | .picker-link-field { |
| | grid-column: auto; |
| | } |
| |
|
| | .attachment-item { |
| | display: grid; |
| | grid-template-columns: auto 1fr auto; |
| | gap: 14px; |
| | align-items: center; |
| | padding: 12px; |
| | border-radius: 22px; |
| | border: 1px solid var(--line); |
| | background: var(--surface-soft); |
| | } |
| |
|
| | .attachment-preview-trigger { |
| | display: inline-flex; |
| | align-items: center; |
| | justify-content: center; |
| | width: 78px; |
| | height: 78px; |
| | padding: 0; |
| | border-radius: 18px; |
| | overflow: hidden; |
| | } |
| |
|
| | .attachment-thumb { |
| | width: 78px; |
| | height: 78px; |
| | object-fit: cover; |
| | } |
| |
|
| | .attachment-audio-tile { |
| | display: grid; |
| | gap: 6px; |
| | text-align: center; |
| | } |
| |
|
| | .attachment-audio-tile svg { |
| | width: 24px; |
| | height: 24px; |
| | margin: 0 auto; |
| | fill: none; |
| | stroke: currentColor; |
| | stroke-width: 1.8; |
| | stroke-linecap: round; |
| | stroke-linejoin: round; |
| | } |
| |
|
| | .attachment-audio-tile span { |
| | font-size: 0.72rem; |
| | text-transform: uppercase; |
| | letter-spacing: 0.08em; |
| | } |
| |
|
| | .attachment-meta { |
| | display: grid; |
| | gap: 6px; |
| | } |
| |
|
| | .attachment-remove { |
| | min-height: 42px; |
| | padding: 0 16px; |
| | border-radius: 14px; |
| | } |
| |
|
| | .attachment-preview { |
| | position: fixed; |
| | inset: 0; |
| | z-index: 20; |
| | display: grid; |
| | place-items: center; |
| | padding: 18px; |
| | } |
| |
|
| | .attachment-preview__backdrop { |
| | position: absolute; |
| | inset: 0; |
| | background: rgba(24, 18, 12, 0.58); |
| | backdrop-filter: blur(4px); |
| | } |
| |
|
| | .attachment-preview__card { |
| | position: relative; |
| | z-index: 1; |
| | width: min(720px, 100%); |
| | max-height: min(86vh, 920px); |
| | padding: 20px; |
| | border-radius: 28px; |
| | border: 1px solid var(--line); |
| | background: var(--surface); |
| | box-shadow: var(--shadow); |
| | display: grid; |
| | gap: 18px; |
| | } |
| |
|
| | .attachment-preview__head { |
| | display: flex; |
| | justify-content: space-between; |
| | gap: 16px; |
| | align-items: start; |
| | } |
| |
|
| | .attachment-preview__close { |
| | width: 42px; |
| | height: 42px; |
| | border-radius: 999px; |
| | padding: 0; |
| | } |
| |
|
| | .attachment-preview__body { |
| | display: grid; |
| | place-items: center; |
| | min-height: 280px; |
| | } |
| |
|
| | .attachment-preview__image, |
| | .attachment-preview__audio-wrap { |
| | width: 100%; |
| | } |
| |
|
| | .attachment-preview__image { |
| | max-width: 100%; |
| | max-height: 68vh; |
| | object-fit: contain; |
| | border-radius: 20px; |
| | } |
| |
|
| | .attachment-preview__audio-wrap { |
| | padding: 22px; |
| | border-radius: 20px; |
| | background: var(--surface-soft); |
| | border: 1px solid var(--line); |
| | } |
| |
|
| | .attachment-preview__audio { |
| | width: 100%; |
| | } |
| |
|
| | .settings-grid { |
| | display: grid; |
| | grid-template-columns: repeat(2, minmax(0, 1fr)); |
| | gap: 14px; |
| | } |
| |
|
| | .settings-wide { |
| | grid-column: 1 / -1; |
| | } |
| |
|
| | label, |
| | .toggle-card { |
| | display: grid; |
| | gap: 8px; |
| | } |
| |
|
| | label span, |
| | .toggle-card span { |
| | font-size: 0.83rem; |
| | letter-spacing: 0.08em; |
| | text-transform: uppercase; |
| | color: var(--muted); |
| | } |
| |
|
| | input, |
| | textarea, |
| | select { |
| | width: 100%; |
| | padding: 14px 16px; |
| | border-radius: 18px; |
| | border: 1px solid var(--line); |
| | color: var(--ink); |
| | background: var(--surface-strong); |
| | } |
| |
|
| | textarea { |
| | resize: vertical; |
| | } |
| |
|
| | .toggle-card { |
| | align-items: center; |
| | grid-template-columns: 1fr auto; |
| | min-height: 56px; |
| | padding: 0 16px; |
| | border: 1px solid var(--line); |
| | border-radius: 18px; |
| | background: var(--surface-strong); |
| | } |
| |
|
| | .toggle-card input { |
| | width: 22px; |
| | height: 22px; |
| | } |
| |
|
| | .response-output { |
| | display: grid; |
| | gap: 14px; |
| | } |
| |
|
| | .response-block { |
| | padding: 18px; |
| | border-radius: 22px; |
| | border: 1px solid var(--line); |
| | background: var(--surface-soft); |
| | } |
| |
|
| | .response-block strong { |
| | display: inline-block; |
| | margin-bottom: 12px; |
| | } |
| |
|
| | .response-image, |
| | .response-audio { |
| | width: 100%; |
| | margin-top: 14px; |
| | border-radius: 18px; |
| | } |
| |
|
| | .response-image { |
| | max-height: 420px; |
| | object-fit: cover; |
| | } |
| |
|
| | .rich-response { |
| | display: grid; |
| | gap: 14px; |
| | line-height: 1.65; |
| | } |
| |
|
| | .rich-response p, |
| | .rich-response ul, |
| | .rich-response pre { |
| | margin: 0; |
| | } |
| |
|
| | .rich-response ul { |
| | padding-left: 20px; |
| | } |
| |
|
| | .rich-response pre, |
| | .raw-output { |
| | overflow: auto; |
| | border-radius: 20px; |
| | background: #171411; |
| | color: #f9f4ed; |
| | font-family: "IBM Plex Mono", Consolas, monospace; |
| | } |
| |
|
| | .rich-response pre { |
| | padding: 16px; |
| | } |
| |
|
| | .rich-response code { |
| | padding: 0.15em 0.35em; |
| | border-radius: 8px; |
| | background: rgba(31, 24, 18, 0.08); |
| | font-family: "IBM Plex Mono", Consolas, monospace; |
| | } |
| |
|
| | .raw-output { |
| | margin: 0; |
| | padding: 18px; |
| | min-height: 420px; |
| | font-size: 0.92rem; |
| | } |
| |
|
| | .error-toast { |
| | position: fixed; |
| | right: 16px; |
| | bottom: 16px; |
| | max-width: min(420px, calc(100% - 32px)); |
| | padding: 14px 16px; |
| | border: 0; |
| | border-radius: 16px; |
| | color: #fff; |
| | background: rgba(127, 29, 29, 0.96); |
| | box-shadow: var(--shadow); |
| | text-align: left; |
| | } |
| |
|
| | .status-ok { |
| | color: var(--success); |
| | } |
| |
|
| | .status-busy { |
| | color: var(--accent-deep); |
| | } |
| |
|
| | .sr-only { |
| | position: absolute; |
| | width: 1px; |
| | height: 1px; |
| | padding: 0; |
| | margin: -1px; |
| | overflow: hidden; |
| | clip: rect(0, 0, 0, 0); |
| | white-space: nowrap; |
| | border: 0; |
| | } |
| |
|
| | @keyframes panel-in { |
| | from { |
| | opacity: 0; |
| | transform: translateY(6px); |
| | } |
| |
|
| | to { |
| | opacity: 1; |
| | transform: translateY(0); |
| | } |
| | } |
| |
|
| | @media (max-width: 1040px) { |
| | .workspace-card { |
| | min-height: auto; |
| | } |
| | } |
| |
|
| | @media (max-width: 720px) { |
| | .client-shell { |
| | width: min(100% - 14px, 100%); |
| | padding-top: 8px; |
| | gap: 14px; |
| | } |
| |
|
| | .workspace-card, |
| | .editor-card, |
| | .attachments-card, |
| | .attachment-picker, |
| | .settings-panel, |
| | .output-card { |
| | padding: 16px; |
| | border-radius: 22px; |
| | } |
| |
|
| | .top-bar, |
| | .section-head, |
| | .attachment-item { |
| | grid-template-columns: 1fr; |
| | } |
| |
|
| | .top-bar, |
| | .section-head { |
| | display: grid; |
| | } |
| |
|
| | .tab-strip { |
| | justify-content: start; |
| | } |
| |
|
| | .tool-row { |
| | gap: 8px; |
| | } |
| |
|
| | .settings-grid { |
| | grid-template-columns: 1fr; |
| | } |
| |
|
| | .picker-mode-row, |
| | .picker-grid { |
| | grid-template-columns: 1fr; |
| | } |
| |
|
| | .attachment-item { |
| | grid-template-columns: 1fr; |
| | } |
| |
|
| | .tool-row .send-button { |
| | margin-left: auto; |
| | } |
| | } |
| |
|
