/* Veya workspace and native control feedback. */
:root{
  --accent:#dfc8a4;--accent-hover:#efdcc0;--on-accent:#272219;--player-wave-color:#dfc8a4;
  --surface:#191a1e;--raised:#292b30;--input:#131417;--line:#383a41;
  --radius:1.5rem;--radius-small:.8rem;--frame:88rem;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);
  --normal:280ms;--drawer-duration:300ms;--entrance:480ms;
  --chrome:#ece8df;--chrome-soft:rgba(223,200,164,.08);--border-soft:rgba(223,200,164,.18);
}
:root[data-theme=light]{
  --page:#f2f0eb;--surface:#fcfaf6;--raised:#e7e2d8;--input:#eeebe5;
  --text:#292723;--muted:#67625a;--subtle:#6b655d;--line:#d2ccc2;
  --accent:#77552c;--accent-hover:#62441f;--on-accent:#fffaf1;
  --chrome:#55493b;--chrome-soft:rgba(119,85,44,.045);--border-soft:rgba(119,85,44,.2);
}
body{background:var(--page)}
.app-frame{padding-inline:max(3rem,env(safe-area-inset-left))}
.topbar{height:5.75rem;border-color:var(--line);background:var(--page)}
.brand{font-weight:600;font-size:1.65rem;letter-spacing:-.065em}
.brand-symbol{background:linear-gradient(140deg,var(--raised),var(--input));border-radius:.8rem;color:var(--accent)}
.topnav a{font-size:.8rem;transition:color var(--fast),background var(--fast),transform var(--fast) var(--ease-out)}
.utility-dock{border-color:var(--border-soft);background:var(--chrome-soft);border-radius:99rem;padding:.2rem .3rem}
.ai-launcher,.info-launcher{border-radius:99rem}
.ai-mark{color:var(--accent)}
.hero-layout{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:'intro' 'source';gap:1.2rem;align-items:center;padding:2rem 0 1.6rem;min-height:15rem}
.intro{grid-area:intro;align-self:end}
.intro-copy-block h1{font-size:2.3rem;font-weight:500;letter-spacing:-.045em;line-height:1.12}
.intro-copy{font-size:.85rem;margin-top:.7rem;max-width:48ch}
.source-panel{grid-area:source;align-self:start;max-width:100%}
.link-input{border-radius:1rem;background:var(--surface);min-height:3.75rem;padding:.4rem .45rem .4rem 1rem;gap:1rem}
.link-input input{font-size:.85rem}
.link-input .button{border-radius:.7rem;min-width:6.5rem}
.transfer-status{min-height:1.8rem;margin-top:.5rem;font-size:.72rem}
.player:has(video:not([hidden])) audio{position:absolute;z-index:2;bottom:.75rem;margin:0;width:calc(100% - 2rem)}
.fullscreen-close{display:none;position:absolute;z-index:6;top:1rem;right:1rem}
.player:fullscreen .fullscreen-close{display:flex}
.workspace{grid-template-columns:minmax(0,1fr) 24.5rem;gap:2rem}
.section-heading{margin-bottom:.8rem;height:2.2rem}
.section-heading h2{font-size:.85rem;letter-spacing:0;color:var(--muted)}
.section-heading>span{font-size:.65rem}
.player{height:clamp(23rem,35vw,31rem);border-radius:1.5rem;border-color:#484239;background:#131416;box-shadow:0 22px 45px -28px rgba(0,0,0,.5)}
.player-empty{padding:2rem;background:radial-gradient(ellipse at 70% 10%,#383028,transparent 65%)}
#player-cover{opacity:1;z-index:-2;transition:opacity var(--normal)}
.player-empty:has(#player-cover:not([hidden])){background:linear-gradient(180deg,rgba(8,10,12,0) 35%,rgba(8,10,12,.9) 100%)}
.player-empty-copy{width:100%;padding-top:4rem}
.player-overline{color:#d6c9b4;font-size:.62rem;letter-spacing:.09em}
.player-empty h3{font-size:1.85rem;line-height:1.18;max-width:30ch;font-weight:450;margin:.7rem 0}
.player-empty p{color:#d2d0cb;font-size:.8rem;margin-bottom:1.2rem}
.empty-actions .primary{background:#dfc8a4;border-color:#dfc8a4;color:#272219}
.empty-actions .subtle{background:rgba(25,27,31,.78);border-color:#6b665e;color:#f2ede5;backdrop-filter:blur(10px)}
#resume-media{border-radius:99rem;padding-inline:1.3rem}
.now-playing{padding:1.15rem 0 .8rem;gap:1rem;min-height:6rem}
.now-playing h2{font-size:.85rem;font-weight:500;max-width:58ch}
.playback-actions{border:1px solid var(--line);background:var(--surface);border-radius:99rem;padding:.2rem}
.playback-actions .icon-button{border-radius:99rem;color:var(--muted)}
.library{margin-top:3rem;padding:1.3rem;background:linear-gradient(140deg,var(--surface),var(--input));border-color:var(--line);border-radius:1.5rem}
.library-header{margin-bottom:1.1rem}
.library-header h2{font-size:1.1rem;font-weight:500}
#library-count{color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:99rem}
.library-header .icon-button{border-radius:99rem;background:var(--raised)}
.playlist-controls select{border-radius:.8rem;background:var(--input)}
.playlist-new{background:transparent;border-radius:.8rem}
.segments{border-radius:99rem;padding:.25rem;gap:.25rem;background:var(--input);margin:1.1rem 0}
.segments button{border-radius:99rem}
.segment-pill{border-radius:99rem;width:calc((100% - 1rem)/3);background:var(--raised);border-color:var(--line)}
.library-list{position:relative;max-height:24.5rem;gap:.35rem;scrollbar-width:thin}
.library-item{grid-template-columns:3.6rem minmax(0,1fr) var(--control);gap:.7rem;padding:.5rem .35rem;border-radius:.85rem;min-height:4.75rem;transition:background-color var(--fast),border-color var(--fast)}
.library-item:has(.item-save){grid-template-columns:3.6rem minmax(0,1fr) var(--control) var(--control)}
.item-art{width:3.6rem;height:3.6rem;border-radius:.7rem;background:linear-gradient(135deg,var(--raised),var(--input));border-color:var(--line)}
.item-art img{transition:transform var(--normal) var(--ease-out)}
.item-title{font-size:.82rem;line-height:1.45;min-height:2.75rem}
.item-info{font-size:.69rem;line-height:1.4}
.item-save,.item-menu summary{border-radius:99rem}
.library-item.selected{background:var(--raised)}
.mini-equalizer i{background:var(--accent)}
.list-exit-layer{position:absolute;pointer-events:none;z-index:3;inset:0;overflow:hidden}
.list-exit-row{position:absolute;inset-inline:0;width:100%;pointer-events:none}
.item-actions[popover]{border-radius:1rem;padding:.6rem;transform:translateY(-8px) scale(.95);transform-origin:var(--menu-origin,right top)}
.item-actions[popover]:popover-open{transform:none}
.footer{margin-top:1.5rem;padding-top:1.4rem;border-color:var(--line)}
.footer-credits{min-height:var(--control);display:flex;align-items:center;gap:.75rem;font-size:.7rem;font-weight:400;letter-spacing:0;color:var(--muted)}
.footer-credits .text-button{font-size:inherit;min-height:var(--control);text-decoration:none;padding-inline:.5rem}
dialog{border-radius:1.6rem;background:var(--surface);border-color:var(--line)}
dialog::backdrop{backdrop-filter:blur(5px)}
#assistant-panel{width:min(31rem,calc(100% - 1.5rem));border-radius:1.5rem;transform:translateX(35%);background:var(--surface)}
#assistant-panel[open]{transform:none}
.panel-header{padding:1.4rem 1.4rem .7rem}
.panel-tabs{background:var(--input);border-radius:99rem;margin:.4rem 1.4rem .9rem}
.panel-tabs button,.panel-tab-indicator{border-radius:99rem}
.ai-presence{display:none}
.chat-scroll{padding:1.4rem}.assistant-turn.user{background:var(--raised);border-radius:1rem 1rem .25rem 1rem;margin-left:2.5rem}
.assistant-turn.assistant{padding:.2rem 0}.chat-message{font-size:.9rem;line-height:1.7}
.chat-composer{padding:.75rem 1rem max(.75rem,env(safe-area-inset-bottom));background:transparent;border-top:0}
.composer-input{align-items:center;border-radius:1.5rem;padding:.375rem;background:var(--input);box-shadow:0 5px 20px rgba(0,0,0,.16)}
#assistant-message{font-size:16px;min-height:44px;height:44px;padding:.625rem .5rem;line-height:1.5}
#assistant-message::placeholder{font-size:14px}
.chat-privacy{display:none}
#assistant-status:empty{display:none}
.composer-send{border-radius:99rem}.thinking-dots{color:var(--accent)}
.assistant-suggestions .button{background:var(--input);border-radius:.85rem}
.info-actions .button{border-radius:.85rem}.info-detail{border-radius:1rem}
.credits-list{display:grid;gap:.7rem;padding-top:.6rem}.credits-list a{display:flex;align-items:center;justify-content:space-between;min-height:var(--control);color:var(--accent);font-size:.85rem;text-decoration:underline}
.theme-choice{border-radius:1rem}.text-choice{border-radius:99rem}
.toast{left:50%;bottom:max(1.5rem,env(safe-area-inset-bottom));display:flex;align-items:center;gap:.85rem;padding:.9rem 1.1rem;border-radius:1.2rem;transform:translate(-50%,12px) scale(.95);opacity:0;max-width:min(34rem,calc(100% - 2rem));border-color:var(--border-soft);background:var(--surface);transition:opacity var(--normal),transform var(--normal) var(--ease-out),display var(--normal) allow-discrete}
.toast:not([hidden]){opacity:1;transform:translate(-50%,0) scale(1)}
.toast-symbol{width:2rem;height:2rem;display:grid;place-items:center;flex-shrink:0;border-radius:99rem;background:var(--raised);color:var(--accent)}
.toast-copy{min-width:0;font-size:.8rem;line-height:1.5}.toast-copy strong{display:block;font-size:.7rem;color:var(--muted);font-weight:400;margin-bottom:.1rem}
.async-layer{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.95);pointer-events:none;transition:transform var(--fast) var(--ease-out),opacity var(--fast)}
.async-layer svg{width:1.15rem;height:1.15rem}
button[aria-busy=true] .button-label,button[aria-busy=true]>svg{opacity:0;transform:translateY(7px)}
button[aria-busy=true]{opacity:1;cursor:progress}
button[aria-busy=true] .async-layer{opacity:1;transform:none}
.async-spinner{animation:studio-spin 850ms linear infinite!important}
.button[data-result=success] .async-layer{opacity:1;transform:none}
.button[data-result=success] .button-label,.button[data-result=success]>svg{opacity:0}
.button-label>span{transition:transform var(--normal) var(--ease-out),opacity var(--fast)}
button:active:not(:disabled):not([aria-busy=true]),summary:active{transform:translateY(1px) scale(.96)}
@media(hover:hover) and (pointer:fine){
  .topnav a:hover{transform:translateY(-1px)}
  .library-item:hover .item-art img{transform:scale(1.08)}
  .empty-actions .primary:hover{background:#efdfc8;color:#272219}
  .empty-actions .subtle:hover{background:#34312c;border-color:#8c8070;color:#f2ede5}
  .icon-button:hover:not(:disabled),.item-menu summary:hover{background:var(--raised);color:var(--user-text,var(--text))}
  .brand:hover .brand-symbol svg{transform:rotate(-12deg) scale(1.12)}
}
@starting-style{
  #assistant-panel[open]{opacity:0;transform:translateX(35%)}
  .toast:not([hidden]){opacity:0;transform:translate(-50%,12px) scale(.95)}
  .item-actions[popover]:popover-open{opacity:0;transform:translateY(-8px) scale(.95)}
}
@keyframes studio-spin{to{transform:rotate(360deg)}}
@media(max-width:68rem){.app-frame{padding-inline:1.5rem}.hero-layout{gap:1rem 2rem;grid-template-columns:minmax(0,1fr)}.workspace{grid-template-columns:minmax(0,1fr) 22rem;gap:1.1rem}.library{padding:1rem}.player-empty h3{font-size:1.55rem}.now-playing{flex-direction:column}.playback-actions{align-self:flex-end}}
@media(max-width:100%){.hero-layout{grid-template-columns:minmax(0,1fr);gap:1rem}.intro-copy-block h1{font-size:1.85rem}.workspace{grid-template-columns:minmax(0,1fr)}.library{margin-top:0}.library-list{max-height:26rem}.now-playing{flex-direction:row}.library-item,.library-item:has(.item-save){gap:.75rem}.player{height:28rem}}
@media(max-width:47rem){
  .app-frame{padding-inline:max(1rem,env(safe-area-inset-left))}.topbar{height:auto;min-height:5rem}
  .hero-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:'intro' 'source';gap:.6rem .5rem;padding:1.2rem 0 .5rem;min-height:0}
  .intro{align-self:center}.intro-copy-block h1{font-size:1.65rem;line-height:1.2}.intro-copy{font-size:.75rem;max-width:23ch}
  
  .link-input{min-height:3.7rem;gap:.5rem;padding-left:.8rem}.link-input .button{min-width:5rem;padding-inline:.7rem}
  /* Keep editable text at least 16px so iPhone focus does not zoom the page. */
  #source,#assistant-message{font-size:max(16px,1rem)}
  .workspace{grid-template-columns:minmax(0,1fr);gap:.6rem}.section-heading{margin-top:.2rem;margin-bottom:.5rem}.player{height:21rem;border-radius:1.25rem}.player-empty{padding:1.4rem}.player-empty h3{font-size:1.5rem}.player-empty p{font-size:.75rem}.empty-actions .button{font-size:.75rem;padding-inline:.8rem}
  .now-playing{flex-direction:column;gap:.6rem;min-height:0}.playback-actions{align-self:flex-end}.library{padding:1rem;border-radius:1.25rem}
  .library-item{grid-template-columns:3.4rem minmax(0,1fr) var(--control);gap:.5rem}.library-item:has(.item-save){grid-template-columns:3.4rem minmax(0,1fr) var(--control) var(--control);gap:.4rem}.item-art{width:3.4rem;height:3.4rem}.item-title{font-size:.8rem}.item-info{font-size:.69rem}
  .footer{margin-top:1rem}.footer-kind{display:none}.footer-credits{gap:0}
  html.has-mobile-panel{overscroll-behavior:none;scroll-behavior:auto}
  html.has-mobile-panel body{position:fixed;inset:var(--panel-page-top,0px) 0 auto;inline-size:100%;overflow:hidden}
  #assistant-panel{inset:var(--panel-visible-top,0px) 0 auto;width:100%;height:var(--panel-visible-height,100dvh);border:0;border-radius:0;transform:none!important;overscroll-behavior:none;transition:opacity var(--fast),display var(--fast) allow-discrete,overlay var(--fast) allow-discrete}
  .panel-header{padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) .6rem max(1rem,env(safe-area-inset-left))}.panel-tabs{margin:.3rem 1rem .8rem}.chat-scroll{padding:1rem;overscroll-behavior:none;overflow-anchor:none}.chat-composer{padding:.75rem max(1rem,env(safe-area-inset-right)) max(.75rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}
  .panel-compact .panel-header{padding:.5rem 1rem}.panel-compact .panel-tabs{margin:0 1rem .35rem}.panel-compact .chat-composer{padding:.5rem 1rem max(.5rem,env(safe-area-inset-bottom))}
  @starting-style{#assistant-panel[open]{transform:none}}
}
@media(max-width:23rem){.hero-layout{grid-template-columns:minmax(0,1fr)}.intro-copy-block h1{font-size:1.45rem}.library{padding:.65rem}.library-item,.library-item:has(.item-save){grid-template-columns:2.75rem minmax(0,1fr) var(--control);gap:.2rem}.library-item:has(.item-save){grid-template-columns:2.75rem minmax(0,1fr) var(--control) var(--control)}.item-art{width:2.75rem;height:2.75rem}.item-info{font-size:.66rem}.player-empty h3{font-size:1.3rem}.empty-actions .button{font-size:.7rem}.topbar{gap:.4rem}.utility-dock{padding:.15rem}.ai-launcher{padding-inline:.5rem}}
@media(prefers-reduced-motion:reduce){
  #assistant-panel{transform:none!important}
  .toast,.toast:not([hidden]){transform:translateX(-50%)}
  .async-spinner{animation:none!important}.item-art img{transition:none}
  button:active:not(:disabled),summary:active{transform:none}
  @starting-style{#assistant-panel[open]{transform:none}.toast:not([hidden]){transform:translateX(-50%)}}
}

/* Provider players share the existing stage; file playback keeps its layout. */
.provider-player{position:absolute;inset:0;overflow:auto;background:#080a0c;z-index:2}.provider-player[hidden]{display:none}.provider-slot{width:100%;height:100%;display:flex;justify-content:center}.provider-slot>iframe{width:100%;border:0}.provider-player[data-provider="youtube"] .provider-slot>iframe,.provider-player[data-provider="tiktok"] .provider-slot>iframe{height:100%}.provider-player[data-provider="instagram"] .provider-slot,.provider-player[data-provider="x"] .provider-slot{height:auto;min-height:100%;align-items:flex-start}.provider-slot .instagram-media{min-width:0!important;max-width:100%!important;width:100%!important;margin:0!important}.provider-slot .twitter-tweet{margin:0!important;max-width:100%}.link-original{display:inline-block;font-size:.8rem;margin-top:.5rem;color:inherit}.link-original[hidden]{display:none}.player:has(.provider-player:not([hidden])) .player-caption{display:none}