.genie-workspace{padding:16px 22px 20px;margin:auto;max-width:1800px;color:#27303c;height:calc(100dvh - 72px);min-height:440px}.genie-studio{position:relative;height:100%;background:white;border:1px solid #e2e6eb;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}.genie-studio-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex:none;height:66px;padding:0 24px;font-family:Inter,sans-serif}.genie-studio-name{display:flex;align-items:center;gap:12px}.genie-studio-name>svg{color:#315cff;width:34px;height:34px;background:#f0f4ff;padding:7px;border-radius:9px}.genie-studio-name h1{font:600 16px/1.4 Inter,sans-serif;letter-spacing:-.25px;margin:0}.genie-subtitle{font-size:11px;color:#75808e;margin:2px 0 0}.genie-preview-label{display:flex;align-items:center;gap:6px;font:500 11px Inter,sans-serif;color:#667789;background:#f3f6f8;padding:7px 10px;border-radius:6px}.genie-preview-label i{width:5px;height:5px;border-radius:50%;background:#91a0ad}.genie-badge-ready{color:#338163;background:#f0f8f4}.genie-badge-ready i{background:#3b9b77}.genie-badge-error{color:#a14a39}.genie-runtime-frame{display:block;flex:1;min-height:0;border:0;width:100%;background:white}.genie-load-note{position:absolute;z-index:2;top:78px;left:24px;font:12px Inter,sans-serif;background:#f3f6fa;color:#42576b;padding:10px 14px;border-radius:6px;max-width:calc(100% - 48px)}.genie-load-error{background:#fff0ed;color:#993d28}.genie-load-error button{margin-left:10px;background:white;border:1px solid currentColor;border-radius:4px;padding:4px 8px;color:inherit;cursor:pointer}@media(max-width:760px){.genie-workspace{padding:8px;height:calc(100dvh - 64px);min-height:430px}.genie-studio-bar{height:60px;padding:0 16px}.genie-studio-name{gap:10px}.genie-studio-name h1{font-size:15px}.genie-preview-label{font-size:11px}}

/* Keep this route within the viewport, including keyboard-focused header controls. */
html:has(.genie-workspace),body:has(.genie-workspace){overflow-x:clip;max-width:100%}
.shell:has(.genie-workspace){min-width:0;max-width:100%;width:100%}
.shell:has(.genie-workspace)>div{min-width:0;max-width:100%}
.shell:has(.genie-workspace) .header{min-width:0;max-width:100%;gap:12px}
.shell:has(.genie-workspace) .header-search{min-width:0;flex:0 1 280px;overflow:hidden}
.shell:has(.genie-workspace) .header-search>span:not(.kbd){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){.shell:has(.genie-workspace) .header-search{display:none}.shell:has(.genie-workspace) .header{padding-left:16px;padding-right:16px;gap:10px}}
@media(max-width:480px){.shell:has(.genie-workspace) .btn-create>span{display:none}.shell:has(.genie-workspace) .header{gap:6px}}

/* Flat conversation workspace: give the character and settings the viewport. */
.genie-workspace{padding:8px 14px 12px;height:calc(100dvh - 72px);color:#202936}
.genie-studio{border-color:#dfe4eb;border-radius:10px;background:#fff;box-shadow:none}
.genie-studio-bar{height:50px;padding:0 20px;border:0;background:#fff}
.genie-studio-name{gap:10px}.genie-studio-name>svg{width:30px;height:30px;padding:6px;border-radius:7px;background:#edf1fc;color:#315bea}
.genie-studio-name h1{font-size:15px;letter-spacing:-.2px}.genie-subtitle{font-size:11px;color:#667383;margin:0}
.genie-preview-label{background:#f2f4f7;color:#576779;border:1px solid #e5e9ef;padding:5px 9px}
.genie-badge-ready{background:#f0f7f3;color:#367458}.genie-load-note{top:64px}
@media(max-width:760px){.genie-workspace{padding:6px 8px 8px;height:calc(100dvh - 64px)}.genie-studio-bar{height:48px;padding:0 16px}}