.iam-studio {
  --studio-bg: #070b24;
  --studio-surface: #0c1435;
  --studio-control: #17234e;
  --studio-border: #2c437d;
  --studio-muted: #a9b6de;
  color: #f6f7ff;
  background: radial-gradient(ellipse at 50% 0%, #101c493d, transparent 65%), var(--studio-bg);
  padding: 48px max(16px, 3.125vw) 72px;
  min-height: 75vh;
  font-family: inherit;
  color-scheme: dark;
}
.iam-studio *, .iam-studio *::before, .iam-studio *::after { box-sizing: border-box; }
.iam-studio [hidden] { display: none !important; }
.iam-studio button, .iam-studio select, .iam-studio textarea { font: inherit; }
.iam-studio button { cursor: pointer; color: inherit; }
.iam-studio button:focus-visible, .iam-studio a:focus-visible, .iam-studio select:focus-visible { outline: 2px solid #69c8ff; outline-offset: 4px; }
.iam-studio .studio-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.iam-studio .studio-hero { max-width: 1800px; margin: 0 auto; text-align: center; }
.iam-studio .studio-eyebrow { color: #58aaff; font-size: 12px; letter-spacing: .3em; font-weight: 600; margin: 0 0 12px; }
.iam-studio h1 { font-size: clamp(32px, 3.6vw, 58px); line-height: 1.14; letter-spacing: -.045em; font-weight: 750; margin: 0 0 14px; color: #f8f9ff; }
.iam-studio h1 span { background: linear-gradient(105deg, #159eff, #1263ff 70%, #604eff); background-clip: text; -webkit-text-fill-color: transparent; }
.iam-studio .studio-intro { color: var(--studio-muted); font-size: clamp(16px, 1.35vw, 21px); line-height: 1.5; margin: 0; }
.iam-studio .studio-composer { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) 50px; gap: 0 14px; align-items: center; text-align: left; width: min(100%, 850px); margin: 38px auto 0; padding: 12px 14px; border: 1px solid #416dcc; border-radius: 42px; background: linear-gradient(125deg, #101a3d, #0a112c); box-shadow: 0 0 36px #0855e00b; transition: width 280ms ease, padding 280ms ease, border-radius 280ms ease; }
.iam-studio .studio-composer:focus-within { border-color: #278fff; box-shadow: 0 0 0 2px #168bff12, 0 12px 60px #005aff0b; }
.iam-studio .studio-composer.is-expanded { width: 100%; border-radius: 28px; padding: 15px; grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; }
.iam-studio .studio-expansion { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows 280ms ease, opacity 200ms ease, visibility 280ms; }
.iam-studio .studio-expansion-inner { min-height: 0; overflow: hidden; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.iam-studio .is-expanded .studio-expansion { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
.iam-studio .is-expanded .studio-expansion-inner { overflow: visible; }
.iam-studio .studio-utilities { grid-column: 1 / -1; }
.iam-studio .studio-utilities .studio-expansion-inner { justify-content: space-between; }
.iam-studio .studio-workspace-label { display: flex; align-items: center; gap: 10px; padding: 0 15px; min-height: 42px; font-size: 13px; color: #c7d3fc; background: #16224c; border-radius: 30px; }
.iam-studio .studio-workspace-label i { font-size: 18px; }
.iam-studio .studio-icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #c4ceef; font-size: 20px; }
.iam-studio .studio-icon:hover { background: #233468; color: #fff; }
.iam-studio .studio-add { background: var(--studio-control); font-size: 24px; }
.iam-studio .studio-reference-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.iam-studio .is-expanded .studio-reference-row { grid-column: 1 / -1; padding-top: 14px; padding-bottom: 10px; }
.iam-studio .studio-references { display: none; flex-wrap: wrap; gap: 8px; min-width: 0; }
.iam-studio .is-expanded .studio-references { display: flex; }
.iam-studio .studio-reference { display: flex; align-items: center; gap: 8px; padding: 5px; background: #172450; border: 1px solid #243c73; border-radius: 12px; max-width: 235px; }
.iam-studio .studio-reference img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.iam-studio .studio-reference div { min-width: 0; }
.iam-studio .studio-reference strong { display: block; max-width: 115px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 12px; }
.iam-studio .studio-reference small { color: var(--studio-muted); font-size: 11px; }
.iam-studio .studio-reference .studio-icon { width: 44px; font-size: 13px; }
.iam-studio textarea { display: block; resize: none; width: 100%; min-width: 0; height: 44px; min-height: 44px; max-height: 300px; padding: 10px 0; background: transparent; color: #f3f5ff; border: 0; outline: none; font-size: 17px; line-height: 24px; }
.iam-studio textarea::placeholder { color: #9faedd; opacity: 1; }
.iam-studio .is-expanded textarea { grid-column: 1 / -1; min-height: 90px; margin: 4px 4px 12px; width: calc(100% - 8px); font-size: 19px; }
.iam-studio .studio-settings { grid-column: 1; grid-row: 4; min-width: 0; }
.iam-studio .studio-settings .studio-expansion-inner { gap: 12px; padding-block: 3px; }
.iam-studio .studio-type { position: relative; flex-shrink: 0; }
.iam-studio .studio-type-trigger { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 15px; border: 1px solid transparent; border-radius: 28px; background: linear-gradient(120deg, #1b2c66, #14204b); color: #f5f7ff; font-size: 14px; line-height: 1; white-space: nowrap; }
.iam-studio .studio-type-trigger > .bi-chevron-down { font-size: 10px; transition: transform 180ms ease; }
.iam-studio .studio-type-trigger[aria-expanded="true"] { border-color: #416dd0; background: #1c306b; }
.iam-studio .studio-type-trigger[aria-expanded="true"] > .bi-chevron-down { transform: rotate(180deg); }
.iam-studio .studio-type-trigger:focus-visible { outline: 2px solid #75baff; outline-offset: 3px; }
.iam-studio .studio-popover.studio-type-menu { inset: auto auto calc(100% + 12px) 0; width: 204px; max-width: calc(100vw - 48px); padding: 8px; border: 1px solid #345bc0; border-radius: 18px; background: linear-gradient(135deg, #101d4c, #0e1639); box-shadow: 0 12px 32px #02071b66; }
.iam-studio .studio-type-menu.opens-below { top: calc(100% + 12px); bottom: auto; }
.iam-studio .studio-popover.studio-type-menu button { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 12px 14px; border: 0; border-radius: 11px; background: transparent; font-size: 15px; font-weight: 500; color: #eef2ff; }
.iam-studio .studio-popover.studio-type-menu button + button { margin-top: 4px; }
.iam-studio .studio-popover.studio-type-menu button > .bi:first-child { width: 20px; font-size: 18px; }
.iam-studio .studio-popover.studio-type-menu button[aria-checked="true"] { background: linear-gradient(110deg, #233e91, #192e73); color: #fff; }
.iam-studio .studio-popover.studio-type-menu button:hover { background: #21346c; }
.iam-studio .studio-popover.studio-type-menu button:focus-visible { outline: 1px solid #6599ff; outline-offset: -2px; background: #223975; }
.iam-studio .studio-option-check { margin-left: auto; font-size: 13px; opacity: 0; }
.iam-studio [aria-checked="true"] .studio-option-check { opacity: 1; }
.iam-studio .studio-select { position: relative; display: flex; align-items: center; gap: 9px; min-height: 44px; border-radius: 30px; background: var(--studio-control); padding: 0 14px; font-size: 14px; }
.iam-studio select { appearance: none; background: transparent; color: #f6f7ff; border: 0; width: 100%; min-height: 44px; padding-right: 20px; cursor: pointer; }
.iam-studio .studio-select > .bi-chevron-down { pointer-events: none; position: absolute; right: 14px; font-size: 10px; }
.iam-studio select option { background: #17234e; }
.iam-studio .studio-divider { height: 16px; width: 1px; background: var(--studio-border); margin-inline: 5px; }
.iam-studio .studio-control { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 24px; background: transparent; color: #bccaf3; font-size: 14px; }
.iam-studio .studio-control:hover { background: #18254a; }
.iam-studio .studio-draft-note { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #8494be; margin-left: 8px; }
.iam-studio .studio-generate { display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; min-width: 50px; border: 1px solid #2798ff; border-radius: 30px; background: linear-gradient(135deg, #139bff, #0060ff); color: #fff; font-weight: 600; box-shadow: 0 4px 20px #006bff25; }
.iam-studio .studio-generate:hover { filter: brightness(1.15); }
.iam-studio .studio-generate i { font-size: 25px; }
.iam-studio .studio-generate span { display: none; }
.iam-studio .is-expanded .studio-generate { grid-column: 2; grid-row: 4; }
.iam-studio[data-authenticated="true"] .is-expanded .studio-generate { padding: 0 23px; }
.iam-studio[data-authenticated="true"] .is-expanded .studio-generate span { display: inline; }
.iam-studio .studio-attach-wrap, .iam-studio .studio-model-wrap { position: relative; }
.iam-studio .studio-popover { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: 290px; max-width: calc(100vw - 40px); padding: 12px; border: 1px solid #365992; border-radius: 16px; background: #121d41; box-shadow: 0 16px 45px #0008; font-size: 14px; }
.iam-studio .studio-popover button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; min-height: 44px; border: 0; border-radius: 9px; background: #1d3060; text-align: left; }
.iam-studio .studio-popover p { color: var(--studio-muted); font-size: 12px; line-height: 1.6; margin: 12px 0 3px; }
.iam-studio .studio-popover a { display: block; color: #6db6ff; font-size: 12px; margin-top: 12px; }
.iam-studio .studio-start { color: #899ac6; font-size: 12px; margin: 12px 0 0; }
.iam-studio .studio-hero:has(.is-expanded) .studio-start { display: none; }
.iam-studio .studio-status { color: #b6c5e9; font-size: 13px; margin: 12px 0 0; line-height: 1.6; }
.iam-studio .studio-status:empty { display: none; }

.iam-studio h2 { font-size: clamp(20px, 1.9vw, 29px); letter-spacing: -.025em; color: #f7f8ff; font-weight: 650; margin: 0 0 4px; }

.iam-studio .studio-more { border: 1px solid var(--studio-border); background: #0c1530; border-radius: 30px; min-height: 44px; padding: 8px 23px; font-size: 13px; color: #bfcef4; }

.iam-studio .studio-more { display: block; margin: 30px auto 0; padding-inline: 28px; }
.iam-studio .studio-more i { margin-left: 12px; }

@media (max-width: 991px) {
  .iam-studio { padding-top: 30px; }

  .iam-studio .studio-draft-note { display: none; }
}
@media (max-width: 599px) {
  .iam-studio { padding: 26px 16px 45px; }
  .iam-studio .studio-eyebrow { font-size: 10px; letter-spacing: .23em; }
  .iam-studio h1 { font-size: 34px; }
  .iam-studio .studio-intro { font-size: 15px; margin-top: 14px; }
  .iam-studio .studio-composer { margin-top: 25px; gap: 0 8px; grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 8px; }
  .iam-studio textarea { font-size: 16px; }
  .iam-studio .studio-generate { min-width: 44px; height: 44px; }
  .iam-studio .studio-composer.is-expanded { padding: 10px; border-radius: 22px; gap: 0; }
  .iam-studio .is-expanded textarea { font-size: 16px; min-height: 112px; }
  .iam-studio .studio-settings { grid-column: 1 / -1; }
  .iam-studio .studio-settings .studio-expansion-inner { gap: 6px; }
  .iam-studio .studio-type-trigger { font-size: 13px; padding-inline: 12px; }
  .iam-studio .studio-popover.studio-type-menu { position: absolute; inset: auto auto calc(100% + 10px) 0; max-height: min(280px, 65dvh); }
  .iam-studio .studio-type-menu.opens-below { top: calc(100% + 10px); bottom: auto; }
  .iam-studio .studio-control { font-size: 12px; padding: 0 9px; }
  .iam-studio .studio-select { font-size: 13px; padding-inline: 12px; }
  .iam-studio .studio-divider { display: none; }
  .iam-studio .is-expanded .studio-generate { grid-column: 1 / -1; grid-row: 5; margin-top: 10px; width: 100%; height: 48px; border-radius: 16px; }
  .iam-studio .is-expanded .studio-generate span { display: inline; }
  .iam-studio .studio-popover { position: fixed; inset: auto 12px max(12px, env(safe-area-inset-bottom)); width: auto; max-width: none; max-height: 55dvh; overflow-y: auto; padding: 20px; border-radius: 22px; box-shadow: 0 0 0 100vmax #02071999; }
  .iam-studio .studio-reference-row { align-items: flex-start; }
  .iam-studio .studio-reference { max-width: 100%; }
  .iam-studio .studio-reference strong { max-width: 85px; }

}
@media (max-width: 339px) { .iam-studio h1 { font-size: 30px; } }
.iam-studio .studio-output-wrap { position: relative; }
.iam-studio .studio-popover.studio-output-menu { position: fixed; inset: auto; width: 320px; max-width: calc(100vw - 24px); padding: 0; overflow-y: auto; border: 1px solid #345bc0; border-radius: 17px; background: linear-gradient(130deg, #101c48, #0d163b); box-shadow: 0 16px 40px #02061980; }
.iam-studio .studio-output-section { padding: 18px 17px 14px; }
.iam-studio .studio-output-section + .studio-output-section { border-top: 1px solid #263d76; }
.iam-studio .studio-output-section h3 { margin: 0 0 14px; color: #f6f7ff; font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
.iam-studio .studio-ratio-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.iam-studio .studio-output-menu button[data-output-option] { display: flex; justify-content: center; align-items: center; width: auto; min-width: 0; min-height: 44px; padding: 8px; border-radius: 10px; background: transparent; color: #b9c8f2; font-size: 13px; }
.iam-studio .studio-output-menu button[data-output-option="ratio"] { flex-direction: column; gap: 8px; height: 64px; }
.iam-studio .studio-ratio-shape { display: block; width: min(23px, calc(24px * var(--ratio))); aspect-ratio: var(--ratio); flex-shrink: 0; border: 1.5px solid currentColor; border-radius: 2px; }
.iam-studio .studio-output-menu button[aria-pressed="true"] { background: linear-gradient(120deg, #2147a9, #17368c); color: white; }
.iam-studio .studio-output-menu button[data-output-option]:hover { background: #223b7d; color: white; }
.iam-studio .studio-output-options { display: flex; gap: 5px; flex-wrap: wrap; }
.iam-studio .studio-output-options button { flex: 0 0 42px; }
.iam-studio .studio-count-options { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.iam-studio .studio-output-menu .studio-output-more { display: inline-flex; gap: 8px; width: auto; min-height: 36px; padding: 10px 0 0; color: #abbff5; font-size: 12px; background: transparent; }
.iam-studio .studio-output-more i { font-size: 10px; }
.iam-studio .studio-output-more[aria-expanded="true"] i { transform: rotate(180deg); }
.iam-studio .studio-output-menu .studio-output-note { margin: 0; padding: 10px 17px 13px; border-top: 1px solid #263d76; color: #8f9fc9; font-size: 10px; line-height: 1.5; }
@media (max-width: 599px) {
  .iam-studio .studio-popover.studio-output-menu { inset: auto 12px max(12px, env(safe-area-inset-bottom)) !important; width: auto; max-width: none; max-height: 70dvh !important; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) { .iam-studio *, .iam-studio *::before, .iam-studio *::after { transition: none !important; scroll-behavior: auto !important; } }
.iam-studio #attachment-menu { width: 210px; padding: 7px; }
.iam-studio #attachment-menu > button { background: transparent; font-size: 13px; gap: 12px; }
.iam-studio #attachment-menu > button:hover { background: #203363; }
.iam-studio .studio-upload-counter { border-top: 1px solid #304476; margin-top: 5px; padding: 12px 9px 5px; color: #b2bfe5; font-size: 11px; }
.iam-studio .studio-upload-counter small { display: block; font-size: 9px; margin-top: 4px; color: #8798c6; }
.iam-studio .studio-library { width: min(1440px,94vw); max-width: none; height: min(880px,90dvh); max-height: 90dvh; padding: 0; border: 1px solid #344d91; border-radius: 26px; background: linear-gradient(120deg,#101735,#09112e); color: #f6f7ff; overflow: hidden; box-shadow: 0 30px 100px #0007; }
.iam-studio .studio-library[open] { display: flex; flex-direction: column; }
.iam-studio .studio-library::backdrop { background: #03071bba; backdrop-filter: blur(7px); }
.iam-studio .library-header { display:flex; justify-content:space-between; align-items:center; padding:24px 30px 12px; }
.iam-studio .library-header h2 { display:flex; gap:18px; align-items:center; font-size:30px; margin:0; }
.iam-studio .library-header h2 i { color:#778fff; font-size:34px; }
.iam-studio .library-header .studio-icon { background:#1b2854; border:1px solid #40558d; }
.iam-studio .library-tabs { display:flex; gap:24px; padding:0 28px; border-bottom:1px solid #28365d; overflow-x:auto; flex-shrink:0; }
.iam-studio .library-tabs button { position:relative; flex-shrink:0; border:0; background:transparent; padding:18px 10px; color:#a7b4e8; font-size:15px; }
.iam-studio .library-tabs button[aria-selected="true"] { color:white; }
.iam-studio .library-tabs button[aria-selected="true"]::after { content:''; position:absolute; inset:auto 0 0; height:3px; background:#168bff; border-radius:4px; }
.iam-studio .library-body { flex:1; min-height:0; overflow:auto; padding:20px 30px; }
.iam-studio .library-toolbar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.iam-studio .library-search { flex:1; min-width:220px; display:flex; align-items:center; gap:12px; border:1px solid #34467b; border-radius:10px; padding:0 14px; background:#111a38; }
.iam-studio .library-search input { min-width:0; width:100%; height:46px; background:transparent; color:white; border:0; outline:none; font-size:16px; }
.iam-studio .library-search:focus-within { outline:2px solid #168bff; }
.iam-studio .library-search input::placeholder { color:#8496c7; }
.iam-studio .library-toolbar select { width:auto; min-height:46px; border:1px solid #34467b; border-radius:10px; background:#111a38; padding:0 14px; appearance:auto; font-size:14px; }
.iam-studio .library-upload { min-height:46px; border:1px solid #168bff; border-radius:10px; padding:0 20px; background:#102044; color:white; }
.iam-studio .library-upload i { margin-right:10px; }
.iam-studio .library-notice { color:#8e9ec9; font-size:12px; margin:12px 0 18px; }
.iam-studio .library-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px 14px; }
.iam-studio .library-card { padding:0; min-width:0; background:transparent; border:0; text-align:left; }
.iam-studio .library-thumbnail { display:block; position:relative; aspect-ratio:1; overflow:hidden; background:#172344; border:2px solid #34467b; border-radius:10px; }
.iam-studio .library-thumbnail img { width:100%; height:100%; object-fit:cover; }
.iam-studio .library-card[aria-pressed="true"] .library-thumbnail { border:3px solid #168bff; }
.iam-studio .library-check { position:absolute; right:9px; top:9px; display:grid; place-items:center; width:25px; height:25px; border:2px solid #aab9e6; background:#131a3580; border-radius:50%; color:transparent; }
.iam-studio .library-card[aria-pressed="true"] .library-check { background:#168bff; border-color:#168bff; color:white; }
.iam-studio .library-card strong { display:block; font-size:13px; font-weight:500; margin:8px 2px 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.iam-studio .library-card small { color:#94a5dd; font-size:12px; }
.iam-studio .library-card:disabled { opacity:.65; cursor:default; }
.iam-studio .image-unavailable::before { content:'Preview unavailable'; position:absolute; inset:40% 8px auto; text-align:center; color:#a9b6de; font-size:12px; }
.iam-studio .library-empty { display:grid; place-content:center; text-align:center; min-height:300px; color:#9daddd; }
.iam-studio .library-empty > i { font-size:44px; color:#6388e6; margin-bottom:18px; }
.iam-studio .library-empty h3 { font-size:22px; color:white; }
.iam-studio .library-empty p { font-size:14px; max-width:420px; }
.iam-studio .library-message { color:#a8b9e5; font-size:13px; margin-top:12px; }
.iam-studio .library-footer { flex-shrink:0; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 30px; border-top:1px solid #34467b; background:#0d1532; }
.iam-studio .library-footer > div { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.iam-studio .library-footer strong { font-size:14px; }
.iam-studio [data-library-attached] { font-size:11px; color:#8b9ac5; }
.iam-studio [data-library-clear] { border:0; background:transparent; color:#9fb2f2; min-height:44px; font-size:13px; }
.iam-studio .library-add { min-height:46px; min-width:160px; border:0; border-radius:12px; background:#078cff; color:white; padding:10px 22px; }
.iam-studio .library-add:disabled,.iam-studio [data-library-clear]:disabled { opacity:.45; cursor:default; }
@media(max-width:1100px) { .iam-studio .library-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .iam-studio .library-tabs { gap:10px; } }
@media(max-width:767px) { .iam-studio .library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .iam-studio .library-search { flex-basis:100%; } }
@media(max-width:599px) { .iam-studio .studio-library { width:calc(100vw - 16px); height:94dvh; max-height:94dvh; border-radius:20px; } .iam-studio .library-header { padding:16px; } .iam-studio .library-header h2 { font-size:23px; gap:10px; } .iam-studio .library-tabs { padding:0 12px; } .iam-studio .library-tabs button { font-size:13px; } .iam-studio .library-body { padding:16px; } .iam-studio .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px; } .iam-studio .library-toolbar select { flex:1; min-width:0; font-size:13px; } .iam-studio .library-upload { width:100%; } .iam-studio .library-footer { padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)); align-items:center; } .iam-studio .library-footer > div { gap:0 8px; } .iam-studio .library-add { min-width:135px; padding:10px 12px; font-size:13px; } .iam-studio .library-empty { min-height:180px; } }
.iam-studio .studio-utility-actions { display:flex; align-items:center; gap:14px; }
.iam-studio .studio-apps-trigger { display:flex; align-items:center; gap:9px; min-height:44px; padding:0 22px; border:0; border-radius:28px; background:linear-gradient(120deg,#192856,#13204a); color:#fff; font-size:14px; }
.iam-studio .studio-apps-trigger:hover { background:#223b7b; }
.iam-studio .studio-apps { width:min(1440px,94vw); max-width:none; height:min(960px,90dvh); max-height:90dvh; border:1px solid #465bc4; border-radius:24px; padding:0; overflow:hidden; background:linear-gradient(120deg,#0d1637,#090e26); color:#f7f8ff; box-shadow:0 24px 90px #0008; }
.iam-studio .studio-apps[open] { display:flex; flex-direction:column; animation:studio-apps-in 200ms ease-out; }
.iam-studio .studio-apps::backdrop { background:#020619b8; backdrop-filter:blur(7px); }
.iam-studio .apps-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 32px 18px; }
.iam-studio .apps-heading { display:flex; gap:22px; align-items:center; }
.iam-studio .apps-heading > i { color:#126fff; font-size:38px; }
.iam-studio .apps-heading h2 { font-size:30px; margin:0 0 3px; }
.iam-studio .apps-heading p { margin:0; color:#a7b6ec; font-size:15px; }
.iam-studio .apps-header .studio-icon { border:1px solid #34467b; background:#101b3e; }
.iam-studio .apps-controls { display:flex; gap:14px; padding:0 32px 12px; }
.iam-studio .apps-search { flex:1; min-width:0; display:flex; align-items:center; gap:13px; border:1px solid #405895; border-radius:17px; background:#141d3a; padding:0 16px; color:#a6b7ec; }
.iam-studio .apps-search:focus-within { border-color:#168bff; box-shadow:0 0 0 2px #168bff20; }
.iam-studio .apps-search input { width:100%; min-width:0; height:46px; font-size:16px; color:#fff; background:transparent; border:0; outline:0; }
.iam-studio .apps-search input::placeholder { color:#879cd7; }
.iam-studio .apps-controls select { width:190px; min-height:46px; padding:0 15px; border:1px solid #405895; border-radius:15px; background:#131f46; color:white; appearance:auto; font-size:14px; }
.iam-studio .apps-categories { flex-shrink:0; display:flex; align-items:center; gap:22px; margin:0 32px; padding:0 0 10px; border-bottom:1px solid #2a3c73; overflow-x:auto; }
.iam-studio .apps-categories button { flex-shrink:0; min-height:44px; padding:8px 22px; border:0; border-radius:24px; background:transparent; font-size:13px; color:#bccaf4; }
.iam-studio .apps-categories button[aria-pressed="true"] { background:#076aff; color:#fff; box-shadow:0 4px 14px #0065ff30; }
.iam-studio .apps-results { flex:1; min-height:0; overflow-y:auto; padding:14px 32px 28px; scrollbar-color:#435696 transparent; }
.iam-studio .apps-note { color:#8e9dc7; font-size:11px; margin:0 0 18px; }
.iam-studio .apps-section { margin-bottom:28px; }
.iam-studio .apps-section > header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:12px; }
.iam-studio .apps-section h3 { font-size:22px; font-weight:600; margin:0; color:#f4f6ff; }
.iam-studio .apps-section header button { min-height:44px; border:0; background:transparent; color:#bdcdff; font-size:13px; }
.iam-studio .apps-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
.iam-studio .apps-card { min-width:0; padding:0; text-align:left; border:0; background:transparent; }
.iam-studio .apps-thumbnail { display:block; position:relative; aspect-ratio:4/3; border:1px solid #34467b; border-radius:9px; overflow:hidden; background:#152142; }
.iam-studio .apps-thumbnail img { width:100%; height:100%; object-fit:cover; object-position:center 35%; transition:transform 200ms ease; }
.iam-studio .apps-card:hover img { transform:scale(1.04); }
.iam-studio .apps-card:hover .apps-thumbnail { border-color:#168bff; }
.iam-studio .apps-card strong { display:block; font-size:13px; line-height:1.4; margin:7px 2px 0; font-weight:500; color:#f3f6ff; }
.iam-studio .apps-badge { position:absolute; top:7px; left:7px; border:1px solid #ffffff20; border-radius:5px; padding:3px 6px; background:#071a41ba; color:#cbdcff; font-size:9px; }
.iam-studio .apps-image-missing::before { content:'Preview unavailable'; position:absolute; top:40%; width:100%; text-align:center; color:#adbce6; font-size:12px; }
.iam-studio .apps-empty { text-align:center; padding:65px 12px; color:#a9b6de; }
.iam-studio .apps-empty > i { font-size:32px; }
.iam-studio .apps-empty h3 { margin:15px 0 8px; color:#fff; }
.iam-studio .apps-empty button { background:#086fff; border:0; border-radius:22px; padding:10px 22px; min-height:44px; }
.iam-studio .apps-status { color:#879acb; font-size:11px; margin:8px 0 0; }
@keyframes studio-apps-in { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }
@media(max-width:1199px) { .iam-studio .apps-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:899px) { .iam-studio .apps-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .iam-studio .apps-categories { gap:8px; } }
@media(max-width:599px) { .iam-studio .studio-utility-actions { gap:5px; } .iam-studio .studio-apps-trigger { padding:0 13px; font-size:13px; } .iam-studio .studio-workspace-label { max-width:160px; font-size:11px; padding-inline:10px; } .iam-studio .studio-apps { width:calc(100vw - 16px); height:94dvh; max-height:94dvh; border-radius:18px; } .iam-studio .apps-header { padding:18px 16px 16px; gap:10px; } .iam-studio .apps-heading { gap:11px; } .iam-studio .apps-heading > i { font-size:28px; } .iam-studio .apps-heading h2 { font-size:23px; } .iam-studio .apps-heading p { font-size:12px; } .iam-studio .apps-controls { padding:0 16px 12px; flex-wrap:wrap; } .iam-studio .apps-search { flex-basis:100%; } .iam-studio .apps-controls select { width:100%; } .iam-studio .apps-categories { margin:0 16px; } .iam-studio .apps-categories button { padding:8px 16px; font-size:12px; } .iam-studio .apps-results { padding:14px 16px max(16px,env(safe-area-inset-bottom)); } .iam-studio .apps-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px; } .iam-studio .apps-section h3 { font-size:19px; } }
@media(max-width:339px) { .iam-studio .apps-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .iam-studio .studio-apps[open] { animation:none; } }

/* Provider-backed controls use only options supported by the selected model. */
.iam-studio .iamai-api-controls:empty{display:none}
.iamai-api-controls{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;padding:16px 120px 8px 0;text-align:left;color:#bac8ff}
.iamai-api-controls>label,.api-settings-panel label{display:grid;gap:6px;font-size:12px;min-width:130px}
.iamai-api-controls select,.iamai-api-controls input{color:#e9edff;background:#121d48;border:1px solid #344b86;border-radius:12px;padding:9px;max-width:100%;font:inherit}
.api-settings{position:relative;font-size:14px}.api-settings summary{cursor:pointer;padding:10px 14px;border-radius:20px;background:#142455;color:#fff}
.api-settings-panel{position:absolute;bottom:calc(100% + 12px);left:0;width:280px;max-height:420px;overflow:auto;z-index:40;display:grid;gap:18px;padding:20px;background:#0e183e;border:1px solid #416acc;border-radius:18px;box-shadow:0 16px 60px #0008}
.api-availability{flex-basis:100%;font-size:13px;margin:0}.api-upload-help{flex-basis:100%}
.iamai-history{text-align:left;margin:28px 0}.iamai-history h2{font-size:24px}.iamai-history h3{font-size:17px}
[data-api-results]{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.api-result{padding:20px;border:1px solid #293f75;background:#0b1436;border-radius:18px;min-width:0}
.api-result img,.api-result video{width:100%;max-height:380px;object-fit:contain;border-radius:10px}.api-result audio{max-width:100%}.api-result pre{white-space:pre-wrap;max-height:400px;overflow:auto;color:#e5eaff;font:inherit}.api-result button,.api-download{display:inline-block;border:1px solid #345188;border-radius:10px;padding:8px 12px;background:#142553;color:#fff;margin:8px 8px 0 0}.api-result small{display:block;color:#bcc7ef}
@media(max-width:599px){.iamai-api-controls{padding:12px 0;gap:10px}.iamai-api-controls>label{min-width:0;flex:1}.api-settings-panel{position:fixed;left:12px;right:12px;bottom:90px;width:auto;max-height:60vh}.iamai-api-controls select{width:100%}}

.api-choice-row{display:flex;gap:6px;flex-wrap:wrap}.api-choice-row button{border:0;border-radius:10px;color:#c8d4ff;background:transparent;min-width:36px;min-height:38px;padding:8px;display:grid;justify-items:center;gap:8px;font:inherit}.api-choice-row button[aria-pressed=true]{background:#19419a;color:white}.api-ratio-shape{display:block;height:18px;max-width:32px;border:1px solid currentColor;border-radius:2px}

.library-detail{border:0;background:transparent;color:#9fbbff;padding:8px 0;font:inherit;font-size:12px}.library-media-icon{font-size:28px;display:grid;place-items:center;height:100%}.api-media-dialog{color:#e9edff;background:#0c1537;border:1px solid #4168aa;border-radius:20px;width:min(750px,94vw);max-height:90vh;padding:24px}.api-media-dialog::backdrop{background:#000a;backdrop-filter:blur(8px)}.api-media-dialog img,.api-media-dialog video{display:block;max-width:100%;max-height:50vh;margin:20px auto}.api-media-dialog pre{white-space:pre-wrap;color:inherit}.api-media-dialog button,.api-media-dialog a{margin:8px;padding:8px 14px;border:1px solid #3b5890;border-radius:10px;background:#152553;color:#fff}

@media(max-width:599px){.iamai-api-controls>label{flex:1 1 calc(50% - 10px)}.iamai-api-controls>.api-settings{margin-top:2px}}

/* Keep the original composer row and popovers for provider-backed options. */
.iam-studio #model-menu{top:auto;bottom:calc(100% + 12px);padding:8px;max-height:300px;overflow-y:auto}
.iam-studio #model-menu .studio-model-option{justify-content:space-between;background:transparent;gap:16px}
.iam-studio #model-menu .studio-model-option[aria-checked=true],.iam-studio #model-menu .studio-model-option:hover{background:#203b81}
.iam-studio .studio-model-option strong{display:block;font-size:13px;overflow-wrap:anywhere;font-weight:500}
.iam-studio .studio-model-option small{display:block;color:#9daed8;font-size:11px;margin-top:4px}
.iam-studio #output-menu select,.iam-studio #output-menu input:not([type=hidden]){display:block;width:100%;padding:9px 10px;border:1px solid #344b86;border-radius:10px;background:#142149;color:#edf2ff;font:inherit}
.iam-studio #output-menu label{display:grid;gap:6px;margin-bottom:10px;color:#b9c8f2;font-size:12px}
.iam-studio #output-menu audio{max-width:100%;margin-top:10px}
@media(max-width:599px){.iam-studio #model-menu{position:fixed;top:auto;bottom:16px;left:12px;right:12px;width:auto;max-height:65dvh}.iam-studio .studio-settings .studio-expansion-inner{row-gap:10px}}

.iam-studio .studio-output-options button[data-output-option="quality"]{flex:0 0 auto;min-width:44px;padding-inline:12px}

/* A viewport-sized workspace, shared by the grid and prompt/result timeline. */
.iam-studio { padding-inline: var(--studio-nav-inset, 14px); }
.iam-studio.has-history { padding-top: 12px; }
.iam-studio.has-history .studio-hero > .studio-eyebrow,
.iam-studio.has-history .studio-hero > h1,
.iam-studio.has-history .studio-hero > .studio-intro,
.iam-studio.has-history .studio-start { display: none; }
.iam-studio.has-history .studio-composer { margin-top: 12px; max-width: var(--studio-nav-width, 1600px); }
.iam-studio.has-history .studio-status { margin: 8px 0 0; }
.iam-studio .iamai-history { display: flex; flex-direction: column; width: 100%; max-width: var(--studio-nav-width, 1600px); min-height: 160px; height: calc(100dvh - var(--studio-nav-height, 90px) - var(--studio-composer-height, 90px) - var(--studio-status-height, 20px) - 44px); margin: 0 auto; border: 1px solid #273963; border-radius: 24px; background: linear-gradient(150deg,#101b38aa,#090f27); overflow: hidden; scroll-margin-top: calc(var(--studio-nav-height,90px) + 12px); }
.iam-studio .iamai-history-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 20px 24px; border-bottom: 1px solid #283655; }
.iam-studio .iamai-history-header .studio-eyebrow { font-size: 10px; letter-spacing: .18em; margin-bottom: 5px; }
.iam-studio .iamai-history-header h2 { font-size: 22px; margin: 0; color: #f5f7ff; }
.iam-studio .iamai-history-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.iam-studio [data-api-balance] { font-size: 12px; color: #9eafd7; }
.iam-studio .studio-view-switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #2a3d68; border-radius: 24px; background: #0a122b; }
.iam-studio .studio-view-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 7px 14px; border: 0; border-radius: 20px; background: transparent; color: #a7b8dc; font-size: 12px; white-space: nowrap; }
.iam-studio .studio-view-switch button[aria-pressed="true"] { background: #1b3974; color: #fff; box-shadow: inset 0 0 0 1px #3b5b95; }
.iam-studio .studio-view-switch button:hover { color: #fff; background: #20385d; }
.iam-studio .iamai-history-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px; scrollbar-color: #344a77 transparent; scrollbar-width: thin; }
.iam-studio [data-api-results] { grid-template-columns: repeat(auto-fill,minmax(min(100%,280px),1fr)); align-items: start; gap: 20px; }
.iam-studio .api-turn { min-width: 0; overflow-wrap: anywhere; }
.iam-studio .api-user-prompt { margin-bottom: 12px; color: #e0e7fa; }
.iam-studio .api-user-prompt small { display: block; margin-bottom: 5px; color: #8fa6d0; font-size: 11px; font-weight: 600; }
.iam-studio .api-user-prompt p { margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.6; }
.iam-studio [data-view="grid"] .api-user-prompt p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.iam-studio .api-result { box-shadow: 0 8px 24px #0002; }
.iam-studio .api-result h3 { line-height: 1.4; }
.iam-studio .api-result > p { font-size: 12px; color: #b4c8ef; margin: 12px 0; }
.iam-studio .api-result > small { font-size: 11px; }
.iam-studio [data-view="chat"] [data-api-results] { display: flex; flex-direction: column; width: 100%; max-width: 100%; margin: 0 auto; gap: 32px; }
.iam-studio [data-view="chat"] .api-turn { width: 100%; }
.iam-studio [data-view="chat"] .api-user-prompt { width: fit-content; max-width: 85%; margin-left: auto; padding: 14px 20px; border: 1px solid #354778; border-radius: 22px 22px 6px 22px; background: #19294e; }
.iam-studio [data-view="chat"] .api-result { max-width: 90%; border-radius: 6px 22px 22px; background: #0d1731; }
.iam-studio .api-loading { display: grid; align-content: center; gap: 12px; min-height: 160px; margin-top: 16px; padding: 22px; border: 1px solid #2b4167; border-radius: 14px; background: #111d38; }
.iam-studio .api-loading-label { margin-bottom: 6px; color: #abc8ff; font-size: 12px; }
.iam-studio .api-shimmer { display: block; height: 12px; border-radius: 8px; background: linear-gradient(100deg,#20304e 15%,#3d5680 45%,#20304e 75%); background-size: 250% 100%; animation: studio-shimmer 1.8s ease-in-out infinite; }
.iam-studio .api-shimmer:last-child { width: 60%; }
.iam-studio .api-shimmer:nth-last-child(2) { width: 85%; }
.iam-studio .studio-generate:disabled { opacity: .65; cursor: wait; }
.iam-studio .iamai-history-scroll:has(.iamai-empty:not([hidden])) { display: grid; place-items: center; }
.iam-studio [data-api-results]:empty { display: none; }
.iam-studio .iamai-empty { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 8px; color: #9eafd1; }
.iam-studio .iamai-empty > i { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 20px; border: 1px solid #304571; border-radius: 20px; font-size: 26px; color: #68a8ff; background: #142449; }
.iam-studio .iamai-empty h3 { color: #e1eaff; margin: 0 0 8px; }
.iam-studio .iamai-empty p { font-size: 13px; margin: 0; }
@keyframes studio-shimmer { from { background-position: 150% 0; } to { background-position: -150% 0; } }
@media(max-width:599px) {
  .iam-studio .iamai-history { border-radius: 18px; }
  .iam-studio .iamai-history-header { padding: 14px; gap: 10px; }
  .iam-studio .iamai-history-header h2 { font-size: 18px; }
  .iam-studio .iamai-history-tools { gap: 8px; }
  .iam-studio .iamai-history-scroll { padding: 14px; }
  .iam-studio .studio-view-switch button { padding: 6px 10px; font-size: 11px; }
  .iam-studio .studio-utilities .studio-expansion-inner { gap: 8px; }
  .iam-studio [data-view="chat"] .api-result { max-width: 100%; }
  .iam-studio [data-view="chat"] .api-user-prompt { max-width: 92%; }
  .iam-studio .api-result { padding: 15px; }
}
@media(prefers-reduced-motion:reduce) { .iam-studio .api-shimmer { animation: none; } }

/* Media-first gallery tiles and a conversational result timeline. */
.iam-studio .api-date-heading { grid-column: 1 / -1; margin: 10px 0 0; color: #e5edff; font-size: 20px; font-weight: 600; }
.iam-studio .api-media-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.iam-studio .api-media-tile { position: relative; min-width: 0; }
.iam-studio .api-media-surface { position: relative; overflow: hidden; border: 1px solid #304873; border-radius: 13px; background: #0d1d38; }
.iam-studio .api-media-surface img,.iam-studio .api-media-surface video { display: block; width: 100%; height: 100%; max-height: none; border-radius: 0; object-fit: cover; }
.iam-studio .api-media-surface audio { display: block; width: calc(100% - 24px); margin: 70px 12px 20px; }
.iam-studio .api-media-surface pre { padding: 52px 18px 18px; margin: 0; min-height: 190px; font-size: 14px; line-height: 1.7; }
.iam-studio .api-media-badge { position: absolute; top: 10px; left: 10px; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #829dcc42; border-radius: 10px; background: #081631c4; backdrop-filter: blur(12px); color: #e9f1ff; font-size: 18px; pointer-events: none; }
.iam-studio .api-media-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 10px; }
.iam-studio .api-media-actions > button,.iam-studio .api-media-actions > a,.iam-studio .api-result-menu > summary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; margin: 0; padding: 8px 11px; border: 1px solid #355385; border-radius: 9px; background: #102346; color: #ecf3ff; font-size: 12px; line-height: 1.2; text-decoration: none; cursor: pointer; }
.iam-studio .api-media-actions > button:hover,.iam-studio .api-media-actions > a:hover,.iam-studio .api-result-menu > summary:hover { background: #21467b; border-color: #6a9adb; }
.iam-studio .api-media-actions i { font-size: 16px; }
.iam-studio .api-result-menu { position: relative; }
.iam-studio .api-result-menu > summary { list-style: none; }
.iam-studio .api-result-menu > summary::-webkit-details-marker { display: none; }
.iam-studio .api-result-menu > button { position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 5; min-width: 132px; margin: 0; background: #142649; box-shadow: 0 8px 24px #0007; color: #ffb8c2; font-size: 12px; }
.iam-studio .api-result-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.iam-studio .api-result-meta > span + span::before { content: '·'; margin-right: 9px; color: #658abf; }
.iam-studio .api-status-label::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #3f9eff; }
.iam-studio [data-job-status="completed"] .api-status-label::before { background: #48ca84; }
.iam-studio [data-job-status="failed"] .api-status-label::before { background: #ef7d8c; }
.iam-studio .api-assistant { display: flex; align-items: center; gap: 9px; color: #accaff; font-size: 13px; }
.iam-studio .api-assistant time { font-size: 10px; font-weight: 400; color: #829fce; }
.iam-studio .api-prompt-time { display: block; color: #829fce; font-size: 10px; }
.iam-studio .api-loading-dots { display: none; }

.iam-studio [data-view="grid"] [data-api-results] { grid-template-columns: repeat(auto-fill,calc(15% - 5.4px)); gap: 12px; }
.iam-studio [data-view="grid"] .api-turn[data-has-media="true"],
.iam-studio [data-view="grid"] .api-turn[data-has-media="true"] > .api-result,
.iam-studio [data-view="grid"] .api-media-grid { display: contents; }
.iam-studio [data-view="grid"] .api-user-prompt,
.iam-studio [data-view="grid"] .api-assistant,
.iam-studio [data-view="grid"] .api-response-message,
.iam-studio [data-view="grid"] [data-has-media="true"] .api-result-title,
.iam-studio [data-view="grid"] [data-has-media="true"] .api-result-meta { display: none; }
.iam-studio [data-view="grid"] .api-media-surface { aspect-ratio: 1.07; transition: border-color 180ms ease,box-shadow 180ms ease; }
.iam-studio [data-view="grid"] .api-media-tile:hover .api-media-surface { border-color: #5891d8; box-shadow: 0 5px 22px #0004; }
.iam-studio [data-view="grid"] .api-media-actions { position: absolute; right: 10px; top: 10px; margin: 0; }
.iam-studio [data-view="grid"] .api-media-actions > a,.iam-studio [data-view="grid"] .api-media-actions > button,.iam-studio [data-view="grid"] .api-result-menu > summary { width: 38px; height: 38px; padding: 0; background: #081631c4; backdrop-filter: blur(12px); border-color: #829dcc42; }
.iam-studio [data-view="grid"] .api-media-actions > a span,.iam-studio [data-view="grid"] .api-media-actions > button span { display: none; }
.iam-studio [data-view="grid"] .api-result-menu { position: absolute; right: 0; top: 48px; }
.iam-studio [data-view="grid"] .api-result-menu > button { top: 0; bottom: auto; right: 44px; }
.iam-studio [data-view="grid"] .api-result-menu:not([open]) { opacity: 0; }
.iam-studio [data-view="grid"] .api-media-tile:hover .api-result-menu,.iam-studio [data-view="grid"] .api-media-tile:focus-within .api-result-menu { opacity: 1; }
.iam-studio [data-view="grid"] .api-turn:not([data-has-media="true"]) .api-result { min-height: 250px; height: 100%; background: #0c1b36; }

.iam-studio [data-view="chat"] [data-api-results] { max-width: 100%; gap: 36px; }
.iam-studio [data-view="chat"] .api-user-prompt { position: relative; max-width: 78%; margin: 0 44px 32px auto; padding: 0; border: 0; background: none; }
.iam-studio [data-view="chat"] .api-user-prompt > small { position: absolute; right: -44px; top: 4px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #456793; border-radius: 50%; color: #dceaff; background: #1c3655; font-size: 10px; }
.iam-studio [data-view="chat"] .api-user-prompt > p { padding: 13px 17px; background: linear-gradient(130deg,#007aff,#0051c9); border: 1px solid #3b9aff; border-radius: 15px 15px 5px 15px; color: #fff; line-height: 1.5; }
.iam-studio [data-view="chat"] .api-prompt-time { text-align: right; margin-top: 8px; }
.iam-studio [data-view="chat"] .api-result { position: relative; display: flex; flex-direction: column; max-width: none; margin-left: 48px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.iam-studio [data-view="chat"] .api-assistant { margin: 0 0 10px; }
.iam-studio [data-view="chat"] .api-assistant > i { position: absolute; top: 0; left: -48px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #134994; border-radius: 50%; color: #58b9ff; font-size: 21px; background: radial-gradient(circle at 35% 25%,#103e8b,#001c58); }
.iam-studio [data-view="chat"] .api-result-title { display: none; }
.iam-studio [data-view="chat"] .api-result > .api-response-message { align-self: flex-start; margin: 0 0 12px; padding: 12px 16px; border: 1px solid #29466f; border-radius: 5px 14px 14px; background: #102342; color: #e9f1ff; font-size: 13px; }
.iam-studio [data-view="chat"] .api-result-meta { order: 3; margin: 12px 0 0; color: #97b9ec; font-size: 11px; }
.iam-studio [data-view="chat"] .api-media-surface:has(img),.iam-studio [data-view="chat"] .api-media-surface:has(video) { aspect-ratio: 1.42; }
.iam-studio [data-view="chat"] .api-media-badge { display: none; }
.iam-studio [data-view="chat"] .api-media-grid:has(> :only-child) { grid-template-columns: minmax(0,1fr); max-width: 650px; }
.iam-studio [data-view="chat"] .api-loading { display: flex; align-items: center; align-self: flex-start; gap: 16px; min-height: 52px; margin: 0; padding: 15px 18px; background: #0e2140; border-color: #203960; }
.iam-studio [data-view="chat"] .api-loading-label { margin: 0; font-size: 12px; }
.iam-studio [data-view="chat"] .api-loading > .api-shimmer { display: none; }
.iam-studio [data-view="chat"] .api-loading-dots { display: flex; gap: 6px; }
.iam-studio .api-loading-dots span { width: 7px; height: 7px; border-radius: 50%; background: #00a3ff; box-shadow: 0 0 9px #008cff77; animation: studio-dot 1.3s ease-in-out infinite; }
.iam-studio .api-loading-dots span:nth-child(2) { animation-delay: .15s; }
.iam-studio .api-loading-dots span:nth-child(3) { animation-delay: .3s; }
.iam-studio [data-view="chat"] .api-empty-reuse { align-self: flex-start; margin-top: 12px; font-size: 12px; }
@keyframes studio-dot { 0%,80%,100% { opacity: .4; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media(max-width:1099px) { .iam-studio [data-view="grid"] [data-api-results] { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:699px) {
  .iam-studio [data-view="grid"] [data-api-results] { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .iam-studio [data-view="grid"] .api-media-actions { right: 6px; top: 6px; gap: 4px; }
  .iam-studio [data-view="grid"] .api-media-actions > a,.iam-studio [data-view="grid"] .api-media-actions > button,.iam-studio [data-view="grid"] .api-result-menu > summary { width: 32px; height: 32px; }
  .iam-studio .api-media-badge { width: 30px; height: 30px; top: 6px; left: 6px; font-size: 15px; }
  .iam-studio [data-view="chat"] .api-media-grid { grid-template-columns: 1fr; }
  .iam-studio [data-view="chat"] .api-user-prompt { max-width: 85%; margin-right: 36px; }
  .iam-studio [data-view="chat"] .api-user-prompt > small { right: -36px; width: 28px; height: 28px; }
  .iam-studio [data-view="chat"] .api-result { margin-left: 36px; }
  .iam-studio [data-view="chat"] .api-assistant > i { left: -36px; width: 28px; height: 28px; font-size: 16px; }
}
@media(hover:none) { .iam-studio [data-view="grid"] .api-result-menu:not([open]) { opacity: 1; } }
@media(prefers-reduced-motion:reduce) { .iam-studio .api-loading-dots span { animation: none; } }