/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #0d0922 #221e33 #f6f4fc #5b3df0 #7255eb #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #f6f4fc; --surface: #fbfafe; --surface-2: #eae8f1; --border: #d5d3dd; --border-strong: #b0aebb; --ink: #221e33; --muted: #6d6b79; --accent: #5b3df0; --accent-hover: #4d34cc; --accent-ink: #ffffff; --accent-text: #7255eb; --accent-strong: #5b3df0; --accent-soft: #e0dafa; --accent-border: #b0a2f7; --success: #15803d; --success-ink: #ffffff; --success-soft: #dbe6e5; --success-strong: #116d34; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #eee1df; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #efdae1; --danger-strong: #b91c1c;} /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #080615; --surface: #211f2c; --surface-2: #141221; --border: #2b2936; --border-strong: #52515b; --ink: #f6f4fc; --muted: #9795a0; --accent: #5b3df0; --accent-hover: #745af2; --accent-ink: #ffffff; --accent-text: #7f68f3; --accent-strong: #8974f4; --accent-soft: #1a1245; --accent-border: #2d1f78; --success: #15803d; --success-ink: #ffffff; --success-soft: #0b211e; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #2e1712; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #2f0b17; --danger-strong: #d16969; } /* ==================================================================== * app.css — MTR, the Gemini-powered content studio. * A chat-first workspace: a conversation rail on the left, a running * thread on the right. Retunes the system toward something calmer and * more considered than the default component floor, then adds the one * screen design.css has no opinion about: the chat itself. * ==================================================================== */ :root { --radius: 12px; --radius-lg: 18px; --content-max: 1240px; } /* The topbar's own accent, used once: a small badge that says what powers the studio, next to the theme toggle. */ .chat-badge { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent-border); font-size: var(--t-xs); font-weight: var(--fw-medium); } /* ---- The workspace shell ------------------------------------------- */ .chat-app { display: flex; align-items: stretch; height: calc(100vh - 196px); min-height: 560px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); overflow: hidden; position: relative; } .chat-scrim { display: none; border: 0; padding: 0; cursor: pointer; } /* ---- Sidebar: new chat, quick-start types, search, history --------- */ .chat-sidebar { width: 300px; flex: 0 0 300px; display: flex; flex-direction: column; background: var(--surface-2); border-right: 1px solid var(--border); min-width: 0; } .chat-sidebar-top { padding: var(--s-4) var(--s-4) 0; } .chat-quicktypes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); padding: var(--s-4); } .chat-quicktype { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: var(--t-xs); font-weight: var(--fw-medium); cursor: pointer; transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); text-align: left; } .chat-quicktype:hover { color: var(--accent-strong); border-color: var(--accent-border); background: var(--accent-soft); } .chat-quicktype span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-search-field { position: relative; padding: 0 var(--s-4) var(--s-3); } .chat-search-icon { position: absolute; left: calc(var(--s-4) + 10px); top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .chat-search-input { padding-left: var(--s-9); } .chat-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--s-2) var(--s-4); display: flex; flex-direction: column; } .chat-list > * + * { margin-top: 2px; } .chat-list-empty { padding: var(--s-4); } .chat-list-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--radius); color: var(--ink); text-decoration: none; min-width: 0; transition: background var(--dur-1) var(--ease); } .chat-list-item:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } .chat-list-item.is-active { background: var(--accent-soft); color: var(--accent-strong); } .chat-list-icon { flex: 0 0 auto; color: var(--muted); display: inline-flex; } .chat-list-item.is-active .chat-list-icon { color: var(--accent-strong); } .chat-list-text { min-width: 0; display: flex; flex-direction: column; } .chat-list-text > * + * { margin-top: 1px; } .chat-list-title { font-size: var(--t-sm); font-weight: var(--fw-medium); } .chat-list-meta { font-size: var(--t-xs); color: var(--muted); } /* ---- Main panel: header, thread, composer --------------------------- */ .chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--surface); } .chat-main-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); min-height: 64px; } .chat-navbtn { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid var(--border); color: var(--ink); cursor: pointer; flex: 0 0 auto; } .chat-main-head-text { min-width: 0; display: flex; flex-direction: column; flex: 1; } .chat-main-head-text > * + * { margin-top: 2px; } .chat-main-title { font-size: var(--t-lg); font-weight: var(--fw-semi); letter-spacing: var(--track-tight); } .chat-main-sub { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-xs); color: var(--muted); } .chat-main-actions { display: flex; align-items: center; gap: var(--s-2); } .chat-thread { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-6); display: flex; flex-direction: column; } .chat-thread > * + * { margin-top: var(--s-4); } .chat-msg { display: flex; } .chat-msg-user { justify-content: flex-end; } .chat-msg-ai { justify-content: flex-start; } .chat-msg-bubble { max-width: 74%; padding: var(--s-3) var(--s-4); border-radius: var(--radius-lg); line-height: var(--lh); font-size: var(--t-sm); box-shadow: var(--shadow); white-space: normal; overflow-wrap: anywhere; } .chat-msg-user .chat-msg-bubble { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: var(--radius-sm); } .chat-msg-ai .chat-msg-bubble { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-bottom-left-radius: var(--radius-sm); } .chat-error { margin-top: var(--s-2); } /* ---- AI-generated image bubbles ---------------------------------------- */ .chat-msg-bubble-image { padding: 0; overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-raised); } .chat-msg-bubble-image .chat-image-wrap { position: relative; display: block; line-height: 0; } .chat-msg-bubble-image img { display: block; width: 100%; max-width: 340px; height: auto; } .chat-image-download { position: absolute; top: var(--s-2); right: var(--s-2); background: var(--surface); box-shadow: var(--shadow); } /* ---- Empty conversation: quick-start suggestions --------------------- */ .chat-empty { margin: auto; max-width: 480px; text-align: center; padding: var(--s-8) var(--s-4); } .chat-empty-title { font-size: var(--t-lg); font-weight: var(--fw-semi); margin-bottom: var(--s-1); } .chat-suggestions { display: flex; flex-direction: column; margin-top: var(--s-4); } .chat-suggestions > * + * { margin-top: var(--s-2); } .chat-suggestion { height: auto; padding: var(--s-2) var(--s-4); text-align: left; white-space: normal; line-height: var(--lh-tight); } /* ---- Nothing selected: the content-type picker ----------------------- */ .chat-welcome { margin: auto; max-width: 520px; text-align: center; padding: var(--s-8) var(--s-6); } .chat-welcome-art { width: 64px; height: 64px; margin: 0 auto var(--s-4); border-radius: var(--radius-lg); display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: var(--accent-ink); } .chat-welcome-title { font-size: var(--t-2xl); font-weight: var(--fw-semi); letter-spacing: var(--track-tight); margin-bottom: var(--s-2); } .chat-welcome-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-6); } /* ---- Composer --------------------------------------------------------- */ .chat-composer { display: flex; align-items: flex-end; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); background: var(--surface); } .chat-input { flex: 1; resize: none; min-height: 44px; max-height: 200px; overflow-y: auto; line-height: var(--lh); } .chat-composer-actions { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; } .chat-image-btn, .chat-send { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-pill); } .chat-composer-hint, .chat-empty-hint { display: flex; align-items: center; gap: var(--s-1); justify-content: center; } .chat-composer-hint { padding: 0 var(--s-5) var(--s-3); } .chat-empty-hint { margin-top: var(--s-5); } /* ---- Small screens: sidebar becomes a drawer over the thread ---------- */ @media (max-width: 860px) { .chat-app { height: calc(100vh - 168px); border-radius: var(--radius); } .chat-navbtn { display: inline-flex; } .chat-sidebar { position: absolute; inset: 0 auto 0 0; width: min(320px, 88%); z-index: 20; transform: translateX(-100%); transition: transform var(--dur-2) var(--ease); box-shadow: var(--shadow-raised); } .chat-app.chat-nav-open .chat-sidebar { transform: none; } .chat-app.chat-nav-open .chat-scrim { display: block; position: absolute; inset: 0; z-index: 15; background: color-mix(in srgb, var(--ink) 42%, transparent); } .chat-msg-bubble { max-width: 88%; } .chat-thread { padding: var(--s-4); } .chat-composer { padding: var(--s-3); } } @media (prefers-reduced-motion: reduce) { .chat-sidebar { transition: none; } }