/* Sparren: burnt orange, graphite and warm ivory. Scoped to this workspace/popup. */
.sparren-studio { --sparren-ink: #292522; --sparren-accent: #c34b12; --sparren-line: #ebdfd2; color: var(--sparren-ink); }
.sparren-hero { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 24px; overflow: hidden; min-height: 176px; padding: clamp(24px,3vw,42px); margin-bottom: 20px; border: 1px solid #f1a35c; border-radius: 24px; color: #fff; background: radial-gradient(ellipse at 84% 10%,#cf7430 0,transparent 48%),linear-gradient(125deg,#22252a,#653219 62%,#a54b18); box-shadow: 0 20px 46px #43291824; }
.sparren-hero::after { content: "GPT"; position: absolute; right: 2%; bottom: -52px; font-size: clamp(140px,16vw,230px); font-weight: 950; color: #ffffff0c; pointer-events: none; }
#aisparrenModule .sparren-hero { display: flex !important; flex-direction: row !important; gap: 24px !important; margin-bottom: 20px !important; }
#aisparrenModule .sparren-hero > div:first-child { flex: 1 1 auto; min-width: 0; }
#aisparrenModule .sparren-hero-mark { flex: 0 0 auto; width: auto; }
body.auth-ready .sparren-hero :is(h2,p) { color: #fff !important; }
body.auth-ready .sparren-hero .eyebrow { color: #ffdbaf !important; }
.sparren-hero h2 { font-size: clamp(2rem,3.7vw,3.25rem); margin: 6px 0 12px; }
.sparren-hero p { max-width: 700px; margin: 0; line-height: 1.6; }
.sparren-hero-mark { flex: 0 0 auto; position: relative; font-size: 46px; font-weight: 850; letter-spacing: -2px; padding: 20px 26px; border: 1px solid #ffffff4a; border-radius: 24px; background: #ffffff0e; }
.sparren-hero-mark span { display: block; font-size: 11px; letter-spacing: .5px; font-weight: 500; color: #ffe5c2; }
.sparren-layout { display: grid; grid-template-columns: minmax(220px,290px) minmax(0,1fr); gap: 18px; align-items: stretch; }
.sparren-sidebar, .sparren-main { min-width: 0; border: 1px solid var(--sparren-line); border-radius: 22px; background: #fff; box-shadow: 0 12px 30px #482e240a; }
.sparren-sidebar { padding: 18px; display: flex; flex-direction: column; gap: 12px; background: linear-gradient(#fff9f2,#f3eee7); }
.sparren-sidebar-head { display: flex; justify-content: space-between; align-items: center; }
.sparren-sidebar-head h3 { margin: 0; }
.sparren-sidebar-head button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 12px; background: #b74813; color: #fff; font-size: 24px; cursor: pointer; }
.sparren-sidebar label { font-size: 11px; font-weight: 750; color: #72513c; }
.sparren-studio input, .sparren-studio textarea, .sparren-studio select { min-width: 0; width: 100%; border: 1px solid #dcccba; border-radius: 12px; padding: 12px; background: #fff; color: #292522; box-sizing: border-box; }
.sparren-studio :is(input,textarea)::placeholder { color: #827161; }
.sparren-chat-list { display: grid; align-content: start; gap: 8px; max-height: 540px; overflow-y: auto; }
.sparren-chat-item { border: 1px solid transparent; border-radius: 14px; background: #fff9; }
.sparren-chat-item.active { border-color: #cc8149; background: #fff; box-shadow: inset 3px 0 #c34b12; }
.sparren-chat-item button { display: grid; gap: 6px; width: 100%; text-align: left; padding: 13px; color: #292522; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.sparren-chat-item strong, .sparren-chat-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sparren-chat-item span, .sparren-chat-item small { color: #786657; font-size: 11px; }
.sparren-sidebar-footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--sparren-line); }
.sparren-main { overflow: hidden; display: flex; flex-direction: column; }
.sparren-chat-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 22px 24px; border-bottom: 1px solid var(--sparren-line); }
.sparren-chat-head h3 { margin: 4px 0 6px; color: #292522; }
.sparren-chat-head p { margin: 0; color: #786657; font-size: 12px; }
.sparren-chat-tools { display: flex; flex-wrap: wrap; gap: 6px; justify-content: end; }
.sparren-messages { min-height: 320px; height: clamp(360px,47dvh,680px); overflow-y: auto; padding: 24px; scroll-behavior: auto; overflow-wrap: anywhere; }
.sparren-messages .ai-sparren-message { max-width: 92%; border: 1px solid #eadfd2; border-radius: 18px; background: #faf8f3; margin: 0 auto 18px 0; padding: 18px 20px; color: #292522; }
.sparren-messages .ai-sparren-message.user { margin-left: auto; margin-right: 0; background: #a34518; border-color: #a34518; color: #fff; }
body.auth-ready .sparren-messages .ai-sparren-message.user :is(p,strong,span,li) { color: #fff !important; }
.sparren-welcome { display: grid; place-content: center; justify-items: center; min-height: 280px; text-align: center; }
.sparren-welcome > div { display: grid; place-items: center; width: 64px; height: 64px; font-size: 38px; border-radius: 22px; background: linear-gradient(145deg,#ffe6c7,#f2c18c); color: #a34518; }
.sparren-welcome h3 { font-size: 26px; margin: 8px 0; }
.sparren-welcome p { max-width: 380px; line-height: 1.6; color: #786657; }
.sparren-composer { display: flex !important; flex-direction: column !important; gap: 12px; padding: 18px 24px; border-top: 1px solid var(--sparren-line); background: #fffcf7; }
.sparren-composer textarea { width: 100% !important; min-height: 100px; max-height: 260px; resize: vertical; }
.sparren-composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sparren-composer-footer span { color: #806c5d; font-size: 11px; }
#sparrenPopupModel { flex: 1 1 auto; min-width: 0; color: #643a23; font-size: 12px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
#sparrenPopupForm .sparren-composer-footer > button { flex: 0 0 auto; }
.sparren-studio .primary-button { color: #fff; border-color: #b74813; background: linear-gradient(135deg,#bf5118,#914015); box-shadow: 0 6px 16px #a3451820; }
.sparren-studio .secondary-button { background: #fff; border-color: #dfd1c1; color: #663d26; }
.sparren-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.sparren-modes button { border: 1px solid #decfba; border-radius: 999px; background: #fff; color: #72513c; padding: 8px 14px; font-size: 12px; font-weight: 750; cursor: pointer; }
.sparren-modes button[aria-pressed="true"] { background: #fff0d9; border-color: #c57839; color: #743b1b; }
.sparren-project-context { padding: 14px 24px; border-top: 1px solid var(--sparren-line); }
.sparren-project-context summary { cursor: pointer; color: #72513c; font-size: 12px; }
.sparren-project-context textarea { margin: 10px 0; }
.sparren-rename { padding: 14px 24px; display: flex; align-items: center; gap: 8px; }
.sparren-topbar-button { flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid #ffd3a3bb; border-radius: 12px; background: linear-gradient(140deg,#ffa04b,#db641c 55%,#87380f); color: #fff; font-size: 25px; box-shadow: 0 5px 15px #71380b35; cursor: pointer; -webkit-app-region: no-drag; }
.sparren-popup { position: fixed; z-index: 12050; right: max(18px,var(--desktop-window-controls-width,0px)); top: 76px; display: flex; flex-direction: column; width: min(460px,calc(100vw - 32px)); max-height: calc(100dvh - 94px); border: 1px solid #d8b48c; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 24px 70px #32251945; }
.sparren-popup-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; background: linear-gradient(125deg,#29282a,#a24816); color: #fff; }
.sparren-popup-head h3 { margin: 3px 0 0; color: #fff; }
.sparren-popup-head p { margin: 0; color: #ffdbaf; }
.sparren-popup-head button { border-radius: 50%; width: 32px; height: 32px; border: 1px solid #ffffff66; background: #ffffff15; color: #fff; cursor: pointer; font-size: 22px; }
.sparren-popup-tools { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--sparren-line); }
.sparren-popup .sparren-messages { flex: 1 1 auto; min-height: 100px; height: 300px; padding: 16px; }
.sparren-popup .sparren-composer { flex: 0 0 auto; padding: 14px 16px; }
.sparren-popup .sparren-composer textarea { min-height: 80px; }
.sparren-popup .sparren-welcome { min-height: 200px; }
.sparren-studio [hidden], .sparren-studio.hidden, .sparren-studio .hidden, .ai-control-select-field[hidden] { display: none !important; }
.ai-control-module-actions { flex-wrap: wrap; }
.ai-control-select-field input { width: 100%; min-width: 0; }
@media(max-width: 1000px) { .sparren-layout { grid-template-columns: 220px minmax(0,1fr); } .sparren-chat-head { flex-direction: column; } .sparren-hero-mark { display: none; } }
@media(max-width: 680px) { .sparren-layout { grid-template-columns: 1fr; } .sparren-chat-list { max-height: 180px; } .sparren-hero h2 { font-size: 30px; } .sparren-composer-footer > span { max-width: 150px; } .sparren-popup { right: 12px; width: calc(100vw - 24px); } }