/* Project-panel sections: real surfaces, never a second app chrome. They are selected from the icon rail (aly-workspace-rail.css), which replaced the row of text tabs that used to sit here. */ .dock-body { overflow: hidden; } /* The history filter menu can list a dozen ranges plus sender and outcome, so it is pinned to the viewport, capped, and scrolls inside itself instead of running off the top and bottom of a phone screen. placeInViewport() sets the inline top/right/bottom; everything else is here. */ .project-menu.workspace-history-menu { position: fixed; min-width: 216px; max-width: min(280px, calc(100vw - 16px)); max-height: min(62vh, 460px); padding: 6px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .workspace-history-menu .project-menu-item { min-height: 33px; padding: 7px 26px 7px 10px; font-size: 12px; } .workspace-history-menu .project-menu-item.is-selected { position: relative; background: var(--surface-2); color: var(--text); font-weight: 650; } .workspace-history-menu .project-menu-item.is-selected::after { content: '✓'; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: var(--jade); font-weight: 750; } .workspace-history-menu .project-menu-item.is-reset { color: var(--muted); font-weight: 650; } .workspace-history-menu .project-menu-item.is-reset:hover, .workspace-history-menu .project-menu-item.is-reset:focus-visible { color: var(--text); } /* Section labels ("Time", "Sender", "Outcome") and the bare rule above Reset. Non-interactive, so they stay out of the arrow-key ring. */ .workspace-history-menu .project-menu-divider.has-label { padding: 8px 10px 3px; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .workspace-history-menu .project-menu-divider.has-label:first-child { padding-top: 2px; } .workspace-history-menu .project-menu-divider:not(.has-label) { height: 1px; margin: 5px 6px; background: var(--surface-line); } .workspace-panel-views { flex: 1; min-height: 0; overflow: hidden; } .workspace-panel-view { height: 100%; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; touch-action: pan-y; } .workspace-panel-view[hidden] { display: none; } .workspace-panel-chat { display: flex; flex-direction: column; } .workspace-panel-server { padding-bottom: 20px; } .workspace-panel-section-head { padding: 16px 14px 10px; } .workspace-panel-section-head h2 { margin: 0 0 4px; font-size: 15px; } .workspace-panel-section-head p { margin: 0; font-size: 12px; line-height: 1.45; } .workspace-panel-loading, .workspace-panel-error { margin: 16px 14px; font-size: 13px; } .workspace-panel-error { color: var(--danger); } .workspace-infrastructure-section, .workspace-infrastructure-files { margin: 0 14px 16px; } .workspace-infrastructure-section > h3, .workspace-infrastructure-files h3 { margin: 0 0 7px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .workspace-infrastructure-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .workspace-infrastructure-card { padding: 9px; border: 1px solid var(--surface-line); border-radius: 9px; background: var(--surface-2); } .workspace-infrastructure-card h3 { margin: 0 0 5px; font-size: 11px; font-weight: 500; color: var(--muted); } .workspace-infrastructure-card strong { display: block; font-size: 13px; } .workspace-infrastructure-card p { margin: 5px 0 0; font-size: 11px; line-height: 1.4; color: var(--muted); } .workspace-infrastructure-files { border-top: 1px solid var(--hair); padding-top: 12px; font-size: 12.5px; } .workspace-infrastructure-files > p { margin: 0; font-size: 12px; line-height: 1.45; } .workspace-file-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; color: var(--muted); font-size: 12.5px; word-break: break-word; } .workspace-setting-label { display: block; margin: 10px 14px 5px; font-size: 12px; color: var(--muted); } .workspace-setting-input { box-sizing: border-box; width: calc(100% - 28px); margin: 0 14px; padding: 9px 10px; border: 1px solid var(--surface-line); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; } .workspace-setting-description { resize: vertical; } .workspace-setting-counter { margin: 3px 14px 0; text-align: right; font-size: 11px; } .workspace-setting-counter.is-over { color: var(--danger); } .workspace-setting-button { margin: 8px 14px 4px; min-height: 32px; padding: 0 10px; border: 1px solid var(--surface-line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; } /* --- The Settings tab ----------------------------------------------------- Everything a Project's Settings page used to hold, in a column that is often 360px wide and sometimes a whole phone. So: ONE scroll area, and collapsible groups inside it — a person opens the one thing they came for instead of scrolling past five sections to reach it. Only AI usage starts open. The groups carry no horizontal padding of their own: the fields inside them (`.workspace-setting-input`, `.workspace-ai-usage`) already sit on the panel's own 14px gutter, and padding the group as well would indent them twice. */ .workspace-panel-settings { display: flex; flex-direction: column; overflow: hidden; } .workspace-settings-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; touch-action: pan-y; padding-bottom: 24px; } /* THE SETTINGS TAB SCROLLS; NOTHING IN IT COLLAPSES. Every section was a `
` — six identical grey bars, five of them closed, so "what are my settings?" meant opening all six and remembering. Now each section is open, titled, and carries one plain line saying what it is for. The generous vertical rhythm is doing real work: it is what lets a person scan down a 360px column and find the section they want without reading any of it. */ .workspace-settings-section { padding: 22px 14px 4px; } .workspace-settings-section + .workspace-settings-section { border-top: 1px solid var(--hair); } .workspace-settings-section-title { margin: 0 0 6px; font-size: 14px; font-weight: 650; color: var(--text); } .workspace-settings-section-note { margin: 0 0 14px; font-size: 12px; line-height: 1.5; color: var(--muted); } .workspace-settings-section-body { display: block; } /* Move project is the only control here that takes the Project somewhere else, so it is last and it is set apart — not by a louder heading, but by the space around it. */ .workspace-settings-section.is-separated { margin-top: 16px; border-top-width: 4px; } /* Inside a section the AI usage block IS the section, so it drops the separator and the heading it needed when it sat loose on a page. */ .workspace-settings-section-body .workspace-ai-usage { margin: 0; padding-top: 0; border-top: 0; } .workspace-settings-section-body > .btn { margin: 12px 0 0; } .workspace-settings-section-body > p { margin: 0 0 6px; font-size: 12px; line-height: 1.5; } .workspace-settings-section-body .infra-facts { margin: 0; } .workspace-settings-section-body .infra-advanced-list, .workspace-settings-section-body .infra-dep-list, .workspace-settings-section-body .infra-attention { margin: 12px 0 0; } .workspace-settings-section-body .infra-pill { margin: 0; } .workspace-settings-section-body .infra-address { display: block; margin: 0; word-break: break-all; } /* The address and its copy button sit on one line, and wrap rather than overflow: this reads on a 390px phone as well as on a desktop. */ .workspace-settings-section-body .infra-address-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; } .workspace-settings-section-body .infra-address-row .infra-address { flex: 1 1 auto; min-width: 0; } .workspace-settings-section-body .infra-card { margin: 0; padding: 0; border: 0; background: none; } .workspace-settings-section-body .infra-connections { margin: 0; } .workspace-settings-section-body .infra-connections .infra-facts, .workspace-settings-section-body .infra-connections .infra-dep-list, .workspace-settings-section-body .infra-connections .infra-attention, .workspace-settings-section-body .infra-connections p.muted { margin-left: 0; margin-right: 0; } /* "What changed recently" — the settings history that used to be mixed into the Console. One line each: what changed, when, and the detail under it. */ .workspace-settings-activity { margin-top: 18px; } .workspace-settings-activity .workspace-settings-subhead { margin: 0 0 8px; } .workspace-settings-activity-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .workspace-settings-activity-item { display: grid; gap: 2px; } .workspace-settings-activity-what { font-size: 12.5px; font-weight: 600; color: var(--text); } .workspace-settings-activity-when { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } .workspace-settings-activity-detail { margin: 2px 0 0; font-size: 11.5px; line-height: 1.45; } /* This app's AI limit, said as a share of the owner's week. The sentence under the field is the control's meaning, so it is text at reading weight, not a hint. */ .workspace-ai-cap-suffix { flex: none; font-size: 13px; color: var(--muted); } .workspace-ai-statement { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--text); } .workspace-ai-warn { margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--danger, #c0392b); } .workspace-settings-footer { flex: none; padding: 10px 14px 0; } .workspace-settings-save { width: 100%; min-height: 38px; border: 1px solid var(--text); border-radius: 9px; background: var(--text); color: var(--surface); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } .workspace-settings-save:disabled { opacity: .6; cursor: wait; } /* Same split as Settings above: a scrolling content area and a footer fixed to the panel's foot, so Chat Support stays reachable no matter how far `feed` (the event list) scrolls. */ .workspace-panel-console { display: flex; flex-direction: column; overflow: hidden; } .workspace-console-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; touch-action: pan-y; } /* The stream's controls: Fix now (only while there is a failure to repair), Pause, Clear, Copy. They wrap on a phone rather than shrinking, because a 32px-wide "Pause" is not a control anybody can hit. */ .workspace-console-controls { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 14px 8px; } .workspace-console-control { min-height: 32px; padding: 0 10px; border: 1px solid var(--surface-line); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; } .workspace-console-control:hover, .workspace-console-control:focus-visible { border-color: var(--text); background: var(--surface); } .workspace-console-control[aria-pressed="true"] { border-color: var(--text); font-weight: 700; } .workspace-console-control[disabled] { opacity: .55; cursor: default; } .workspace-console-retry { min-height: 32px; padding: 0 10px; border: 1px solid var(--text); border-radius: 8px; background: var(--text); color: var(--surface); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; } .workspace-console-retry:hover, .workspace-console-retry:focus-visible { opacity: .82; } .workspace-console-scope { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; padding: 3px 4px 3px 8px; border: 1px solid var(--surface-line); border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 10px; font-weight: 650; } .workspace-console-scope-clear { min-height: 22px; padding: 0 6px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 10px; cursor: pointer; } .workspace-console-scope-clear:hover, .workspace-console-scope-clear:focus-visible { background: var(--surface); color: var(--text); } .workspace-console-copy-all, .workspace-console-event-copy { transition: color .18s ease, transform .18s ease; } .workspace-console-copy-all.is-copied, .workspace-console-event-copy.is-copied { color: var(--jade); animation: workspace-copy-confirm .32s ease both; } @keyframes workspace-copy-confirm { 50% { transform: scale(1.06); } } .workspace-console-search { box-sizing: border-box; width: calc(100% - 28px); min-height: 34px; margin: 0 14px 8px; padding: 7px 10px; border: 1px solid var(--surface-line); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 12px; } .workspace-console-filters { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 14px 10px; } .workspace-console-filter { min-height: 27px; padding: 0 8px; border: 1px solid var(--surface-line); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 10px; cursor: pointer; } .workspace-console-filter[aria-pressed="true"] { background: var(--surface-2); color: var(--text); border-color: var(--text); font-weight: 650; } .workspace-console-filter.is-success[aria-pressed="true"] { border-color: var(--jade); color: var(--jade); } .workspace-console-filter.is-warning[aria-pressed="true"] { border-color: var(--aly-warn, color-mix(in srgb, var(--danger) 55%, var(--jade))); color: var(--aly-warn, color-mix(in srgb, var(--danger) 55%, var(--jade))); } .workspace-console-filter.is-error[aria-pressed="true"] { border-color: var(--danger); color: var(--danger); } .workspace-console-summary, .workspace-console-summary-right { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .workspace-console-summary { margin: 0 14px 8px; color: var(--muted); font-size: 11px; } .workspace-console-count { white-space: nowrap; } .workspace-console-feed { display: grid; gap: 6px; list-style: none; margin: 0 14px 16px; padding: 0; } .workspace-console-event, .workspace-console-empty { padding: 9px 10px; border: 1px solid var(--surface-line); border-left-width: 3px; border-radius: 8px; background: var(--surface-2); } .workspace-console-event.is-info { border-left-color: var(--muted); } .workspace-console-event.is-success { border-left-color: var(--jade); } .workspace-console-event.is-warning { border-left-color: var(--aly-warn, color-mix(in srgb, var(--danger) 55%, var(--jade))); } .workspace-console-event.is-error { border-left-color: var(--danger); } .workspace-console-event-head { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; } .workspace-console-time { font-variant-numeric: tabular-nums; } /* Identical neighbours collapse into one row with a count, the way a game engine's console does — a render loop logging the same line 300 times is one line saying 300, which is both the honest reading and the one that leaves room for everything else. */ .workspace-console-repeat { padding: 1px 6px; border-radius: 999px; background: var(--surface); color: var(--text); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; } .workspace-console-event-copy { margin: -4px -4px 0 auto; } .workspace-console-line { margin: 4px 0 0; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; } .workspace-console-event-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } .workspace-console-event-actions:empty { display: none; } .workspace-console-event-expand, .workspace-console-event-fix { min-height: 30px; padding: 0 9px; border: 1px solid var(--surface-line); border-radius: 7px; background: var(--surface); color: var(--text); font: inherit; font-size: 10.5px; font-weight: 650; cursor: pointer; } .workspace-console-event-fix { border-color: var(--jade); color: var(--jade); } .workspace-console-event-fix[disabled] { opacity: .55; cursor: default; } .workspace-console-event-expand:focus-visible, .workspace-console-event-fix:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } .workspace-console-stack { margin: 7px 0 0; padding: 8px 9px; max-height: 220px; overflow: auto; border: 1px solid var(--surface-line); border-radius: 7px; background: var(--surface); color: var(--muted); font: 10.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; scrollbar-gutter: stable; } .workspace-console-stack[hidden] { display: none; } .workspace-console-summary-left { display: flex; align-items: center; gap: 6px; } .workspace-console-scope-label { font-weight: 650; color: var(--text); } /* Build activity keeps its own severity colouring while living under the Build filter: "what ALY did" and "what my app did" are different questions, and a red build line still has to read as red. */ .workspace-console-event.is-build { border-left-color: var(--muted); } .workspace-console-event.is-build.is-warning { border-left-color: var(--aly-warn, color-mix(in srgb, var(--danger) 55%, var(--jade))); } .workspace-console-event.is-build.is-error { border-left-color: var(--danger); } .workspace-console-event.is-log { border-left-color: var(--muted); } .workspace-console-event.is-action { border-left-color: var(--jade); } .workspace-console-event.is-network { border-left-color: color-mix(in srgb, var(--jade) 45%, var(--muted)); } .workspace-console-filter.is-log[aria-pressed="true"] { border-color: var(--text); color: var(--text); } .workspace-console-filter.is-action[aria-pressed="true"] { border-color: var(--jade); color: var(--jade); } .workspace-console-filter.is-network[aria-pressed="true"] { border-color: var(--jade); color: var(--jade); } .workspace-console-filter.is-build[aria-pressed="true"] { border-color: var(--text); color: var(--text); } .workspace-console-level { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .workspace-console-event.is-success .workspace-console-level { color: var(--jade); } .workspace-console-event.is-warning .workspace-console-level { color: var(--aly-warn, color-mix(in srgb, var(--danger) 55%, var(--jade))); } .workspace-console-event.is-error .workspace-console-level { color: var(--danger); } .workspace-console-kind { display: block; margin-top: 4px; font-size: 12px; text-transform: capitalize; } .workspace-console-detail { margin: 4px 0 0; color: var(--muted); font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; } .workspace-console-empty { border-left-color: var(--muted); color: var(--muted); font-size: 12px; } /* The panel's fixed foot — never scrolls away with `feed` above it. Centred: one button and one line, not a form, so there is nothing to align to. */ .workspace-console-feedback { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 14px; border-top: 1px solid var(--hair); background: var(--surface); text-align: center; } .workspace-console-feedback-action { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 16px; border: 1px solid var(--text); border-radius: 8px; background: var(--text); color: var(--surface); font-size: 12px; font-weight: 650; text-decoration: none; } .workspace-console-feedback-action:hover, .workspace-console-feedback-action:focus-visible { opacity: .82; } .workspace-console-feedback-hint { margin: 0; max-width: 320px; font-size: 11px; line-height: 1.45; color: var(--muted); } /* --- Server tab: file manager ----------------------------------------------- */ .workspace-files-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 14px 10px; } .workspace-files-keep-original { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--muted); font-size: 12px; cursor: pointer; } .workspace-files-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .workspace-files-btn { min-height: 32px; padding: 0 12px; border: 1px solid var(--surface-line); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; } .workspace-files-btn:hover, .workspace-files-btn:focus-visible { border-color: var(--text); background: var(--surface); } .workspace-files-btn:disabled { opacity: .6; cursor: default; } .workspace-files-backup-heading > p { margin: 0; font-size: 11px; } .workspace-files-backup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 14px 12px; } .workspace-files-backup-hint { color: var(--muted); font-size: 11px; flex: 1 1 200px; } .workspace-files-uploads { display: grid; gap: 6px; margin: 0 14px 10px; } .workspace-files-uploads[hidden] { display: none; } .workspace-files-upload { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--surface-line); border-radius: 8px; background: var(--surface-2); font-size: 12px; } .workspace-files-upload.is-error { border-color: var(--danger); } .workspace-files-upload-name { flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .workspace-files-upload-bar { flex: 1 1 90px; height: 6px; border: 0; border-radius: 999px; background: var(--void-2); -webkit-appearance: none; appearance: none; } .workspace-files-upload-bar::-webkit-progress-bar { background: var(--void-2); border-radius: 999px; } .workspace-files-upload-bar::-webkit-progress-value { background: var(--text); border-radius: 999px; } .workspace-files-upload-bar::-moz-progress-bar { background: var(--text); border-radius: 999px; } .workspace-files-upload-error { flex: 1 1 100%; color: var(--danger); font-size: 11px; } .workspace-files-upload-dismiss { min-height: 22px; min-width: 22px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; } .workspace-files-upload-dismiss:hover, .workspace-files-upload-dismiss:focus-visible { color: var(--text); } .workspace-files-browser { margin: 0 14px 16px; border: 1px solid var(--surface-line); border-radius: 10px; background: var(--surface-2); } .workspace-files-browser.is-dragover { border-style: dashed; border-color: var(--text); background: var(--surface); } .workspace-files-list { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; } .workspace-files-empty { padding: 20px 12px; color: var(--muted); font-size: 12px; text-align: center; } .workspace-files-row { display: flex; align-items: flex-start; gap: 6px; padding: 7px 8px 7px calc(8px + var(--depth, 0) * 12px); border-radius: 7px; } .workspace-files-row:hover { background: var(--surface); } .workspace-files-row-main { flex: 1 1 auto; display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; min-width: 0; } .workspace-files-icon { flex: none; color: var(--muted); font-size: 10px; } .workspace-files-row.is-asset .workspace-files-icon { color: var(--jade); } .workspace-files-row.is-folder .workspace-files-name { font-weight: 650; } .workspace-files-name { min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; } .workspace-files-size { margin-left: auto; flex: none; color: var(--muted); font-size: 11px; white-space: nowrap; } .workspace-files-tag { flex: none; padding: 1px 5px; border: 1px solid var(--surface-line); border-radius: 5px; color: var(--muted); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; } .workspace-files-menu-trigger { flex: none; min-width: 26px; min-height: 26px; padding: 0 4px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; } .workspace-files-menu-trigger:hover, .workspace-files-menu-trigger:focus-visible, .workspace-files-menu-trigger[aria-expanded="true"] { background: var(--glass-2); color: var(--text); } /* Reuses .project-menu / .dock-menu (aly-projects.css); just keeps it inside a narrow viewport and wide enough for "New folder inside". */ .workspace-files-menu.project-menu { min-width: 172px; max-width: calc(100vw - 16px); } /* One line, one thin bar: how much of the account's storage pool this Project uses. Amber past 80%, red past 95% — same reading as the plan popup's bar. */ .workspace-storage-line { margin: 0 0 6px; font-size: 12px; color: var(--text); } .workspace-storage-track { height: 6px; border-radius: 999px; background: var(--void-2); overflow: hidden; } .workspace-storage-fill { height: 100%; min-width: 2px; background: var(--jade); border-radius: 999px; transition: width .3s ease; } .workspace-storage-fill.is-high { background: var(--aly-warn, color-mix(in srgb, var(--danger) 55%, var(--jade))); } .workspace-storage-fill.is-full { background: var(--danger); } .workspace-capacity + .workspace-capacity { margin-top: 12px; } .workspace-storage-sub { margin: 4px 0 0; font-size: 11px; color: var(--muted); } .workspace-storage-warning { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--aly-warn, color-mix(in srgb, var(--danger) 55%, var(--jade))); } .workspace-storage-warning.is-full { color: var(--danger); } .workspace-storage-large { margin-top: 10px; } /* Large-upload projection (aly-storage-projection.js), shown in the shared dialog. */ .aly-storage-projection-row { margin: 0; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .aly-storage-projection-row.is-over { color: var(--danger); font-weight: 600; } .aly-storage-projection-warning { margin: 0; font-size: 13px; font-weight: 600; color: var(--danger); } /* "Set up this project" modal */ .workspace-setup { display: flex; flex-direction: column; gap: 8px; } .workspace-setup-line { margin: 0; font-size: 13px; } .workspace-setup-why, .workspace-setup-clean { margin: 0; font-size: 12px; } .workspace-setup-issue-head { margin: 8px 0 2px; font-size: 12px; font-weight: 700; } .workspace-setup-issue-list { margin: 0; padding-left: 18px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; } .workspace-setup-step-list { margin: 0; padding: 0; list-style: none; font-size: 12px; display: flex; flex-direction: column; gap: 6px; } .workspace-setup-step.is-ok strong { color: var(--jade); } .workspace-setup-step.is-failed strong { color: var(--danger, #c1473d); } .workspace-setup-step.is-skipped strong { color: var(--muted, #6c6c77); } .workspace-setup-ok { margin: 0; font-weight: 700; color: var(--jade); } .workspace-setup-bad { margin: 0; font-weight: 700; color: var(--danger, #c1473d); } .workspace-setup-output { white-space: pre-wrap; overflow: auto; max-height: 160px; font-size: 11px; margin: 4px 0 0; padding: 6px 8px; background: var(--surface-2, rgba(0,0,0,.05)); border-radius: 6px; } /* --- "aly-chat" section: this Project's own chat media ------------------- Deliberately muted and visually separate from the real file list above — a different icon, dimmer text, and the boundary spelled out in the note: nothing here is served to the app or part of the build until "Add to Project files" makes it so, one image (or a batch) at a time. */ .workspace-chat-media { border-top: 1px dashed var(--surface-line); padding-top: 14px; opacity: .92; position: relative; } .workspace-chat-media-head { display: flex; align-items: center; gap: 6px; } .workspace-chat-media-icon { color: var(--muted, #6c6c77); font-size: 13px; } .workspace-chat-media-head h3 { color: var(--muted, #6c6c77) !important; } .workspace-chat-media-note { margin: 2px 0 10px; font-size: 12px; } .workspace-chat-media-empty { font-size: 12px; color: var(--muted, #6c6c77); } .workspace-files-btn.is-danger { color: var(--danger, #c1473d); border-color: var(--danger, #c1473d); } /* Toolbar: sort, date filter, select all / clear. */ .workspace-chat-media-toolbar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; } .workspace-chat-media-field { display: flex; flex-direction: column; gap: 2px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6c6c77); } .workspace-chat-media-select { min-height: 28px; padding: 0 6px; border: 1px solid var(--surface-line); border-radius: 6px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 12px; } .workspace-chat-media-toolbar-spacer { flex: 1 1 auto; } .workspace-chat-media-link { border: none; background: none; color: var(--muted, #6c6c77); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0 0 2px; } .workspace-chat-media-link:hover, .workspace-chat-media-link:focus-visible { color: var(--text); } .workspace-chat-media-list { display: grid; gap: 14px; } .workspace-chat-media-conversation { border: 1px solid var(--surface-line); border-radius: 8px; padding: 10px; background: var(--surface-2, rgba(0,0,0,.03)); } .workspace-chat-media-conversation-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .workspace-chat-media-conversation-title { flex: 1 1 auto; font-size: 12px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .workspace-chat-media-conversation-meta { font-size: 11px; color: var(--muted, #6c6c77); flex: none; } /* The thumbnail grid itself — glassmorphism tiles matching the rest of the workspace: soft border, subtle blur on hover state, rounded corners. */ .workspace-chat-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .workspace-chat-media-tile { position: relative; } .workspace-chat-media-thumb { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: zoom-in; border: 1px solid var(--surface-line); background: var(--surface-2); } .workspace-chat-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .workspace-chat-media-tile.is-selected .workspace-chat-media-thumb { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--text); } .workspace-chat-media-pin-badge { position: absolute; top: 4px; right: 4px; font-size: 11px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); } .workspace-chat-media-checkbox { position: absolute; top: 5px; left: 5px; width: 16px; height: 16px; margin: 0; opacity: 0; transition: opacity .12s ease; } .workspace-chat-media-thumb:hover .workspace-chat-media-checkbox, .workspace-chat-media-tile.is-selected .workspace-chat-media-checkbox { opacity: 1; } .workspace-chat-media-tile-meta { display: flex; justify-content: space-between; align-items: center; gap: 4px; margin-top: 4px; font-size: 10px; color: var(--muted, #6c6c77); } .workspace-chat-media-tile-date { flex: none; } .workspace-chat-media-menu-trigger { flex: none; border: none; background: none; color: var(--muted, #6c6c77); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; } .workspace-chat-media-menu-trigger:hover, .workspace-chat-media-menu-trigger:focus-visible { color: var(--text); } /* Sticky batch action bar — glass surface over the grid, appears only while something is selected. */ .workspace-chat-media-action-bar { position: sticky; bottom: 8px; z-index: 2; display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--surface-line); border-radius: 10px; background: var(--surface); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0,0,0,.18); } .workspace-chat-media-action-bar[hidden] { display: none; } .workspace-chat-media-action-count { font-size: 12px; font-weight: 650; color: var(--text); margin-right: auto; } /* --- lightbox ------------------------------------------------------------- */ .aly-chat-lightbox-body { display: grid; gap: 10px; width: min(80vw, 900px); } .aly-chat-lightbox-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40vh; } .aly-chat-lightbox-image { max-width: 100%; max-height: 70vh; border-radius: 8px; object-fit: contain; } .aly-chat-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--surface-line); background: var(--surface); color: var(--text); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .aly-chat-lightbox-nav.prev { left: -8px; } .aly-chat-lightbox-nav.next { right: -8px; } .aly-chat-lightbox-nav[hidden] { display: none; } .aly-chat-lightbox-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12px; } .aly-chat-lightbox-name { font-weight: 650; color: var(--text); } .aly-chat-lightbox-meta { color: var(--muted, #6c6c77); } /* --- AI usage, in the Settings tab ---------------------------------------- Its own bordered block because it saves itself: visually separate from the Project details above, which share the footer's Save. */ .workspace-ai-usage { margin: 18px 14px 4px; padding-top: 14px; border-top: 1px solid var(--hair); } .workspace-ai-usage > h3 { margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } /* `label` is a shouted micro-label globally (style.css), which is right for "PROJECT NAME" above and wrong for a sentence. Opted out the same way `.check label` already does, rather than by not using a