/* * static/css/layout.css — sidebar (desktop collapse, mobile overlay <= 768 px), home/auth screens, liquid-glass nav, main area, inverse vignette, 100dvh, notices (#main-area > .context-warning, top 88px; I1). * * Owner: WP B-13. Spec: FA §16.1, §6, §12.1, §12.3, §14; plan R-79 (working indicator, "new result" ring). * Values are the legacy index.html's effective values: each base rule merged with its later * "VISUAL REDESIGN INTEGRATION" override into ONE rule (I7: every selector is defined once, in * one file; T-CSS checks the critical ones). Brand photographs come from the profile through * the --brand-{home,auth,chat}-image custom properties that main.js sets from site.json (plus their * optional -narrow phone copies, picked below 800 px). * The chat column, bubbles, composer card and welcome state live in chat.css (A-15). * * Deviation (I1, FR §10 "notices z-index >= 50"): #main-area no longer sets `isolation: isolate` * and its notice slot uses var(--z-system-notice), so notices render above the artifact stage and * the mobile sheet (both portaled into ) as well as above the glass nav. #main-area itself * has no z-index, so its ::before/::after backdrop (z-index 0) still paints under its children. */ /* ============================================================ SIDEBAR ============================================================ */ #sidebar { width: 292px; flex-shrink: 0; overflow: hidden; display: flex; flex-direction: column; border-right: 1px solid var(--border-color); background: color-mix(in srgb, var(--sidebar-bg) 87%, transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); transition: width 0.22s ease, background-color .25s ease, color .25s ease, border-color .25s ease; } .sidebar-header { min-height: 72px; padding: 16px 16px 14px 20px; border-bottom: 1px solid var(--border-color); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.02em; display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); } .sidebar-brand { color: var(--text-color); } .sidebar-home-link { border: 0; background: transparent; color: var(--text-color); font: inherit; font-size: 0.98rem; font-weight: 700; letter-spacing: inherit; padding: 6px 8px; margin-left: -8px; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; } .sidebar-home-link:hover { background: var(--card-bg); color: var(--gold-accent); } .sidebar-footer { padding: 12px; border-top: 1px solid var(--border-color); display: grid; gap: 2px; } .logout-btn { width: 100%; min-height: 44px; background: transparent; border: 1px solid transparent; color: var(--text-muted); padding: 10px 12px; border-radius: var(--radius-md); cursor: pointer; text-align: left; transition: background 0.18s, color 0.18s, border-color 0.18s; font-family: inherit; font-size: 0.9rem; display: flex; align-items: center; gap: var(--space-2); } .logout-btn:hover { background: var(--card-bg); color: var(--text-color); } .new-chat-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 15px; background: var(--gold-soft); border: 1px solid var(--gold-glow); color: var(--gold-accent); border-radius: var(--radius-pill); cursor: pointer; transition: background 0.18s, transform 0.1s; font-weight: 600; font-family: inherit; font-size: 0.88rem; } .new-chat-btn:hover { background: var(--gold-glow); } .new-chat-btn:active { transform: translateY(1px); } body.guest-mode .new-chat-btn, .new-chat-btn:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; } #chat-list { flex: 1; overflow-y: auto; list-style: none; padding: 16px 12px; } .chat-item { position: relative; min-height: 44px; padding: 10px 10px 10px 16px; margin-bottom: 2px; border-radius: 12px; cursor: pointer; color: var(--text-muted); text-decoration: none; display: flex; align-items: center; gap: var(--space-2); transition: background 0.15s, color 0.15s; } /* The rename/delete buttons are the link's sibling (no buttons inside an ); they sit over the link's right padding, which keeps the room they took inside the link before. */ .chat-row { position: relative; } .chat-row > .chat-item { padding-right: 62px; } .chat-item:hover, .chat-row:hover > .chat-item:not(.active) { background-color: var(--card-bg); color: var(--text-color); } .chat-item.active { background-color: var(--gold-soft); color: var(--text-color); } .chat-item.active::before { content: ''; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 2px; border-radius: var(--radius-pill); background: var(--gold-accent); } .chat-item.title-flash { animation: title-flash 1s ease-out; } @keyframes title-flash { from { background-color: var(--gold-glow); } to { background-color: transparent; } } .chat-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.9rem; } .chat-actions { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; } .chat-row:hover > .chat-actions, .chat-item.active + .chat-actions, .chat-item:focus-visible + .chat-actions, .chat-row:focus-within > .chat-actions { opacity: 1; } .chat-action-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); padding: 4px 6px; font-size: 0.85rem; line-height: 1; transition: background 0.15s, color 0.15s; } .chat-action-btn:hover { color: var(--text-color); background: var(--border-color); } .empty-state { color: var(--text-muted); padding: var(--space-3); font-size: 0.9rem; } .guest-empty-state { color: var(--text-dim); line-height: 1.55; white-space: normal; } /* D3 / R-79: working indicator (pulsing gold dot; steady under reduced motion) and the hollow "new result" ring for a chat that finished in the background (FA §12.1, Q1). */ .run-dot { display: none; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-accent); box-sizing: border-box; } .chat-item.running .run-dot { display: block; animation: run-dot-pulse 1.4s ease-in-out infinite; box-shadow: 0 0 6px var(--gold-glow); } .chat-item.unseen:not(.running) .run-dot { display: block; background: transparent; border: 1.5px solid var(--gold-accent); } @keyframes run-dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } } /* sidebar collapse (desktop) */ body.sidebar-collapsed #sidebar { width: 0; border-right: 0; } body.sidebar-collapsed .sidebar-header .sidebar-brand, body.sidebar-collapsed .new-chat-btn span, body.sidebar-collapsed .logout-btn span, body.sidebar-collapsed .chat-title, body.sidebar-collapsed .chat-actions { display: none; } body.sidebar-collapsed .sidebar-header, body.sidebar-collapsed #chat-list, body.sidebar-collapsed .sidebar-footer { opacity: 0; pointer-events: none; } /* ============================================================ HOME (LANDING) SCREEN ============================================================ */ #home-screen { display: flex; width: 100%; height: 100vh; height: 100dvh; align-items: center; justify-content: center; padding: var(--space-8) var(--space-6); position: relative; overflow-y: auto; isolation: isolate; background: linear-gradient(180deg, rgba(7, 8, 9, 0.77) 0%, rgba(7, 8, 9, 0.83) 48%, rgba(7, 8, 9, 0.96) 100%), var(--brand-home-image-fit, var(--brand-home-image)) center 38% / cover no-repeat, var(--bg-color); } #home-screen::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 50% 26%, transparent 0, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.50) 100%); } [data-theme="light"] #home-screen { background: linear-gradient(180deg, rgba(247, 245, 239, 0.79), rgba(247, 245, 239, 0.89) 58%, rgba(247, 245, 239, 0.98) 100%), var(--brand-home-image-fit, var(--brand-home-image)) center 38% / cover no-repeat, var(--bg-color); } [data-theme="light"] #home-screen::before { background: radial-gradient(circle at 50% 26%, transparent 0, rgba(255, 255, 255, 0.08) 44%, rgba(247, 245, 239, 0.48) 100%); } .home-panel { max-width: 820px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); margin: auto; padding: var(--space-8) 0; } .home-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-accent); background: var(--gold-soft); border: 1px solid var(--gold-glow); padding: 6px 14px; border-radius: var(--radius-pill); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .home-title { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; color: var(--text-color); text-shadow: 0 3px 28px rgba(0, 0, 0, 0.56); } .home-title .home-accent-word { color: var(--gold-accent); } .home-subtitle { font-size: 1.12rem; color: rgba(245, 244, 241, 0.86); line-height: 1.6; max-width: 640px; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.60); } .home-subtitle-secondary { font-size: 0.96rem; line-height: 1.6; max-width: 620px; color: rgba(245, 244, 241, 0.64); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.70); } [data-theme="light"] .home-title, [data-theme="light"] .home-portrait-label { text-shadow: 0 1px 18px rgba(255, 255, 255, 0.72); } [data-theme="light"] .home-subtitle { color: rgba(28, 27, 24, 0.84); text-shadow: 0 1px 18px rgba(255, 255, 255, 0.72); } [data-theme="light"] .home-subtitle-secondary, [data-theme="light"] .home-portrait-desc, [data-theme="light"] .home-tagline { color: rgba(28, 27, 24, 0.62); text-shadow: 0 1px 18px rgba(255, 255, 255, 0.72); } .home-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--space-2); background: var(--gold-accent); color: var(--gold-on); border: none; padding: 15px 34px; border-radius: var(--radius-pill); font-size: 1.05rem; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.1s, box-shadow 0.2s; font-family: inherit; box-shadow: 0 10px 34px var(--gold-glow); } .home-cta:hover { background: var(--gold-accent-hover); box-shadow: 0 16px 44px var(--gold-glow); transform: translateY(-1px); } .home-cta:active { transform: translateY(1px); } .home-cta .home-cta-arrow { font-size: 1.2rem; line-height: 1; transition: transform 0.15s; } .home-cta:hover .home-cta-arrow { transform: translateX(4px); } .home-portrait-section { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--space-7); padding-top: var(--space-8); border-top: 1px solid var(--border-color); width: 100%; max-width: 640px; } .home-portrait { width: 188px; height: 188px; max-width: 52vw; max-height: 52vw; object-fit: cover; object-position: center; border-radius: 50%; border: 2px solid var(--gold-accent); padding: 4px; background: var(--bg-color); box-shadow: 0 0 0 1px var(--border-color), 0 16px 40px var(--gold-glow); } .home-portrait-label { font-size: 1.3rem; font-weight: 600; color: var(--text-color); letter-spacing: -0.02em; text-shadow: 0 3px 28px rgba(0, 0, 0, 0.56); } .home-portrait-desc { font-size: 0.93rem; line-height: 1.75; max-width: 580px; text-align: center; color: rgba(245, 244, 241, 0.64); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.70); } .home-tagline { margin-top: var(--space-6); font-size: 0.8rem; line-height: 1.5; color: rgba(245, 244, 241, 0.64); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.70); } .home-theme-toggle { position: absolute; top: 20px; right: 20px; } /* ============================================================ AUTH SCREEN ============================================================ */ #auth-screen { display: flex; position: relative; width: 100%; height: 100vh; height: 100dvh; min-height: 0; padding: 0; align-items: stretch; justify-content: stretch; overflow: hidden; background: var(--bg-color); } /* The two floating auth buttons share one look (glass pill); they differ only in their side. */ .auth-home-btn { position: fixed !important; top: 22px !important; left: 24px !important; z-index: 4; padding-inline: 18px !important; border-radius: var(--radius-pill) !important; min-width: 54px; min-height: 42px; background: color-mix(in srgb, var(--surface-1) 72%, transparent) !important; backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); } .auth-theme-btn { position: fixed !important; top: 22px !important; right: 24px !important; z-index: 4; border-radius: var(--radius-pill) !important; min-width: 54px; min-height: 42px; background: color-mix(in srgb, var(--surface-1) 72%, transparent) !important; backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); } .auth-shell { width: 100%; height: 100dvh; min-height: 0; display: grid; grid-template-columns: minmax(540px, 0.96fr) minmax(460px, 1.04fr); } .auth-form-column { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; padding: 92px clamp(48px, 6vw, 108px) 58px; background: var(--bg-color); } .auth-intro { max-width: 700px; margin-bottom: 38px; } .auth-eyebrow { display: block; margin-bottom: 17px; color: var(--gold-accent); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; } .auth-intro h1 { margin: 0; max-width: 720px; font-size: clamp(3rem, 5vw, 5rem); line-height: 0.98; letter-spacing: -0.055em; } .auth-intro p { margin-top: 24px; max-width: 620px; color: var(--text-muted); font-size: clamp(1.04rem, 1.45vw, 1.28rem); line-height: 1.55; } .auth-panel { width: 100%; max-width: 700px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transition: background-color .25s ease, color .25s ease, border-color .25s ease; } .auth-panel label { display: block; margin: 0 0 10px; color: var(--text-dim); font-size: 0.95rem; font-weight: 650; } .auth-panel input { width: 100%; height: 64px; margin: 0 0 23px; padding: 0 20px; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface-2); color: var(--text-color); font-size: 1rem; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s; } .auth-panel input::placeholder { color: var(--text-faint); } .auth-panel input:focus { outline: none; border-color: var(--gold-accent); background: var(--card-bg); box-shadow: var(--ring); } .auth-actions { display: flex; gap: 10px; margin: 8px 0 0; } .auth-actions button { width: 100%; background: var(--gold-accent); color: var(--gold-on); border: none; font-weight: 600; padding: 12px 16px; border-radius: var(--radius-md); font-size: 0.95rem; transition: background 0.18s, transform 0.1s; } .auth-actions button:hover { background: var(--gold-accent-hover); } .auth-actions button:active { transform: translateY(1px); } .auth-actions .auth-continue { height: 62px; border-radius: 18px; background: var(--gold-accent); color: var(--gold-on); font-size: 1.02rem; box-shadow: 0 14px 38px rgba(214, 189, 141, 0.12); } .guest-login-btn { display: block; width: 100%; height: 52px; margin-top: 13px; background: transparent; border: 1px solid var(--border-color); color: var(--text-dim); font-weight: 600; padding: 12px 16px; border-radius: 17px; font-size: 0.95rem; font-family: inherit; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s; } .guest-login-btn:hover { background: var(--card-bg); color: var(--gold-accent); border-color: var(--gold-glow); } #auth-error { color: var(--danger-text); min-height: 20px; margin-top: 12px; font-size: 0.9rem; } .auth-visual { position: relative; min-height: 0; height: 100dvh; overflow: hidden; background: var(--brand-auth-image) center / cover no-repeat, var(--surface-2); } .auth-visual::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 9, 11, 0.74) 0%, rgba(9, 9, 11, 0.14) 31%, rgba(9, 9, 11, 0.10) 100%); } .auth-visual-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.68)); } .auth-visual-copy { position: absolute; left: clamp(38px, 5vw, 82px); right: clamp(38px, 5vw, 82px); bottom: clamp(52px, 7vh, 88px); color: #fff; text-shadow: 0 2px 26px rgba(0, 0, 0, 0.4); } .auth-location { display: inline-flex; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-pill); background: rgba(10, 10, 12, 0.32); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; } .auth-visual-copy h2 { max-width: 700px; margin-top: 18px; font-size: clamp(2rem, 3.35vw, 4rem); line-height: 1.03; letter-spacing: -0.045em; } /* ============================================================ MAIN AREA + INVERSE VIGNETTE (UI tuned values) ============================================================ */ #main-area { flex: 1; display: flex; flex-direction: column; position: relative; min-width: 0; overflow: hidden; background: var(--chat-bg); transition: background-color .25s ease, color .25s ease, border-color .25s ease; } #main-area::before { content: ''; position: absolute; inset: 0; pointer-events: none; transition: opacity 0.35s ease, filter 0.35s ease; z-index: 0; background: linear-gradient(180deg, rgba(7, 8, 9, 0.73), rgba(7, 8, 9, 0.83) 54%, rgba(7, 8, 9, 0.95) 100%), var(--brand-chat-image-fit, var(--brand-chat-image)) center 44% / cover no-repeat; } #main-area::after { content: ''; position: absolute; inset: 0; pointer-events: none; transition: opacity 0.35s ease, filter 0.35s ease; z-index: 0; background: var(--chat-bg); opacity: 0.14; } /* The centred message column stays dark for readability; the outer margins brighten to the idle image brightness (dark within ±395 px at 72 %/78 %, margins 14 %/16 %, feathered to ±490 px). */ body.chat-active #main-area::after { opacity: 1; background: linear-gradient( 90deg, color-mix(in srgb, var(--chat-bg) 14%, transparent) 0%, color-mix(in srgb, var(--chat-bg) 14%, transparent) calc(50% - 490px), color-mix(in srgb, var(--chat-bg) 72%, transparent) calc(50% - 395px), color-mix(in srgb, var(--chat-bg) 72%, transparent) calc(50% + 395px), color-mix(in srgb, var(--chat-bg) 14%, transparent) calc(50% + 490px), color-mix(in srgb, var(--chat-bg) 14%, transparent) 100% ); } [data-theme="light"] #main-area::before { background: linear-gradient(180deg, rgba(250, 249, 246, 0.74), rgba(250, 249, 246, 0.86) 54%, rgba(250, 249, 246, 0.975) 100%), var(--brand-chat-image-fit, var(--brand-chat-image)) center 44% / cover no-repeat; } [data-theme="light"] #main-area::after { opacity: 0.16; } [data-theme="light"] body.chat-active #main-area::after { opacity: 1; background: linear-gradient( 90deg, color-mix(in srgb, var(--chat-bg) 16%, transparent) 0%, color-mix(in srgb, var(--chat-bg) 16%, transparent) calc(50% - 490px), color-mix(in srgb, var(--chat-bg) 78%, transparent) calc(50% - 395px), color-mix(in srgb, var(--chat-bg) 78%, transparent) calc(50% + 395px), color-mix(in srgb, var(--chat-bg) 16%, transparent) calc(50% + 490px), color-mix(in srgb, var(--chat-bg) 16%, transparent) 100% ); } #main-area > * { position: relative; z-index: 1; } /* ============================================================ TOP NAV (liquid glass; UI tuned values) ============================================================ */ #top-nav { position: absolute; inset: 0 0 auto 0; z-index: var(--z-nav); transition: background-color .25s ease, color .25s ease, border-color .25s ease; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 76px; padding: 11px 22px; /* The nav is a size container: what fits in it depends on its own width (the sidebar may take 280 px beside it), so the crowding rules below query the nav, not the viewport. */ container: aiw-nav / inline-size; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--border-color) 22%, transparent); background: linear-gradient( 180deg, color-mix(in srgb, var(--surface-1) 12%, transparent) 0%, color-mix(in srgb, var(--surface-1) 6%, transparent) 62%, color-mix(in srgb, var(--surface-1) 3%, transparent) 100% ); backdrop-filter: blur(10px) saturate(1.7) brightness(1.04); -webkit-backdrop-filter: blur(10px) saturate(1.7) brightness(1.04); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 0 rgba(255, 255, 255, 0.035), 0 10px 30px -8px rgba(0, 0, 0, 0.30); } [data-theme="light"] #top-nav { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.20) 62%, rgba(255, 255, 255, 0.13) 100% ); backdrop-filter: blur(10px) saturate(1.5) brightness(1.03); -webkit-backdrop-filter: blur(10px) saturate(1.5) brightness(1.03); border-bottom-color: rgba(110, 104, 92, 0.12); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6), 0 10px 30px -10px rgba(60, 52, 34, 0.16); } .nav-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* The halo keeps the title readable when a card of the other brightness scrolls under the glass (the glass tint values above stay as tuned). */ .nav-heading { display: grid; gap: 2px; min-width: 0; text-shadow: var(--nav-text-halo); } .nav-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.93rem; font-weight: 600; } .nav-heading strong.title-fade { animation: title-fade-in 180ms ease-out; } @keyframes title-fade-in { from { opacity: 0; } to { opacity: 1; } } .nav-kicker { display: block; color: var(--gold-accent); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; } #sidebar-toggle { display: inline-flex; position: relative; width: 40px; height: 40px; } .sidebar-toggle-btn { width: 40px; padding: 0; border-radius: var(--radius-pill); font-size: 1rem; } #top-nav .theme-toggle, #top-nav .icon-btn, #top-nav .toggle-container { min-height: 38px; padding: 0 10px; border: 1px solid var(--border-color); border-radius: var(--radius-pill); background: var(--surface-1); } /* The whole pill is the