/* Finished work stays visual. Facts appear as a small glass label on intent. */
:is(body.reference-workspace #stage, #viewAssets) .card:has(.output-details-compact) .card-overlay {
  position:absolute; inset:10px auto auto 10px; z-index:4; box-sizing:border-box;
  display:block; width:min(222px,calc(100% - 20px)); min-height:0; max-height:none;
  margin:0; padding:11px 12px; overflow:visible; border:1px solid rgba(238,246,255,.25);
  border-radius:12px; background:rgba(12,23,36,.59); color:#f6f9ff;
  backdrop-filter:blur(18px) saturate(1.25); -webkit-backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:0 8px 25px rgba(8,18,30,.12); opacity:0; visibility:hidden;
  transform:translateY(5px); pointer-events:none;
  transition:opacity .22s ease,transform .32s cubic-bezier(.16,1,.3,1),visibility .22s;
}
:is(body.reference-workspace #stage, #viewAssets) .card:has(.output-details-compact):is(:hover,:focus-within) .card-overlay {
  inset:10px auto auto 10px; min-height:0; padding:11px 12px; justify-content:initial;
  background:rgba(12,23,36,.59); opacity:1; visibility:visible;
  transform:translateY(0); pointer-events:auto; overflow:visible;
}
:is(body.reference-workspace #stage, #viewAssets) .card .output-details-compact,
:is(body.reference-workspace #stage, #viewAssets) .card:is(:hover,:focus-within) .output-details-compact {
  display:block; flex:none; overflow:visible; padding:0; scrollbar-width:none;
}
.output-details-compact .output-facts { margin:0; color:#f6f9ff; font-size:10px; line-height:1.45; }
.output-details-compact .output-facts > div { display:grid; grid-template-columns:34px minmax(0,1fr); gap:7px; align-items:start; margin:0 0 5px; }
.output-details-compact .output-facts > div:last-child { margin-bottom:0; }
.output-details-compact .output-facts dt { color:rgba(241,247,255,.68); font-size:9px; }
.output-details-compact .output-facts dd { margin:0; color:#fff; font-size:10px; font-weight:550; line-height:1.45; overflow-wrap:anywhere; }
:is(body.reference-workspace #stage, #viewAssets) .card:has(.output-details-compact) > .card-actions {
  position:absolute; z-index:5; right:9px; bottom:9px; display:flex; gap:4px;
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .2s ease,transform .25s ease,visibility .2s;
}
:is(body.reference-workspace #stage, #viewAssets) .card:has(.output-details-compact):is(:hover,:focus-within) > .card-actions {
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
}
:is(body.reference-workspace #stage, #viewAssets) .card > .card-actions button {
  min-height:27px; padding:0 8px; border:1px solid rgba(255,255,255,.28);
  border-radius:8px; background:rgba(11,20,32,.6); color:#fff;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); font-size:10px;
}
:is(body.reference-workspace #stage, #viewAssets) .card:has(.output-details-compact) :is(.card-image-state,.card-video-state,.card-result-count) { display:none; }
@media (hover:none) {
  :is(body.reference-workspace #stage, #viewAssets) .card:has(.output-details-compact):focus-within .card-overlay,
  :is(body.reference-workspace #stage, #viewAssets) .card:has(.output-details-compact):focus-within > .card-actions { visibility:visible; opacity:1; transform:none; }
}

/* All visible creation controls share a single line; the narrow viewport scrolls settings. */
#composer .composer-bar, body.reference-workspace #dock #composer .composer-bar { flex-wrap:nowrap; gap:7px; min-width:0; align-items:center; }
#composer .composer-primary-controls { flex:0 1 auto; gap:5px; }
#composer #dockOptionsToggle, body.reference-workspace #dock #composer #dockOptionsToggle { display:none !important; }
#composer #composerOptions, #composer.options-open #composerOptions,
body.reference-workspace #dock #composer #composerOptions,
body.reference-workspace #dock #composer.options-open #composerOptions {
  position:static !important; inset:auto !important; z-index:auto;
  display:flex !important; flex:1 1 auto; flex-wrap:nowrap !important;
  width:auto; min-width:0; max-width:none; height:36px; max-height:36px !important;
  margin:0 !important; padding:0; gap:5px; overflow-x:auto; overflow-y:hidden;
  border:0; border-radius:0; background:transparent; box-shadow:none;
  scrollbar-width:none; animation:none !important;
}
#composer #composerOptions::-webkit-scrollbar { display:none; }
#composer #composerOptions > .chip, body.reference-workspace #dock #composer #composerOptions > .chip { flex:0 0 auto; }
#composer .composer-bar > #sendBtn { flex:0 0 38px; }
@media (max-width:760px) {
  #composer #modelChip { max-width:128px; }
  #composer #kindMini .km-btn { min-width:34px; padding:0 5px; }
  #composer #composerOptions,body.reference-workspace #dock #composer #composerOptions { margin:0 !important; }
}

/* Tool discovery: clearer inputs and a restrained editorial rhythm. */
#viewAiTools .ai-tools-hero { padding:10px 0 24px; border-bottom:1px solid var(--studio-line); }
#viewAiTools .ai-tools-copy h2 { font-size:clamp(35px,3vw,46px); }
#viewAiTools .ai-tools-toolbar { padding:16px 0; gap:12px; }
#viewAiTools .ai-tool-grid { gap:14px; }
#viewAiTools .ai-tool-card, #viewAiTools .ai-tool-card:first-child { border-radius:17px; transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s; }
#viewAiTools .ai-tool-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(35,55,100,.1); }
#viewAiTools .ai-tool-visual, #viewAiTools .ai-tool-card:first-child .ai-tool-visual { height:auto; aspect-ratio:2.6/1; margin:10px 12px 0; }
#viewAiTools .ai-tool-card-copy { margin:12px 0 0; }
#viewAiTools .ai-tool-card-copy > span { min-height:36px; }
#viewAiTools .ai-tool-requires { display:flex; align-items:center; flex-wrap:wrap; gap:5px; min-height:0; margin-top:11px; }
#viewAiTools .ai-tool-requires i { color:var(--studio-quiet); font-size:10px; font-style:normal; }
#viewAiTools .ai-tool-requires b { padding:3px 6px; border-radius:6px; background:var(--studio-panel-2); color:var(--studio-muted); font-size:10px; font-weight:500; }
#viewAiTools .ai-tool-card-foot { padding-top:12px; }
@media (max-width:1100px) { #viewAiTools .ai-tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:660px) { #viewAiTools .ai-tool-grid { grid-template-columns:1fr; } }

/* Skills show a useful summary first; package source opens on demand. */
.skills-library { max-width:1520px; padding-top:24px; }
.skills-heading { padding-bottom:18px; margin-bottom:14px; border-bottom:1px solid var(--studio-line); }
.skills-heading h1 { font-size:clamp(32px,3vw,43px); letter-spacing:-.045em; }
.skills-subtitle { font-size:12px; line-height:1.6; }
.skills-toolbar { gap:12px; margin-bottom:17px; }
.skills-search { width:min(100%,320px); height:40px; }
.skills-layout { grid-template-columns:minmax(290px,.7fr) minmax(0,1.3fr); gap:14px; }
.skills-row { padding:15px; border-radius:13px; transition:background .2s,border-color .2s,transform .25s cubic-bezier(.16,1,.3,1); }
.skills-row:hover { transform:translateX(3px); }
.skills-row.selected { background:var(--studio-panel); border-color:var(--studio-focus); box-shadow:inset 3px 0 var(--studio-focus); }
.skills-detail { padding:26px; border-radius:17px; }
.skills-detail h2 { font-size:27px; }
.skills-detail-description { max-width:60ch; font-size:13px; }
.skills-source-details { margin-top:12px; border-top:1px solid var(--studio-line); }
.skills-source-details > summary { display:flex; align-items:center; gap:8px; padding:13px 0; color:var(--studio-muted); font-size:11px; cursor:pointer; list-style:none; }
.skills-source-details > summary::before { content:'＋'; font-size:16px; color:var(--studio-accent); }
.skills-source-details[open] > summary::before { content:'−'; }
.skills-source-details .skills-preview { max-height:310px; }
@media (max-width:900px) { .skills-layout { grid-template-columns:1fr; } .skills-detail { position:static; } }

/* Tool result metadata uses the same quiet glass treatment without hiding playback. */
#viewAiTools .tool-output-details { inset:10px auto auto 10px; width:min(230px,calc(100% - 20px)); max-height:none; padding:10px 12px; overflow:visible; border:1px solid rgba(238,246,255,.25); border-radius:11px; background:rgba(12,23,36,.62); box-shadow:0 8px 25px rgba(8,18,30,.13); }
#viewAiTools .ai-output-media:has(> video) .tool-output-details,#viewAiTools .ai-output-media:has(> audio) .tool-output-details { bottom:auto; }
#viewAiTools .tool-output-details > .output-details { display:block; }
@media (prefers-reduced-motion:reduce) { .skills-row,#viewAiTools .ai-tool-card,:is(body.reference-workspace #stage,#viewAssets) .card .card-overlay { transition:none !important; } }