/* Workshop AI interface polish pass — loaded last to normalize every mode. */
:root{--workspace-gap:8px;--workspace-radius:16px;--workspace-control:44px;--workspace-ease:180ms ease;--workspace-content-max:1680px}

/* 01 — Stable box model. */
.main-container,.main-container *,.main-container *::before,.main-container *::after{box-sizing:border-box}
/* 02 — Safe flex/grid shrinking. */
.generation-space,.generation-space>div,#controls-container,#modes-menu{min-width:0;min-height:0}
/* 03 — Content boundaries; account, shop and collective fill the workspace. */
#community-gallery-grid,#video-history-view,#radio-view,#events-view,#admin-view,#inpaint-view,#pose-studio-view,#text-mode-container{width:100%;max-width:var(--workspace-content-max);margin-inline:auto;overscroll-behavior:contain}
#profile-view,#shop-view,#collective-view{width:100%;max-width:none;margin-inline:0;overscroll-behavior:contain}
body.app-mode-events #events-view{max-width:none;margin-inline:0}
/* 04 — Long screens scroll instead of clipping. */
#profile-view,#video-history-view,#radio-view,#shop-view,#events-view,#collective-view,#admin-view{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable}
/* 05 — Media never forces horizontal overflow. */
.generation-space img,.generation-space video,.generation-space canvas,.generation-space svg{max-width:100%}
/* 06 — Tables stay reachable on narrow canvases. */
.generation-space .table-responsive,.generation-space .table-wrapper,#admin-view .table-responsive{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
/* 07 — Headers wrap with one spacing rhythm. */
.generation-space :is(.profile-header,.control-header,.history-header,.event-hub-primary,.music-tabs,.shop-header){min-width:0;gap:clamp(8px,1.2vw,16px)}
/* 08 — Form controls cannot escape panels. */
.controls-panel :is(input,textarea,select,button),.generation-space :is(input,textarea,select){max-width:100%}
/* 09 — Stable press feedback without layout jumps. */
.main-container :is(button,[role="button"],a[href]){-webkit-tap-highlight-color:transparent;transition:color var(--workspace-ease),background-color var(--workspace-ease),border-color var(--workspace-ease),box-shadow var(--workspace-ease),opacity var(--workspace-ease)}
.main-container :is(button,[role="button"],a[href]):active{opacity:.78}
/* 10 — Keyboard actions remain visible; editable fields use a quiet neutral focus. */
.main-container :is(button,[role="button"],a[href]):focus-visible{outline:3px solid rgba(var(--primary-rgb),.52)!important;outline-offset:2px}
.main-container :is(input,textarea,select,[contenteditable="true"]):is(:focus,:focus-visible){outline:0!important;border-color:color-mix(in srgb,var(--text-secondary) 42%,var(--border-color))!important;box-shadow:0 0 0 1px rgba(255,255,255,.07)!important}
/* 11 — Consistent disabled state. */
.main-container :is(button,[role="button"]):disabled,.main-container [aria-disabled="true"]{cursor:not-allowed!important;opacity:.48;filter:saturate(.5)}
/* 12 — Mode tiles retain equal geometry. */
#modes-menu.mode-tile-nav .mode-button{position:relative;align-content:center;min-width:0;overflow:hidden;text-wrap:balance}
#modes-menu.mode-tile-nav .mode-button>span{max-width:100%;overflow-wrap:anywhere}
/* 13 — Active mode uses shape as well as color. */
#modes-menu .mode-button.active,.modes-panel-footer .mode-button-icon.active{border-color:color-mix(in srgb,var(--primary) 68%,var(--border-color));box-shadow:inset 3px 0 0 var(--primary),0 0 0 1px color-mix(in srgb,var(--primary) 18%,transparent)}
/* 14 — Footer actions remain immutable squares. */
.modes-panel-footer .mode-button-icon{width:var(--workspace-control)!important;min-width:var(--workspace-control)!important;height:var(--workspace-control)!important;min-height:var(--workspace-control)!important;aspect-ratio:1;flex:0 0 var(--workspace-control)!important;padding:0!important;border-radius:12px!important}
/* 15 — The left drawer has one internal scroll region. */
body.left-panel-expanded .controls-panel>#controls-container,body.left-panel-expanded .controls-panel>:is(#profile-stats-view,#text-chat-sidebar-view){min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable}
/* 16 — Galleries use the widened canvas. */
#community-gallery-grid,#video-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));align-content:start;gap:clamp(8px,1vw,14px)}
/* 17 — Empty states remain centered and compact. */
.generation-space :is(.cyber-empty-state,.empty-state){width:min(100%,680px);min-height:min(52dvh,440px);margin:auto;padding:clamp(20px,4vw,48px)}
/* 18 — Cards and grids safely shrink. */
.generation-space :is(.card,[class*="-card"],[class*="-grid"],[class*="-layout"]){min-width:0}
/* 19 — Toasts avoid phone safe areas. */
.toast-container,#toast-container{max-width:calc(100vw - 16px);padding-bottom:env(safe-area-inset-bottom)}
/* 20 — Reduced motion applies to every mode. */
@media (prefers-reduced-motion:reduce){.main-container *,.main-container *::before,.main-container *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@media (min-width:992px){
 .generation-space{padding:0}
 body:not(.app-mode-studio):not(.app-mode-community):not(.app-mode-photoshoot) .generation-space>:is(#video-history-view,#radio-view,#shop-view,#events-view,#collective-view,#admin-view){padding:clamp(14px,1.6vw,28px)}
 body.app-mode-events .generation-space>#events-view{padding:0}
 body.app-mode-pose_studio .generation-space{overflow:visible}
 body.app-mode-pose_studio #pose-studio-view,body.app-mode-inpaint #inpaint-view,body.app-mode-text #text-mode-container{height:100%;max-width:none}
}

@media (max-width:991px){
 :root{--workspace-control:46px}
 body.is-logged-in .generation-space{display:flex;flex-direction:column;gap:0}
 .mobile-workspace-bar{display:grid!important;flex:0 0 auto}
 .challenge-announcement-slot{flex:0 0 auto}
 .challenge-announcement-slot:empty{display:none!important}
 body.is-logged-in .generation-space>div:not(.mobile-workspace-bar):not(.challenge-announcement-slot):not(.site-system-strip){flex:1 1 auto;min-height:0;max-height:100%}
 body.is-logged-in .generation-space>:is(#community-gallery-grid,#video-history-view,#radio-view,#shop-view,#events-view,#collective-view){padding:8px!important;padding-bottom:max(12px,env(safe-area-inset-bottom))!important}
 body.is-logged-in .controls-panel>#controls-container,body.is-logged-in .controls-panel>:is(#profile-stats-view,#text-chat-sidebar-view){min-height:0;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
 body.is-logged-in .controls-panel .app-logo-text{flex:0 0 auto;min-height:42px}
 body.is-logged-in .controls-panel #auth-status-container{flex:0 0 auto}
 #modes-menu.mode-tile-nav .mode-button{min-height:64px}
 #modes-menu.mode-tile-nav .mode-button>span{font-size:clamp(.68rem,3vw,.8rem);line-height:1.2}
 .generation-space :is(.form-actions,.modal-footer,.filter-group,.music-tabs){flex-wrap:wrap}
 .generation-space :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select){font-size:16px}
 #community-gallery-grid,#video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 body.app-mode-pose_studio .mobile-workspace-bar{display:grid!important}
 body.app-mode-text #text-mode-container,body.app-mode-inpaint #inpaint-view{width:100%;height:auto;min-height:0}
}

@media (max-width:420px){
 #community-gallery-grid,#video-grid{grid-template-columns:1fr}
 .mobile-workspace-brand{font-size:.68rem;letter-spacing:.045em}
 body.is-logged-in .controls-panel,body.is-logged-in .modes-panel{width:calc(100vw - 12px)!important;max-width:none!important}
}

/* Final collision and hover audit. */
.controls-panel,.modes-panel,.generation-space{isolation:isolate}
.controls-panel,.modes-panel{scroll-padding-block:12px}
.generation-space>:is(#community-gallery-grid,#profile-view,#video-history-view,#radio-view,#shop-view,#events-view,#collective-view,#admin-view){scroll-padding-block:16px}

#left-panel-toggle,#right-panel-toggle,.mobile-workspace-action,.modes-panel-footer .mode-button-icon{transform-origin:center;will-change:auto}
#right-panel-toggle{min-width:22px;right:calc(var(--app-right-dock-width) + 2px);border-radius:11px 0 0 11px}
body.right-panel-collapsed #right-panel-toggle{right:2px}

@media (hover:hover) and (pointer:fine){
 #modes-menu .mode-button:hover,.modes-panel-footer .mode-button-icon:hover,.mobile-workspace-action:hover{border-color:color-mix(in srgb,var(--primary) 48%,var(--border-color));box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 14%,transparent),0 8px 20px rgba(0,0,0,.16)}
 #left-panel-toggle:hover,#right-panel-toggle:hover{filter:brightness(1.12)}
}

@media (max-width:991px),(hover:none){
 .community-card:hover,.video-card:hover,.music-card-simple:hover,.kie-studio-category:hover,.lyrics-history-card:hover,.tariff-card:hover,.shop-item-card:hover{transform:none!important}
}

@media (max-width:991px){
 #right-panel-toggle{display:none!important}
 body.is-logged-in .controls-panel,body.is-logged-in .modes-panel{overscroll-behavior:contain}
 body.is-logged-in .controls-panel.is-open,body.is-logged-in .modes-panel.is-open{visibility:visible;pointer-events:auto}
 body.is-logged-in .controls-panel:not(.is-open),body.is-logged-in .modes-panel:not(.is-open){pointer-events:none}
}