/* Paket 21 B1 (27. 9. 2026): pisalo in glava na namizju.
   Grega: izbira modela v spustni meni, pisalo manjse, Talk to Shela iz glave v pisalo (desno od mikrofona).
   Vse velja SAMO na namizju (>= 1024 px) in SAMO, ko je shela-composer-p21.js uspesno postavil gumbe
   (razred na <html>); telefon in tablica ostaneta, kot sta bila. Nic se ne odstrani: vrstica pillov ostane
   v DOM (mobilni meni v shela-plus-menu.js jo proksira), gumb Talk v glavi ostane v DOM (skrit samo na namizju). */

/* ── Meni modela (plava na body, zunaj #root; odpre ga samo sprozilec, ki je viden le na namizju) ── */
#shela-model-pop {
  position: fixed; z-index: 2147483000; width: 440px; max-width: calc(100vw - 16px);
  box-sizing: border-box; display: flex; flex-direction: column;
  background: rgba(20, 20, 30, 0.92);
  -webkit-backdrop-filter: blur(32px) saturate(200%); backdrop-filter: blur(32px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  font: 13px/1.4 Inter, -apple-system, "SF Pro Text", system-ui, sans-serif;
  opacity: 0; transform: translateY(4px); pointer-events: none; visibility: hidden;
  transition: opacity 0.22s cubic-bezier(.2,.8,.2,1), transform 0.22s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0.22s;
}
#shela-model-pop.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
#shela-model-pop .p21-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 6px; min-height: 0; }
#shela-model-pop .p21-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 10px 6px; }
#shela-model-pop .p21-title { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
#shela-model-pop .p21-keys { font-size: 11px; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
#shela-model-pop [role="listbox"] { display: flex; flex-direction: column; gap: 2px; outline: none; }
#shela-model-pop .p21-opt {
  position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px 9px 12px;
  border-radius: 12px; cursor: pointer; outline: none; transition: background 0.16s ease;
}
#shela-model-pop .p21-opt:hover { background: rgba(255, 255, 255, 0.06); }
#shela-model-pop .p21-opt:focus-visible { box-shadow: inset 0 0 0 2px #a78bfa; }
#shela-model-pop .p21-opt[aria-selected="true"] { background: rgba(124, 58, 237, 0.18); }
#shela-model-pop .p21-opt[aria-selected="true"]::before {
  content: ""; position: absolute; left: 3px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: #a78bfa;
}
#shela-model-pop .p21-ico {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--p21-tier, #c4b5fd);
}
#shela-model-pop .p21-opt[aria-selected="true"] .p21-ico { background: rgba(124, 58, 237, 0.25); border-color: rgba(167, 139, 250, 0.35); }
#shela-model-pop .p21-ico svg { width: 17px; height: 17px; }
#shela-model-pop .p21-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#shela-model-pop .p21-name { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.95); }
#shela-model-pop .p21-chip {
  font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 7px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.78); font-variant-numeric: tabular-nums;
}
#shela-model-pop .p21-chip.p21-default { border-color: rgba(167, 139, 250, 0.45); color: #c4b5fd; }
#shela-model-pop .p21-chip.p21-pro { border-color: rgba(167, 139, 250, 0.55); color: #c4b5fd; display: inline-flex; align-items: center; gap: 4px; }
#shela-model-pop .p21-chip.p21-pro svg { width: 10px; height: 10px; }
#shela-model-pop .p21-desc { font-size: 12px; color: rgba(255, 255, 255, 0.66); }
#shela-model-pop .p21-when { font-size: 11px; color: rgba(255, 255, 255, 0.55); }
#shela-model-pop .p21-check { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 8px; color: #a78bfa; visibility: hidden; }
#shela-model-pop .p21-opt[aria-selected="true"] .p21-check { visibility: visible; }
#shela-model-pop .p21-opt[aria-disabled="true"] .p21-name { color: rgba(255, 255, 255, 0.78); }
#shela-model-pop .p21-opt.p21-vid { align-items: center; padding-top: 7px; padding-bottom: 7px; }
#shela-model-pop .p21-opt.p21-vid .p21-ico { flex-basis: 28px; width: 28px; height: 28px; border-radius: 8px; }
#shela-model-pop .p21-opt.p21-vid .p21-check { margin-top: 0; }
#shela-model-pop .p21-sep { height: 1px; margin: 6px 8px; background: rgba(255, 255, 255, 0.08); }
#shela-model-pop .p21-upsell {
  margin: 4px 6px 2px; padding: 9px 12px; border-radius: 12px; font-size: 12px; color: rgba(255, 255, 255, 0.85);
  background: rgba(124, 58, 237, 0.14); border: 1px solid rgba(167, 139, 250, 0.35);
}
#shela-model-pop .p21-upsell a { color: #c4b5fd; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
#shela-model-pop .p21-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; color: rgba(255, 255, 255, 0.62);
}
#shela-model-pop .p21-foot b { color: rgba(255, 255, 255, 0.92); font-weight: 600; font-variant-numeric: tabular-nums; }
#shela-model-pop .p21-foot a { color: #c4b5fd; text-decoration: none; font-weight: 600; white-space: nowrap; border-radius: 6px; padding: 2px 4px; }
#shela-model-pop .p21-foot a:hover { text-decoration: underline; }
#shela-model-pop .p21-foot a:focus-visible, #shela-model-pop .p21-upsell a:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }

/* ── Namizje: sprozilec, Talk, kompaktno pisalo ── */
#shela-model-trigger, #shela-composer-talk { display: none; }

@media (min-width: 1024px) {
  /* vrstica pillov nad pisalom -> spustni meni v pisalu (ostane v DOM, samo skrita) */
  html.shela-p21-composer #shela-ai-pills { display: none !important; }

  /* en sam okvir: zunanja steklena skatla okoli pisala odpade, ostane samo pisalo (kot na telefonu, varno-obmocje.css:28-34) */
  html.shela-p21-composer #root div.max-w-3xl:has(> [data-shela-composer="p21"]) {
    background: transparent !important; border-color: transparent !important; box-shadow: none !important;
    padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html.shela-p21-composer #root div.max-w-3xl:has(> [data-shela-composer="p21"]) > .shela-upload-previews:not(:empty) {
    margin-bottom: 6px; border-radius: 14px; background: rgba(20, 20, 30, 0.55); border: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* kompaktno pisalo: ena vrstica v mirovanju (57 px namesto 66 px + 34 px pillov), raste z vsebino do 240 px (ChatLayout.tsx:1551-1558) */
  /* #root: uiux-v2.css:188 (div[class*=rounded-2xl]:has(textarea[...]), 0-2-2) bi sicer povozil odmik */
  html.shela-p21-composer #root [data-shela-composer="p21"] { padding: 6px 8px !important; gap: 6px !important; }
  html.shela-p21-composer #root [data-shela-composer="p21"] > textarea { padding: 9px 6px !important; min-width: 0; overflow-x: hidden !important; }
  html.shela-p21-composer [data-shela-composer="p21"] > #shela-plus { margin-bottom: 5px; }
  html.shela-p21-composer [data-shela-composer="p21"] > .shela-voice-btn { width: 36px !important; height: 36px !important; min-width: 36px !important; margin-bottom: 3px; }
  html.shela-p21-composer [data-shela-composer="p21"] > button.bg-hulk { margin-bottom: 3px; }

  html.shela-p21-composer #shela-model-trigger {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 32px; margin-bottom: 5px; padding: 0 10px 0 9px;
    border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.88); font: 500 12.5px/1 Inter, -apple-system, system-ui, sans-serif; cursor: pointer;
    white-space: nowrap; transition: background 0.16s ease, border-color 0.16s ease;
  }
  html.shela-p21-composer #shela-model-trigger:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.18); transform: none; box-shadow: none; }
  html.shela-p21-composer #shela-model-trigger[aria-expanded="true"] { background: rgba(124, 58, 237, 0.14); border-color: #a78bfa; }
  html.shela-p21-composer #shela-model-trigger:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
  html.shela-p21-composer #shela-model-trigger .p21-t-ico { display: inline-flex; color: var(--p21-tier, #c4b5fd); }
  html.shela-p21-composer #shela-model-trigger .p21-t-ico svg { width: 15px; height: 15px; }
  html.shela-p21-composer #shela-model-trigger .p21-t-chev { width: 10px; height: 10px; opacity: 0.6; transition: transform 0.16s ease; }
  html.shela-p21-composer #shela-model-trigger[aria-expanded="true"] .p21-t-chev { transform: rotate(180deg); }
  html.shela-p21-composer #shela-model-trigger:hover svg, html.shela-p21-composer #shela-composer-talk:hover svg { filter: none !important; }

  /* Talk to Shela: skrajno desno v pisalu (ChatGPT vzorec): viden, ko je polje prazno; ko je besedilo ali Shela dela,
     je na tem mestu gumb Poslji (React ga nikoli ne skrije, ce je besedilo: ChatLayout.tsx:2282). */
  html.shela-p21-composer #shela-composer-talk {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; order: 99; height: 36px; margin-bottom: 3px; padding: 0 14px 0 11px;
    border: 0; border-radius: 999px !important; cursor: pointer; color: #fff; white-space: nowrap;
    font: 600 13px/1 Inter, -apple-system, system-ui, sans-serif; letter-spacing: 0.01em;
    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 45%, #a21caf 100%);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: box-shadow 0.16s ease, filter 0.16s ease;
  }
  html.shela-p21-composer #shela-composer-talk:hover { filter: brightness(1.08); box-shadow: 0 6px 22px rgba(167, 139, 250, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22); transform: none; }
  html.shela-p21-composer #shela-composer-talk:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 2px; }
  html.shela-p21-composer #shela-composer-talk .p21-live { position: relative; width: 14px; height: 14px; flex: 0 0 14px; }
  html.shela-p21-composer #shela-composer-talk .p21-live::before {
    content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  }
  html.shela-p21-composer #shela-composer-talk .p21-live::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.85);
    animation: p21-live 2.4s cubic-bezier(.2,.8,.2,1) infinite;
  }
  @keyframes p21-live { 0% { transform: scale(0.7); opacity: 0.95; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } }

  [data-shela-composer="p21"].shela-has-text #shela-composer-talk,
  [data-shela-composer="p21"]:has(> button.bg-hulk:not(.hidden)) #shela-composer-talk,
  [data-shela-composer="p21"]:has(.shela-voice-btn.rec) #shela-composer-talk { display: none !important; }

  /* ozko pisalo (odprta plosca Computer): samo ikone, napisa se skrijeta */
  [data-shela-composer="p21"][data-p21-ozko="1"] #shela-model-trigger .p21-t-label,
  [data-shela-composer="p21"][data-p21-ozko="1"] #shela-composer-talk .p21-talk-label { display: none; }
  html.shela-p21-composer [data-shela-composer="p21"][data-p21-ozko="1"] #shela-composer-talk { width: 36px; padding: 0; justify-content: center; }

  /* glava: Brain View ostane, Talk to Shela je zdaj v pisalu (gumb ostane v DOM za pulse-orb.js in meni +).
     Paket 21 S: skrij ga samo, dokler Talk v pisalu res obstaja; na straneh brez pisala (npr. /settings po prehodu v aplikaciji) ostane v glavi. */
  html.shela-p21-talk:has(#shela-composer-talk) #shela-header-v2 .shela-talk-btn { display: none !important; }

  /* Paket 21 F: kartica 67 MUSIC. Obliko in odmik od dna izmeri shela-composer-p21.js (b67Postavi): najnizje prosto mesto
     ob desnem robu, nikoli cez pisalo (Talk, Poslji, mikrofon, model), vrsto kartic, puscici ali Music Studio.
     Brez atributa (skripta ni tekla, ali pod 1100 px, kjer kartica lezi v toku strani) ostane vse, kot je bilo. */
  .b67[data-p21-oblika] { bottom: var(--p21-b67-bottom, 14px) !important; }
  /* umik = ni prostora; caka (Paket 21b) = nova kartica, dokler pisalo in vrsta kartic nista narisana in mesto ni mirno */
  .b67[data-p21-oblika="umik"], .b67[data-p21-oblika="caka"] { visibility: hidden !important; pointer-events: none !important; }
  /* Paket 21b: kartica pride iz shela-67-banner.js (po odgovoru /api/music/banners) lahko PRED DOMContentLoaded, ko skripta
     pisala se ne tece, zato je bila 1 sliko vidna v kotu. Zato je nova kartica v kotu (>= 1100 px, banner.js SIROK) nevidna
     ze s CSS (zamik animacije 1,6 s, brez gibanja), skripta pa jo pokaze takoj, ko ji doloci mesto (oblika != caka).
     Ce skripta ne tece, se kartica po 1,6 s pokaze sama, kot prej. */
  @media (min-width: 1100px) {
    .b67 { animation: p21-b67-caka 1ms linear 1600ms backwards; }
    .b67[data-p21-oblika]:not([data-p21-oblika="caka"]) { animation: none; }
  }
  @keyframes p21-b67-caka { from { visibility: hidden; } to { visibility: hidden; } }
  /* pas: slika levo, napis desno (kot vodoravna vrstica na telefonu, shela-manus-ui.js), 98 px visok */
  .b67[data-p21-oblika="pas"] { display: flex; align-items: stretch; width: 276px; }
  .b67[data-p21-oblika="pas"] .slike { flex: 0 0 144px; width: 144px; height: 96px; aspect-ratio: auto; }
  .b67[data-p21-oblika="pas"] .noga {
    flex: 1 1 auto; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
    padding: 8px 36px 8px 12px; border-top: 0; border-left: 1px solid #1C1610;
  }
  .b67[data-p21-oblika="pas"] .noga b { font-size: 13px; }
  .b67[data-p21-oblika="pas"] .noga .odpri { margin-left: 0; font-size: 11px; }
  /* pilula: samo zlati napis in x (40 px visoka); klik odpre 67 MUSIC kot prej */
  .b67[data-p21-oblika="pilula"] { width: auto; border-radius: 999px; }
  .b67[data-p21-oblika="pilula"] .slike, .b67[data-p21-oblika="pilula"] .pike, .b67[data-p21-oblika="pilula"] .noga .odpri { display: none; }
  .b67[data-p21-oblika="pilula"] .noga { height: 38px; box-sizing: border-box; padding: 0 40px 0 14px; border-top: 0; }
  .b67[data-p21-oblika="pilula"] .noga b { font-size: 12px; white-space: nowrap; }
  .b67[data-p21-oblika="pilula"] .skrij { top: 7px; right: 7px; border-radius: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  #shela-model-pop, #shela-model-pop.open { transform: none !important; transition: opacity 0.12s linear, visibility 0s !important; }
  html.shela-p21-composer #shela-composer-talk .p21-live::after { animation: none !important; opacity: 0.6; }
  html.shela-p21-composer #shela-model-trigger .p21-t-chev { transition: none; }
}