/* XianVerse ChatGPT-style composer · 70% desktop width */
.xv-selection-row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
}

.xv-selection-panel{width:100%}

.xv-chat-composer{
  position:relative;
  width:70%;
  max-width:1180px;
  min-width:0;
  justify-self:center;
  margin:0 auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}

.xv-chat-composer::before{display:none}

.xv-chat-composer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:0;
  margin:0 8px 10px;
}

.xv-chat-composer .xv-composer-selected{
  display:flex;
  align-items:center;
  flex:0 1 auto;
  min-width:0;
  max-width:48%;
  gap:9px;
  padding:5px 10px 5px 5px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.xv-chat-composer .xv-composer-selected::after{display:none}
.xv-chat-composer .xv-composer-selected img{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid rgba(175,145,255,.38);
}
.xv-chat-composer .xv-composer-selected>div{min-width:0}
.xv-chat-composer .xv-composer-selected span{font-size:8px;letter-spacing:.1em;color:#737c8d}
.xv-chat-composer .xv-composer-selected b{display:inline-block;max-width:110px;margin:2px 5px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.xv-chat-composer .xv-composer-selected small{font-size:9px;color:#bca9fa}
.xv-chat-composer .xv-composer-selected p{display:none}

.xv-chat-composer .xv-composer-tags{
  display:flex;
  justify-content:flex-end;
  flex:1 1 auto;
  gap:6px;
  min-width:0;
  margin:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.xv-chat-composer .xv-composer-tags::-webkit-scrollbar{display:none}
.xv-chat-composer .xv-composer-tags .xv-tag{
  flex:0 0 auto;
  min-height:30px;
  padding:0 11px;
  border-radius:999px;
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.028);
  color:#929aaa;
  font-size:9px;
}
.xv-chat-composer .xv-composer-tags .xv-tag:hover{
  border-color:rgba(167,139,250,.32);
  background:rgba(139,92,246,.09);
  color:#ddd5ff;
}

.xv-chat-composer .xv-chat-input-shell{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  min-height:132px;
  margin:0;
  overflow:visible;
  border:1px solid rgba(255,255,255,.13);
  border-radius:28px;
  background:
    radial-gradient(520px 140px at 50% 112%,rgba(111,72,255,.08),transparent 70%),
    rgba(22,24,31,.94);
  box-shadow:
    0 24px 64px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.45);
  backdrop-filter:blur(24px) saturate(125%);
  -webkit-backdrop-filter:blur(24px) saturate(125%);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.xv-chat-composer .xv-chat-input-shell::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(130deg,rgba(255,255,255,.045),transparent 26%,transparent 72%,rgba(139,92,246,.035));
}
.xv-chat-composer .xv-chat-input-shell:focus-within,
.xv-chat-composer .xv-chat-input-shell.drag{
  border-color:rgba(167,139,250,.72);
  box-shadow:
    0 0 0 3px rgba(139,92,246,.12),
    0 30px 78px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.09);
  transform:translateY(-1px);
}

.xv-chat-composer .xv-composer-previews{
  position:relative;
  z-index:2;
  display:flex;
  gap:10px;
  min-height:0;
  margin:0;
  padding:0 18px;
  overflow-x:auto;
}
.xv-chat-composer .xv-composer-previews:not(:empty){
  padding-top:15px;
  padding-bottom:4px;
  border:0;
}
.xv-chat-composer .xv-composer-previews .xv-preview-item{
  flex:0 0 72px;
  width:72px;
  height:72px;
  border-radius:14px;
  border-color:rgba(167,139,250,.45);
  background:#10131b;
  box-shadow:0 8px 22px rgba(0,0,0,.3);
}
.xv-chat-composer .xv-composer-previews .xv-preview-item img{border-radius:13px}
.xv-chat-composer .xv-composer-previews .xv-preview-remove{
  right:-6px;
  top:-6px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#f0f1f4;
  border:2px solid #171921;
  color:#14161b;
  font-size:15px;
  line-height:17px;
  box-shadow:0 5px 14px rgba(0,0,0,.38);
}

.xv-chat-composer .xv-composer-textarea{
  position:relative;
  z-index:2;
  box-sizing:border-box;
  display:block;
  width:100%;
  min-height:72px;
  max-height:220px;
  padding:20px 22px 8px;
  overflow-y:auto;
  border:0;
  outline:0;
  resize:none;
  background:transparent;
  color:#f1f2f5;
  font:400 15px/1.6 Inter,"PingFang SC","Microsoft YaHei",sans-serif;
  letter-spacing:.002em;
  scrollbar-width:thin;
}
.xv-chat-composer .xv-composer-textarea::placeholder{color:#777e8d}

.xv-chat-composer .xv-composer-toolbar{
  position:relative;
  z-index:3;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  min-height:58px;
  margin-top:auto;
  padding:7px 10px 10px 12px;
  border:0;
  background:transparent;
}
.xv-chat-composer .xv-toolbar-left{
  display:flex;
  align-items:center;
  flex:1 1 auto;
  gap:7px;
  min-width:0;
}
.xv-chat-composer .xv-toolbar-right{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  gap:10px;
}
.xv-chat-composer .xv-tool-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.09);
  border-radius:50%;
  background:rgba(255,255,255,.045);
  color:#b8bec9;
  transition:.18s ease;
}
.xv-chat-composer .xv-tool-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.xv-chat-composer .xv-chat-plus{color:#e2e4e9}
.xv-chat-composer .xv-tool-icon:hover:not(:disabled){
  border-color:rgba(167,139,250,.36);
  background:rgba(139,92,246,.13);
  color:#fff;
  transform:translateY(-1px);
}
.xv-chat-composer .xv-tool-icon:disabled{opacity:.28;cursor:not-allowed}
.xv-chat-composer .xv-clear-images:not(:disabled){color:#f0a4b1}

.xv-chat-composer .xv-chat-settings{
  display:flex;
  align-items:center;
  flex:0 1 auto;
  grid-template-columns:none;
  gap:6px;
  min-width:0;
  margin:0;
}
.xv-chat-composer .xv-chat-settings label{
  position:relative;
  display:block;
  min-width:0;
}
.xv-chat-composer .xv-chat-settings label>span{display:none}
.xv-chat-composer .xv-chat-settings .xv-select{
  width:auto;
  min-width:74px;
  max-width:112px;
  height:36px;
  padding:0 28px 0 11px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background-color:rgba(255,255,255,.035);
  color:#aeb4c0;
  font-size:10px;
  cursor:pointer;
}
.xv-chat-composer .xv-chat-settings .xv-select:hover,
.xv-chat-composer .xv-chat-settings .xv-select:focus{
  border-color:rgba(167,139,250,.35);
  color:#fff;
}

.xv-chat-composer .xv-file-status{
  display:block;
  min-width:0;
  max-width:175px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#666e7c;
  font-size:9px;
}
.xv-chat-composer .xv-prompt-count{color:#626a78;font-size:9px;white-space:nowrap}

.xv-chat-composer .xv-send-button{
  position:relative;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  min-width:42px;
  margin:0;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:50%;
  background:#f2f2f3;
  color:#15171b;
  box-shadow:0 8px 22px rgba(0,0,0,.32),inset 0 1px 0 #fff;
  transition:transform .18s ease,background .18s ease,opacity .18s ease;
}
.xv-chat-composer .xv-send-button:hover:not(:disabled){transform:translateY(-1px) scale(1.03);background:#fff}
.xv-chat-composer .xv-send-button:active:not(:disabled){transform:scale(.96)}
.xv-chat-composer .xv-send-button:disabled{opacity:.52;cursor:wait}
.xv-chat-composer .xv-send-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.xv-chat-composer .xv-send-button .xv-loader{width:18px;height:18px;border-width:2px;border-color:rgba(20,22,27,.25);border-top-color:#15171b}
.xv-chat-composer .xv-send-cost{
  position:absolute;
  right:-7px;
  top:-7px;
  display:grid;
  place-items:center;
  min-width:22px;
  height:18px;
  padding:0 4px;
  border:2px solid #171921;
  border-radius:999px;
  background:#8b5cf6;
  color:#fff;
  font-size:8px;
  font-weight:800;
  line-height:1;
}

.xv-chat-composer-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:8px 12px 0;
}
.xv-chat-composer .xv-cost{
  display:flex;
  gap:14px;
  margin:0;
  color:#676f7d;
  font-size:9px;
}
.xv-chat-composer .xv-cost b{color:#bba8ff}
.xv-enter-hint{color:#565e6c;font-size:9px;white-space:nowrap}

/* The standalone hidden output format select on the home page remains functional. */
.xv-chat-composer>#formatSelect{display:none!important}

@media(max-width:1260px){
  .xv-chat-composer{display:block;width:82%;max-width:none}
  .xv-chat-composer .xv-composer-box{margin:0}
}

@media(max-width:980px){
  .xv-chat-composer{width:100%}
  .xv-chat-composer-head{margin-inline:2px}
  .xv-chat-composer .xv-composer-selected{max-width:50%}
  .xv-chat-composer .xv-file-status{display:none}
}

@media(max-width:720px){
  .xv-selection-row{gap:14px}
  .xv-chat-composer-head{align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:9px}
  .xv-chat-composer .xv-composer-selected{width:100%;max-width:none}
  .xv-chat-composer .xv-composer-tags{width:100%;justify-content:flex-start}
  .xv-chat-composer .xv-chat-input-shell{min-height:142px;border-radius:22px}
  .xv-chat-composer .xv-composer-textarea{min-height:78px;padding:17px 16px 7px;font-size:14px}
  .xv-chat-composer .xv-composer-toolbar{align-items:center;gap:8px;padding:7px 8px 9px 9px}
  .xv-chat-composer .xv-toolbar-left{gap:5px;overflow-x:auto;scrollbar-width:none}
  .xv-chat-composer .xv-toolbar-left::-webkit-scrollbar{display:none}
  .xv-chat-composer .xv-tool-icon{width:36px;height:36px;flex-basis:36px}
  .xv-chat-composer .xv-chat-settings{flex:0 0 auto}
  .xv-chat-composer .xv-chat-settings .xv-select{min-width:64px;max-width:82px;height:34px;padding-left:9px;font-size:9px}
  .xv-chat-composer .xv-prompt-count{display:none}
  .xv-chat-composer .xv-send-button{width:40px;height:40px;min-width:40px}
  .xv-chat-composer-foot{padding-inline:5px}
  .xv-enter-hint{display:none}
}

@media(max-width:430px){
  .xv-chat-composer .xv-composer-tags .xv-tag:nth-child(n+4){display:none}
  .xv-chat-composer .xv-tool-icon#promptFocusBtn{display:none}
  .xv-chat-composer .xv-chat-settings label:nth-child(n+4){display:none}
  .xv-chat-composer .xv-chat-settings .xv-select{min-width:60px;max-width:72px}
}
.xv-chat-composer .xv-send-progress{
  position:absolute;
  right:-9px;
  top:-7px;
  display:grid;
  place-items:center;
  min-width:25px;
  height:18px;
  padding:0 4px;
  border:2px solid #171921;
  border-radius:999px;
  background:#8b5cf6;
  color:#fff;
  font-size:8px;
  font-weight:800;
}

/* =========================================================
   XianVerse Cosmic Lightning Composer · 2026-06-17
   Deep-space blue + violet electric border, readable and GPU-friendly.
   ========================================================= */
.xv-chat-composer .xv-chat-input-shell{
  isolation:isolate;
  border-color:rgba(88,132,255,.42);
  background:
    radial-gradient(720px 210px at 18% -18%,rgba(22,88,255,.15),transparent 63%),
    radial-gradient(680px 220px at 88% 116%,rgba(146,52,255,.16),transparent 66%),
    linear-gradient(155deg,rgba(11,19,42,.97),rgba(15,14,34,.965) 52%,rgba(10,18,39,.97));
  box-shadow:
    0 26px 80px rgba(0,0,0,.48),
    0 0 28px rgba(31,94,255,.10),
    0 0 42px rgba(132,56,255,.08),
    inset 0 1px 0 rgba(210,225,255,.10),
    inset 0 -1px 0 rgba(5,8,24,.72);
}

/* Animated energy ring. The mask keeps the effect on the border only. */
.xv-chat-composer .xv-chat-input-shell::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-2;
  padding:2px;
  border-radius:30px;
  pointer-events:none;
  background:
    conic-gradient(from var(--xv-electric-angle,0deg),
      transparent 0deg,
      rgba(40,105,255,.15) 35deg,
      #2f74ff 61deg,
      #80c7ff 72deg,
      transparent 86deg,
      transparent 145deg,
      rgba(125,55,255,.18) 176deg,
      #793cff 199deg,
      #e07cff 212deg,
      transparent 228deg,
      transparent 305deg,
      #315dff 334deg,
      transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  filter:drop-shadow(0 0 6px rgba(49,104,255,.78)) drop-shadow(0 0 11px rgba(139,61,255,.58));
  animation:xvElectricOrbit 5.8s linear infinite;
  opacity:.92;
}

/* Short, irregular electric flashes travelling around the frame. */
.xv-chat-composer .xv-chat-input-shell::after{
  content:"";
  position:absolute;
  inset:-8px;
  z-index:-3;
  border-radius:36px;
  pointer-events:none;
  background:
    radial-gradient(35% 16% at 18% 1%,rgba(91,171,255,.86),transparent 70%),
    radial-gradient(22% 20% at 102% 27%,rgba(156,75,255,.85),transparent 72%),
    radial-gradient(30% 15% at 75% 101%,rgba(116,68,255,.72),transparent 72%),
    radial-gradient(18% 24% at -2% 72%,rgba(44,111,255,.74),transparent 72%);
  filter:blur(5px) saturate(155%);
  opacity:.38;
  transform:scale(1.002);
  animation:xvLightningPulse 3.6s steps(1,end) infinite;
}

.xv-chat-composer .xv-chat-input-shell:hover::before,
.xv-chat-composer .xv-chat-input-shell:focus-within::before,
.xv-chat-composer .xv-chat-input-shell.drag::before{
  opacity:1;
  animation-duration:2.9s;
  filter:drop-shadow(0 0 8px rgba(76,151,255,.96)) drop-shadow(0 0 15px rgba(167,72,255,.82));
}
.xv-chat-composer .xv-chat-input-shell:hover::after,
.xv-chat-composer .xv-chat-input-shell:focus-within::after,
.xv-chat-composer .xv-chat-input-shell.drag::after{
  opacity:.68;
}
.xv-chat-composer .xv-chat-input-shell:focus-within,
.xv-chat-composer .xv-chat-input-shell.drag{
  border-color:rgba(93,148,255,.72);
  box-shadow:
    0 0 0 1px rgba(119,75,255,.22),
    0 0 0 4px rgba(48,104,255,.08),
    0 34px 92px rgba(0,0,0,.56),
    0 0 38px rgba(40,111,255,.20),
    0 0 52px rgba(143,51,255,.17),
    inset 0 1px 0 rgba(225,235,255,.13);
}

@property --xv-electric-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
@keyframes xvElectricOrbit{to{--xv-electric-angle:360deg}}
@keyframes xvLightningPulse{
  0%,100%{opacity:.28;transform:scale(1.002)}
  9%{opacity:.76;transform:scale(1.008)}
  11%{opacity:.20}
  38%{opacity:.44}
  40%{opacity:.82;transform:scale(1.006)}
  42%{opacity:.31}
  74%{opacity:.58}
  76%{opacity:.22}
}

@media (prefers-reduced-motion:reduce){
  .xv-chat-composer .xv-chat-input-shell::before,
  .xv-chat-composer .xv-chat-input-shell::after{animation:none!important}
}


/* In-composer website usage guide */
.xv-composer-usage-flow{display:flex;align-items:center;gap:8px;margin:13px 15px 2px;padding:8px 10px;overflow-x:auto;border:1px solid rgba(118,142,255,.13);border-radius:13px;background:linear-gradient(90deg,rgba(32,73,154,.12),rgba(118,51,190,.10));color:#aeb8cf;font-size:9px;line-height:1;white-space:nowrap;scrollbar-width:none;transition:opacity .2s ease,transform .2s ease,max-height .2s ease,margin .2s ease,padding .2s ease}
.xv-composer-usage-flow::-webkit-scrollbar{display:none}
.xv-composer-usage-flow .xv-flow-label{color:#e3e8ff;font-weight:850;letter-spacing:.08em}
.xv-composer-usage-flow span{display:inline-flex;align-items:center;gap:5px}
.xv-composer-usage-flow span b{display:grid;place-items:center;width:16px;height:16px;border-radius:6px;background:linear-gradient(135deg,#2f6cff,#8b4cff);color:#fff;font-size:8px;box-shadow:0 0 12px rgba(86,92,255,.28)}
.xv-composer-usage-flow i{color:#5d6a89;font-style:normal}
.xv-chat-input-shell.has-prompt .xv-composer-usage-flow{max-height:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;overflow:hidden;border-color:transparent;opacity:0;transform:translateY(-4px)}
.xv-chat-composer .xv-composer-textarea::placeholder{color:#7f89a1;opacity:.86}
@media(max-width:720px){.xv-composer-usage-flow{margin:10px 11px 0;padding:7px 8px;font-size:8px}.xv-composer-usage-flow .xv-flow-label{position:sticky;left:0;padding-right:7px;background:#111a35}.xv-composer-usage-flow i{display:none}}


/* 2026-06: composer repositioned below homepage feature badges and above workbench title. */
.xv-home-composer-stage{
  position:relative;
  z-index:5;
  padding-top:10px;
  padding-bottom:18px;
}
.xv-home-composer-stage>.xv-container{display:flex;justify-content:center}
.xv-home-composer-stage .xv-chat-composer{margin:0 auto}
.xv-studio-composer-stage{
  position:relative;
  z-index:4;
  display:flex;
  justify-content:center;
  margin:0 0 24px;
  padding:4px 0 22px;
  border-bottom:1px solid rgba(255,255,255,.065);
}
.xv-studio-composer-stage .xv-chat-composer{margin:0 auto}
.xv-selection-row>.xv-selection-panel{grid-column:1/-1}
@media(max-width:900px){
  .xv-home-composer-stage{padding-top:4px;padding-bottom:12px}
  .xv-studio-composer-stage{margin-bottom:18px;padding-bottom:18px}
}