/* ATELIER UI · Computer v0.9.21 visual enhancement
   Progressive CSS overlay; no hidden actions, API changes or runtime replacement.
   Refined for desktop and mobile, dark and light. */

:root, html:not(.dark) {
  --studio-accent: #397e6d;
  --studio-accent-strong: #28735f;
  --studio-accent-soft: rgba(44,127,101,.10);
  --studio-surface: #ffffff;
  --studio-elevated: #f9faf8;
  --studio-sidebar: #f3f4f0;
  --studio-shadow: 0 12px 40px rgba(26,46,43,.075), 0 2px 8px rgba(26,46,43,.045);
  --studio-ring: rgba(47,131,103,.38);
  --app-bg: #fbfbf8 !important;
  --app-fg: #26372f !important;
  --app-fg-muted: #62716b !important;
  --app-fg-subtle: #80918a !important;
  --app-border: rgba(44,71,60,.105) !important;
  --app-divider: rgba(44,71,60,.078) !important;
  --app-hover: rgba(52,103,83,.075) !important;
  --app-active: rgba(52,103,83,.105) !important;
}
html.dark {
  --studio-accent: #9fd7bf;
  --studio-accent-strong: #b9e9d3;
  --studio-accent-soft: rgba(144,213,187,.10);
  --studio-surface: #20282b;
  --studio-elevated: #252e31;
  --studio-sidebar: #171f22;
  --studio-shadow: 0 18px 55px rgba(0,0,0,.24), 0 2px 8px rgba(0,0,0,.12);
  --studio-ring: rgba(159,215,191,.42);
  --app-bg: #10191c !important;
  --app-fg: #e8eee9 !important;
  --app-fg-muted: #a4b6af !important;
  --app-fg-subtle: #809890 !important;
  --app-border: rgba(205,228,216,.105) !important;
  --app-divider: rgba(205,228,216,.072) !important;
  --app-hover: rgba(205,228,216,.055) !important;
  --app-active: rgba(205,228,216,.095) !important;
}

html, body, .app-theme {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
html { color-scheme: light; }
html.dark { color-scheme: dark; }
::selection { background: var(--studio-ring); color: var(--app-fg); }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
a, button { touch-action: manipulation; }
:where(button, a, [role='button'], input, textarea, [contenteditable='true']):focus-visible {
  outline: 2px solid var(--studio-accent) !important;
  outline-offset: 3px;
}
:where(.app-theme) { letter-spacing: -0.008em; }

/* Product chrome – more composed, readable and slightly softer than stock Computer */
.sidebar {
  background: var(--studio-sidebar) !important;
  border-right: 1px solid var(--app-border) !important;
  box-shadow: 6px 0 26px rgba(0,0,0,.017);
}
.sidebar > div:first-child { min-height: 56px !important; padding-left: 17px !important; padding-right: 12px !important; }
.sidebar > div:first-child a { font-size: 13px !important; letter-spacing: -.025em; gap: 10px !important; }
.sidebar > div:first-child a > img { width: 25px !important; height: 25px !important; border-radius: 8px; }
.sidebar > div:first-child a .studio-wordmark { display: inline; font-weight: 700; }
.sidebar > div:first-child a .studio-brandmark { display: inline-block; }
.sidebar > div:first-child a .studio-brand-caption { display: inline; font-weight: 500; font-size: 9px; letter-spacing: .11em; color: var(--app-fg-subtle); text-transform: uppercase; margin-left: 2px; }
.sidebar > div:nth-child(2) { margin-top: 12px !important; }
.sidebar button, .sidebar a { transition: background .16s ease, color .16s ease, transform .16s ease !important; }
.sidebar :is(button, a):hover { color: var(--app-fg) !important; }
.sidebar :is(button, a):focus-visible { border-radius: 10px; }
.sidebar [class~='h-7'] { min-height: 36px !important; height: auto; }
.sidebar [class~='rounded-lg'] { border-radius: 11px !important; }
.sidebar .resize-handle:hover { background: var(--studio-accent-soft) !important; }
.sidebar .ws-item { border-radius: 10px; }
.sidebar .ws-item:hover { background: var(--app-hover); }
.sidebar button:has(img[src*='/user.png']), .sidebar button:has(img[alt='Avatar']) {
  min-height: 44px !important;
  border-top: 1px solid var(--app-divider);
  border-radius: 0 !important;
}

/* Chat reading comfort */
#main-col { background: var(--app-bg); }
#main-col main { background: var(--app-bg); }
#main-col .chat-prosemirror { line-height: 1.6 !important; font-size: 14px !important; }
#main-col :is(.prose, [class*='prose-']) { line-height: 1.76; overflow-wrap: anywhere; }
#main-col :is(.prose, [class*='prose-']) h1,
#main-col :is(.prose, [class*='prose-']) h2,
#main-col :is(.prose, [class*='prose-']) h3 { letter-spacing: -.03em; }
#main-col :is(.prose, [class*='prose-']) a { color: var(--studio-accent); text-underline-offset: 3px; }
#main-col :is(.prose, [class*='prose-']) pre {
  border: 1px solid var(--app-border);
  border-radius: 15px;
  background: var(--studio-sidebar);
}
#main-col :is(.prose, [class*='prose-']) table { border-radius: 12px; }
#main-col .app-interactive-active.rounded-3xl { border-radius: 20px !important; background: var(--studio-accent-soft) !important; }

/* The message composer is a first-class surface, not a floating control. */
#main-col .app-surface.rounded-3xl:has(.chat-editor-mount) {
  background: var(--studio-surface) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: 22px !important;
  box-shadow: var(--studio-shadow) !important;
  padding: 4px 4px 0 !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#main-col .app-surface.rounded-3xl:has(.chat-editor-mount:focus-within) {
  border-color: var(--studio-ring) !important;
  box-shadow: var(--studio-shadow), 0 0 0 3px var(--studio-accent-soft) !important;
}
#main-col .chat-editor-mount { min-height: 42px; }
#main-col .chat-editor-mount .chat-prosemirror { min-height: 43px !important; padding: 13px 8px 8px !important; }
#main-col .app-surface.rounded-3xl:has(.chat-editor-mount) button { transition: transform .15s ease, background .16s ease; }
#main-col .app-surface.rounded-3xl:has(.chat-editor-mount) button:active { transform: scale(.94); }
#main-col .app-surface.rounded-3xl:has(.chat-editor-mount) button:focus-visible { outline-offset: 1px; }
#main-col .app-surface.rounded-3xl:has(.chat-editor-mount) :is(button[aria-label*='Send'], button[title*='Send']) { border-radius: 13px !important; }

/* Landing welcome – restrained, but with a small bit of character. */
#main-col div.mb-8.text-center:has(> h1) { margin-bottom: 24px !important; }
#main-col div.mb-8.text-center:has(> h1)::before {
  content: '✦'; display: grid; place-items: center;
  width: 46px; height: 46px; margin: 0 auto 16px;
  color: var(--studio-accent);
  font-size: 21px;
  background: var(--studio-accent-soft);
  border: 1px solid var(--app-border);
  border-radius: 16px;
  box-shadow: inset 0 1px rgba(255,255,255,.055);
  animation: studio-enter .55s cubic-bezier(.2,.8,.2,1) both;
}
#main-col div.mb-8.text-center:has(> h1) > h1 {
  font-size: clamp(22px, 2.65vw, 32px) !important;
  line-height: 1.24 !important;
  font-weight: 580 !important;
  letter-spacing: -.048em !important;
}
#main-col .studio-subtitle {
  color: var(--app-fg-muted); font-size: 13px;
  line-height: 1.55; margin: 8px 0 0;
  animation: studio-enter .52s .08s ease both;
}

/* Controls, modals, cards – tactile not noisy. */
.app-theme button { transition-duration: .16s; }
.app-theme [class~='rounded-xl'] { border-radius: 13px; }
.app-theme [class~='rounded-2xl'] { border-radius: 17px; }
.app-theme .app-surface { background: var(--studio-surface); }
.app-theme .app-subtle-surface { background: var(--studio-elevated); }
.app-theme .app-interactive:hover { background: var(--app-hover); }
.app-theme [class~='shadow-xl'] { box-shadow: var(--studio-shadow); }
.app-theme :is([role='dialog'], [data-state='open']) { backdrop-filter: blur(16px); }


/* Auth view */
.app-theme:has(form[action='javascript:void(0)']) {
  background:
    radial-gradient(ellipse 50% 48% at 15% 5%, var(--studio-accent-soft), transparent 76%),
    var(--app-bg) !important;
}
.app-theme:has(form[action='javascript:void(0)']) > .max-w-md {
  background: var(--studio-surface);
  border: 1px solid var(--app-border);
  border-radius: 27px;
  padding: clamp(26px, 5vw, 44px);
  box-shadow: var(--studio-shadow);
}
.app-theme:has(form[action='javascript:void(0)']) h1 {
  font-size: 25px !important;
  font-weight: 700 !important;
  letter-spacing: -.055em;
  margin-bottom: 24px !important;
}
.app-theme:has(form[action='javascript:void(0)']) input {
  background: var(--studio-elevated) !important;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  margin: 6px 0;
  min-height: 47px;
  padding: 11px 13px !important;
  font-size: 14px !important;
}
.app-theme:has(form[action='javascript:void(0)']) form > button[type='submit'] {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border-radius: 12px;
  width: 100%;
  margin-top: 15px;
  background: var(--studio-accent);
  color: #10251e !important;
  font-weight: 650;
}
html:not(.dark) .app-theme:has(form[action='javascript:void(0)']) form > button[type='submit'] { color: white !important; }
.app-theme:has(form[action='javascript:void(0)']) form > button[type='submit']:disabled { opacity: .4; }

@keyframes studio-enter { from {opacity:0; transform:translateY(8px)} to {opacity:1;transform:translateY(0)} }
@media (prefers-reduced-motion: no-preference) {
  .sidebar :is(button,a), #main-col .app-interactive { transition-timing-function: cubic-bezier(.22,.75,.26,1); }
  #main-col .studio-subtitle { animation: studio-enter .45s .08s ease both; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Mobile: preserve original side-drawer, safe-area, touch behaviour. */
@media (max-width: 767px) {
  .sidebar { width: min(87vw, 332px) !important; max-width: 332px; box-shadow: 20px 0 80px rgba(0,0,0,.32) !important; }
  .sidebar > div:first-child { min-height: 59px !important; }
  .sidebar [class~='h-7'] { min-height: 43px !important; }
  .sidebar :is(button, a) { min-height: 38px; }
  #main-col .chat-editor-mount .chat-prosemirror { min-height: 46px !important; font-size: 16px !important; }
  #main-col .app-surface.rounded-3xl:has(.chat-editor-mount) { border-radius: 21px !important; }
  #main-col .studio-subtitle { font-size: 12px; max-width: 290px; margin: 9px auto 0; }
  #main-col .app-interactive-active.rounded-3xl { border-radius: 18px !important; }
  #main-col .px-4.py-3:has(.chat-editor-mount) { padding-left: 12px !important; padding-right: 12px !important; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (min-width: 768px) {
  .sidebar { min-width: 195px; }
  #main-col .chat-editor-mount .chat-prosemirror { min-height: 40px !important; }
}

/* Long-form answers use a GPT-like readable measure on large screens. */
@media (min-width: 900px) {
  #main-col .max-w-2xl:has(.chat-prosemirror) { max-width: 756px !important; }
  #main-col .max-w-2xl:has(> .group),
  #main-col .max-w-2xl:has(> div > .group) { max-width: 756px !important; }
}
#main-col .prose.prose-sm { font-size: 0.895rem; line-height: 1.76; }
@media (min-width: 768px) { #main-col .prose.prose-sm { font-size: 0.94rem; } }
#main-col .prose :is(p,li) { overflow-wrap: anywhere; }

/* ── Studio v2 | Native workspace personalisation panel ── */
.studio-settings-launcher {
  display:flex; align-items:center; gap:11px; width:calc(100% - 18px); min-height:42px;
  margin:6px 9px 7px; padding:9px 12px; border:1px solid var(--app-border);
  background:var(--studio-accent-soft); color:var(--app-fg); border-radius:12px;
  font-weight:600; font-size:12px; text-align:left; letter-spacing:-.01em;
}
.studio-settings-launcher:hover { background:var(--app-active); }
.studio-launcher-icon {font-size:17px;color:var(--studio-accent);}
.studio-modal-backdrop {position:fixed;inset:0;z-index:1000;background:rgba(4,9,12,.72);display:flex;justify-content:flex-end;align-items:stretch;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.studio-panel {width:min(500px,100vw);height:100%;min-height:0;display:flex;flex-direction:column;background:var(--studio-sidebar);color:var(--app-fg);border-left:1px solid var(--app-border);font-family:Inter,system-ui,sans-serif;box-shadow:-20px 0 80px rgba(0,0,0,.25);animation:studio-panel-enter .22s ease-out both;}
.studio-panel header {display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:34px 30px 24px;border-bottom:1px solid var(--app-border);}
.studio-panel h2 {font-size:29px;font-weight:690;line-height:1.13;letter-spacing:-.06em;margin:4px 0 9px;}
.studio-overline {font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--studio-accent);margin:0;}
.studio-note {font-size:12px;line-height:1.55;color:var(--app-fg-muted);margin:0;}
.studio-panel .studio-close {background:var(--app-hover);border:1px solid var(--app-border);color:var(--app-fg);font-size:25px;line-height:1;min-width:37px;height:37px;border-radius:12px;}
.studio-panel-content {flex:1;overflow-y:auto;padding:8px 30px 30px;overscroll-behavior:contain;}
.studio-section-head {display:flex;justify-content:space-between;align-items:center;font-weight:670;font-size:13px;letter-spacing:-.01em;border-bottom:1px solid var(--app-border);padding:23px 0 12px;margin-bottom:16px;}
.studio-section-head span {font:500 11px/1 ui-monospace,monospace;color:var(--app-fg-subtle);}
.studio-fields {display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.studio-field {display:flex;flex-direction:column;gap:7px;margin-bottom:14px;min-width:0;}
.studio-field>span {color:var(--app-fg-muted);font-size:11px;font-weight:600;}
.studio-field input {font-size:14px;min-height:43px;min-width:0;background:var(--studio-surface);border:1px solid var(--app-border);border-radius:12px;padding:10px 12px;color:var(--app-fg);width:100%;outline:0;box-sizing:border-box;}
.studio-field input[type=color] {padding:5px;height:43px;cursor:pointer;}
.studio-field input:focus-visible {border-color:var(--studio-accent);outline:2px solid var(--studio-accent-soft);outline-offset:0;}
.studio-presets {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:0 0 17px;}
.studio-presets button {background:var(--studio-surface);border:1px solid var(--app-border);min-height:39px;color:var(--app-fg-muted);border-radius:11px;font-size:12px;}
.studio-presets button.selected {border-color:var(--studio-accent);background:var(--studio-accent-soft);color:var(--app-fg);font-weight:670;}
.studio-icon-row {display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:8px 0 0;}
.studio-icon-preview {width:64px;height:64px;object-fit:contain;border-radius:18px;background:var(--studio-elevated);border:1px solid var(--app-border);}
.studio-icon-action {border:1px solid var(--app-border);border-radius:12px;padding:12px 14px;color:var(--app-fg);background:var(--studio-surface);font-size:12px;font-weight:600;cursor:pointer;}
.studio-icon-row .studio-note {flex-basis:100%;}
.studio-panel .studio-secondary {border:1px solid var(--app-border);background:var(--studio-surface);border-radius:11px;color:var(--app-fg);font-size:12px;font-weight:620;padding:12px 16px;}
.studio-message {font-size:12px;min-height:23px;color:var(--studio-accent);margin-top:17px;}
.studio-message.error {color:#ec827c;}
.studio-panel footer {border-top:1px solid var(--app-border);padding:18px 30px calc(18px + env(safe-area-inset-bottom,0px));display:flex;justify-content:flex-end;gap:10px;background:var(--studio-sidebar);}
.studio-panel .studio-save {border:0;background:var(--studio-accent);color:#112722;border-radius:11px;font-size:12px;font-weight:750;min-height:43px;padding:0 19px;}
.studio-panel .studio-save:disabled {opacity:.5;cursor:wait;}
@keyframes studio-panel-enter {from {opacity:0;transform:translateX(24px)}to {opacity:1;transform:translateX(0)}}
@media(max-width:600px){
  .studio-panel header {padding:22px 20px 18px;}
  .studio-panel h2 {font-size:26px;}
  .studio-panel-content {padding:0 20px 24px;}
  .studio-fields {grid-template-columns:1fr;gap:0;}
  .studio-presets button {min-height:44px;}
  .studio-panel footer {padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));}
}
@media(prefers-reduced-motion:reduce){.studio-panel {animation:none;}}