/* Sidebar action stays transparent in every theme and interaction state.
   Keep this in the live stylesheet as well as the server-rendered shell. */
body #sf-side button.sf-newchat,
body #sf-side button.sf-newchat:is(:hover,:active,:focus,.on){
  background:transparent!important;background-image:none!important;
  border:0!important;box-shadow:none!important;
}

/* Reference-inspired New chat input only; no project/files/plugin footer.
   Reuse the existing controls and preserve the same design when chat starts; leave Analytics untouched. */
body:is(.started,:not(.started)):not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill {
  width:100%;max-width:768px;min-height:128px;box-sizing:border-box;
  display:grid;grid-template-columns:40px minmax(0,1fr) auto 40px 40px;
  grid-template-rows:minmax(56px,1fr) 40px;gap:8px;
  padding:16px 12px 8px;border-radius:28px;
}
body:is(.started,:not(.started)):not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill #inp {
  grid-column:1/-1;grid-row:1;width:100%;min-height:48px;max-height:180px;
  align-self:start;box-sizing:border-box;margin:0;padding:2px 8px;
  font-size:16px;font-weight:400;line-height:24px;
}
body:is(.started,:not(.started)):not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill .ph-chime {
  left:20px!important;top:18px;transform:none;max-width:calc(100% - 40px);font-size:16px;font-weight:400;
}
body:is(.started,:not(.started)):not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill .addwrap {grid-column:1;grid-row:2;align-self:center}
body:not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill .fast {display:none!important}
body:is(.started,:not(.started)):not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill #voiceBtn {grid-column:4;grid-row:2;align-self:center}
body:is(.started,:not(.started)):not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill :is(#addBtn,#voiceBtn) {width:40px;height:40px;font-size:24px}
body:is(.started,:not(.started)):not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill :is(#addBtn,#voiceBtn) svg {width:24px;height:24px}
/* Match the reference's visible glyphs, not only their button hit areas.
   The Plus path has larger internal margins than the microphone path. */
body:is(.started,:not(.started)):not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill #addBtn svg {width:26px;height:26px}
body:is(.started,:not(.started)):not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill #send :is(.send-voice,.send-arrow) {width:24px!important;height:24px!important}
body:is(.started,:not(.started)):not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill #send {
  grid-column:5;grid-row:2;align-self:center;width:36px;height:36px;border-radius:50%;
  background:#fff!important;color:#000!important;
}
/* Keep every voice/send state monochrome in both themes. */
body:not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill #send svg {fill:#000!important;stroke:none!important;color:#000!important}
body:not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill #send :is(.send-voice-wave,.send-voice-coin) {filter:brightness(0)!important}
html[data-theme="light"] body:is(.started,:not(.started)):not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill {
  background:#fff!important;box-shadow:0 0 0 1px rgba(30,40,55,.09),0 6px 24px rgba(30,40,55,.06);
}
html[data-theme="light"] body:is(.started,:not(.started)):not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill::before {background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
@media(max-width:520px){
  body:is(.started,:not(.started)):not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill {grid-template-columns:40px minmax(0,1fr) auto 40px 40px;column-gap:4px;border-radius:24px}
}
/* The same saved optics as Analytics, without its compact layout overrides. */
html[data-theme] body:is(.started,:not(.started)):not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill {
  background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:0;z-index:0;
}
html[data-theme] body:is(.started,:not(.started)):not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill::before {
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-2!important;pointer-events:none;
  background:var(--composer-custom-background,#ffffff00)!important;opacity:var(--composer-custom-opacity,1);
  backdrop-filter:blur(var(--composer-blur,4.9px)) saturate(1.12)!important;
  -webkit-backdrop-filter:blur(var(--composer-blur,4.9px)) saturate(1.12)!important;
  box-shadow:none;
}
html[data-theme] body:is(.started,:not(.started)):not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill::after {
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1!important;pointer-events:none;
  background:transparent!important;border:0;padding:0;mask:none!important;-webkit-mask:none!important;
  backdrop-filter:var(--analytics-lens,blur(4.9px));-webkit-backdrop-filter:var(--analytics-lens,blur(4.9px));
}
body:not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .composer .analytics-chat-rim {
  position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;padding:1px;opacity:var(--composer-rim-alpha,1);
  background:radial-gradient(ellipse at var(--glass-x,8%) var(--glass-y,12%),rgba(255,255,255,.52),transparent 48%),radial-gradient(ellipse at var(--glass-reflect-x,95%) var(--glass-reflect-y,92%),rgba(255,255,255,.22),transparent 46%),rgba(255,255,255,.075);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}
html[data-theme="light"] body:not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .composer .analytics-chat-rim {
  background:radial-gradient(ellipse at var(--glass-x,8%) var(--glass-y,12%),rgba(255,255,255,.98),transparent 60%),radial-gradient(ellipse at var(--glass-reflect-x,95%) var(--glass-reflect-y,92%),rgba(93,110,135,.28),transparent 58%),rgba(255,255,255,.40);
}
@media(prefers-reduced-transparency:reduce){
  html[data-theme] body:is(.started,:not(.started)):not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill::before {background:var(--sf-surface,#121212)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;opacity:1}
  html[data-theme] body:is(.started,:not(.started)):not(.shopify):not(.email-campaign-mode):is(:not([data-view]),[data-view="home"]) .main > .composer .pill::after {backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}