/*
  Nifftly Smart Rail

  Presentation-only composer treatment shared by the signed-in app, the
  logged-out home page, the interactive demo, and the How it works preview.
  Existing controls, browser semantics, and JavaScript event bindings remain
  in their owning HTML files.
*/

:root{
  --smart-rail-line:#dfe2e7;
  --smart-rail-soft:#f7f8fa;
  --smart-rail-ink:#15171b;
  --smart-rail-chat:#ffe140;
  --smart-rail-agent:#ef2b8f;
  --smart-rail-cite:#1787ed;
  --smart-rail-auto:#ff8b2b;
  --smart-rail-focus:#ef2b8f;
}

/* Some public pages do not otherwise define this utility. Keep control labels
   available to assistive technology without letting them consume rail space. */
.mode-select-control .sr-only,.demo-mode-select .sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* The rail itself is deliberately unfilled. Each white control is a tab that
   sits directly above the composer visual, instead of becoming a colored
   toolbar. Color is reserved for the compact state checks. */
.modebar{
  width:100%;
  max-width:760px;
  display:flex !important;
  gap:3px !important;
  align-items:stretch;
  min-height:42px;
  margin:0 auto -1px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-family:var(--sans,Arial,sans-serif) !important;
}
/* The live rail and its input must share one exact outer edge. The home page
   formerly kept a narrower composer than its 760px rail. */
.modebar,.modebar + .composer{
  width:100% !important;
  max-width:760px !important;
  box-sizing:border-box !important;
}
.modebar + .composer{margin-left:auto !important;margin-right:auto !important;}
.modebar .mb-spacer{display:none !important;}
.modebar #modeChat{order:1;}
.modebar #modeAgent{order:2;}
.modebar #citeToggle,.modebar #landingCite{order:3;}
.modebar #suggestionBudgetButton,.modebar #landingBudget{order:4;}
.modebar #modelSuggestToggle,.modebar #landingSuggest{order:5;}
.modebar .mb-effort{order:6;}
.modebar .modelbar,.modebar .landing-model{order:7;}
.modebar .mb-note{display:none !important;}

.modebar .mb-btn{
  box-sizing:border-box;
  position:relative;
  min-width:0;
  min-height:42px;
  border:1px solid var(--smart-rail-line) !important;
  border-bottom:0 !important;
  border-radius:12px 12px 0 0 !important;
  background:#fff !important;
  color:var(--smart-rail-ink) !important;
  font:400 calc(13px + 0.5pt)/1 var(--sans,Arial,sans-serif) !important;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.modebar .mb-btn:hover{position:relative;z-index:1;border-color:#b8bec8 !important;background:#fff !important;}
.modebar .mb-btn:focus-visible,.demo-modebar button:focus-visible,.preview-controls select:focus-visible{outline:3px solid rgba(239,43,143,.22);outline-offset:2px;}

/* Chat and Agent deliberately touch to communicate a mutually exclusive
   choice. Their selected state remains white; the small corner check carries
   the selected color. */
.modebar #modeChat,.modebar #modeAgent{flex:0 0 62px;width:62px !important;padding:0 5px !important;justify-content:center !important;gap:4px !important;white-space:nowrap;}
.modebar #modeChat{border-radius:14px 0 0 0 !important;border-right:0 !important;}
.modebar #modeAgent{border-radius:0 14px 0 0 !important;}
.modebar #modeChat[aria-pressed="true"]::before,.modebar #modeAgent[aria-pressed="true"]::before,.demo-modebar .mode-btn[aria-pressed="true"]::before,.preview-controls .preview-mode.on::before{
  content:"✓";
  position:absolute;
  z-index:2;
  top:-6px;
  left:-4px;
  display:grid;
  width:14px;
  height:14px;
  place-items:center;
  border:1.5px solid #14161a;
  border-radius:4px;
  color:#14161a;
  font:700 calc(10px + 0.5pt)/1 Arial,sans-serif;
}
.modebar #modeChat[aria-pressed="true"]::before,.demo-modebar #demoChat[aria-pressed="true"]::before,.preview-controls .preview-mode.on::before{background:var(--smart-rail-chat);}
.modebar #modeAgent[aria-pressed="true"]::before,.demo-modebar #demoAgent[aria-pressed="true"]::before{background:var(--smart-rail-agent);}
.modebar .mb-btn.on{background:#fff !important;color:var(--smart-rail-ink) !important;box-shadow:none !important;}

/* Cite, budget, and automatic model selection stay icon-only. The real
   checkbox becomes the upper-left state marker. The model picker intentionally
   has no checkbox. */
.modebar #citeToggle,.modebar #landingCite{padding:0 !important;justify-content:center !important;}
.modebar .icon-toggle{flex:1 1 0;width:auto !important;height:42px !important;min-width:0;min-height:42px !important;padding:0 !important;justify-content:center !important;}
.modebar .icon-toggle .cite-checkbox,.demo-modebar .demo-icon .cite-checkbox,.preview-controls .preview-icon .cite-checkbox{
  top:-6px !important;
  right:auto !important;
  bottom:auto !important;
  left:-4px !important;
  display:grid !important;
  width:14px !important;
  height:14px !important;
  place-items:center !important;
  border:1.5px solid #14161a !important;
  border-radius:4px !important;
  background:#fff !important;
  color:transparent !important;
}
.modebar .icon-toggle .cite-checkbox svg,.demo-modebar .demo-icon .cite-checkbox svg,.preview-controls .preview-icon .cite-checkbox svg{width:10px !important;height:10px !important;}
.modebar #citeToggle::after,.modebar #landingCite::after{content:none !important;}
.modebar #citeToggle[aria-checked="true"] .cite-checkbox,.modebar #landingCite[aria-checked="true"] .cite-checkbox{background:var(--smart-rail-cite) !important;color:#fff !important;}
.modebar #modelSuggestToggle[aria-checked="true"] .cite-checkbox,.modebar #landingSuggest[aria-checked="true"] .cite-checkbox{background:var(--smart-rail-auto) !important;color:#14161a !important;}
.modebar .icon-toggle.is-capped{background:#fff !important;color:var(--smart-rail-ink) !important;border-color:var(--smart-rail-line) !important;}
.modebar .icon-toggle .cube-mark{width:23px !important;height:23px !important;}

/* Model selection is its own unadorned white block, always at the far right. */
.modebar .modelbar,.modebar .landing-model{
  flex:0 1 200px;
  width:auto !important;
  min-width:0;
  min-height:42px;
  margin:0 !important;
  padding:0 !important;
  border:1px solid var(--smart-rail-line) !important;
  border-bottom:0 !important;
  border-radius:14px 14px 0 0 !important;
  background:#fff !important;
}
.modebar .modelbar .selwrap,.modebar .landing-model{width:100%;height:100%;}
.modebar .modelbar select,.modebar .landing-model select{width:100% !important;min-width:0;min-height:41px;border:0 !important;border-radius:13px 13px 0 0 !important;background:#fff !important;padding:7px 28px 7px 10px !important;color:var(--smart-rail-ink) !important;font:400 calc(13px + 0.5pt)/1 var(--sans,Arial,sans-serif) !important;text-overflow:ellipsis;}
.modebar .modelbar .selwrap::after{right:12px;}

/* Agent effort is only present in Agent mode. When it appears, it occupies
   the same connected top rail as the rest of the composer controls. */
.modebar .mb-effort{display:none;flex:1 1 0;min-width:0;}

/* The prompt field completes the rail as one connected composer. Supporting
   disclosure and selected-file content remain below it so the controls never
   compete with the message entry surface. */
.composer-wrap > .composer + .ai-disc{margin-top:8px;}
.composer-wrap > .attachment-list{margin-top:8px;}
.modebar .mb-effort.on{display:grid;position:relative;min-width:0;min-height:42px;place-items:center;margin:0;padding:0;border:1px solid var(--smart-rail-line);border-bottom:0;border-radius:12px 12px 0 0;background:#fff;color:var(--smart-rail-ink);}
.modebar .mb-effort.on label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.modebar .mb-effort .effort-icon,.demo-modebar .demo-effort .effort-icon{display:grid;width:18px;height:18px;place-items:center;pointer-events:none;}
.modebar .mb-effort .effort-icon svg,.demo-modebar .demo-effort .effort-icon svg{width:17px;height:17px;}
.modebar .mb-effort.on select{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
.modebar .mb-effort.on:focus-within{z-index:2;border-color:var(--smart-rail-focus);box-shadow:0 0 0 3px rgba(239,43,143,.13);}
.modebar .mb-note{display:none;min-width:0;color:var(--muted,#6b7280);font:400 calc(12px + 0.5pt)/1.35 var(--sans,Arial,sans-serif);}
.modebar .mb-note:not(:empty){display:none !important;}

/* The composer keeps the same monochrome geometry beneath the rail. */
.composer{border-color:var(--smart-rail-line) !important;border-radius:0 0 26px 26px !important;background:#fff !important;box-shadow:0 10px 28px rgba(17,24,39,.06);padding:5px 6px 5px 10px !important;align-items:center !important;gap:6px !important;font-family:var(--sans,Arial,sans-serif) !important;}
.composer textarea,.composer input{font-family:var(--sans,Arial,sans-serif) !important;font-size:calc(14px + 0.5pt) !important;line-height:1.35 !important;}
.composer textarea{padding:6px 0 !important;}
.composer:focus-within{border-color:var(--smart-rail-line) !important;box-shadow:0 10px 28px rgba(17,24,39,.06) !important;}
.attach-btn,.composer .attach,.demo-attach{width:32px !important;height:32px !important;border-radius:9px !important;display:grid;place-items:center;color:#5d6470;flex:none;}
.attach-btn svg,.composer .attach svg,.demo-attach svg{width:16px !important;height:16px !important;}
.attach-btn:hover,.composer .attach:hover{background:var(--smart-rail-soft) !important;}
.send-btn,.composer .send{width:34px !important;height:34px !important;border-radius:10px !important;background:var(--smart-rail-chat) !important;color:var(--smart-rail-ink) !important;box-shadow:0 4px 12px rgba(242,207,35,.28);}
.send-btn svg,.composer .send svg{width:16px !important;height:16px !important;}
.send-btn:disabled{background:#eceef1 !important;color:#9ba1aa !important;box-shadow:none;}

/* Interactive demo: the model block lives in this same rail so it is not a
   detached second toolbar. */
.demo-modebar{display:flex !important;width:calc(100% - 28px) !important;box-sizing:border-box !important;gap:3px !important;align-items:stretch;margin:9px auto -1px !important;padding:0 !important;min-height:42px;border:0 !important;background:transparent !important;box-shadow:none !important;font-family:var(--sans,Arial,sans-serif) !important;}
.demo-modebar .demo-spacer{display:none !important;}
.demo-modebar #demoChat{order:1;flex:0 0 52px;}
.demo-modebar #demoAgent{order:2;flex:0 0 52px;}
.demo-modebar #demoCite{order:3;}
.demo-modebar #demoBudget{order:4;}
.demo-modebar #demoSuggest{order:5;}
.demo-modebar .demo-effort{order:6;}
.demo-modebar .demo-model{order:7;}
.demo-modebar .mode-btn,.demo-modebar .demo-icon,.demo-modebar .demo-model{position:relative;min-height:40px;border:1px solid var(--smart-rail-line) !important;border-bottom:0 !important;border-radius:11px 11px 0 0 !important;background:#fff !important;color:var(--smart-rail-ink) !important;}
.demo-modebar .mode-btn{width:52px !important;padding:5px 4px !important;font:400 calc(11px + 0.5pt)/1 var(--sans,Arial,sans-serif) !important;white-space:nowrap;}
.demo-modebar #demoChat{border-radius:13px 0 0 0 !important;border-right:0 !important;}
.demo-modebar #demoAgent{border-radius:0 13px 0 0 !important;}
.demo-modebar .mode-btn.on{background:#fff !important;color:var(--smart-rail-ink) !important;}
.demo-modebar .demo-icon{flex:1 1 0;width:auto !important;min-width:0;height:40px !important;padding:0 !important;}
.demo-modebar #demoCite{width:auto !important;display:inline-flex;align-items:center;justify-content:center;padding:0 !important;}
.demo-modebar #demoCite::after{content:none !important;}
.demo-modebar #demoCite[aria-checked="true"] .cite-checkbox{background:var(--smart-rail-cite) !important;color:#fff !important;}
.demo-modebar #demoSuggest[aria-checked="true"] .cite-checkbox{background:var(--smart-rail-auto) !important;color:#14161a !important;}
.demo-modebar .demo-effort{display:none;flex:1 1 0;min-width:0;}
.demo-modebar .demo-effort.on{display:grid;position:relative;min-height:40px;place-items:center;margin:0;padding:0;border:1px solid var(--smart-rail-line);border-bottom:0;border-radius:11px 11px 0 0;background:#fff;color:var(--smart-rail-ink);}
.demo-modebar .demo-effort.on label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.demo-modebar .demo-effort.on select{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
.demo-modebar .demo-model{flex:0 1 170px;min-width:0;margin:0 !important;padding:0 !important;}
.demo-modebar .demo-model label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.demo-modebar .demo-model select{width:100%;min-width:0;min-height:39px;border:0 !important;border-radius:10px 10px 0 0 !important;background:#fff !important;padding:6px 7px !important;color:var(--smart-rail-ink) !important;font:400 calc(11px + 0.5pt)/1 var(--sans,Arial,sans-serif) !important;text-overflow:ellipsis;}
.demo-modebar .demo-model .cost{display:none;}
.demo .composer,.frame .composer{width:calc(100% - 28px) !important;box-sizing:border-box !important;margin:6px auto 14px !important;border-radius:0 0 22px 22px !important;}
.demo-attach{margin-left:1px;}
.demo-attach svg{width:16px !important;height:16px !important;}

/* Static How it works preview follows the exact same hierarchy. */
.preview-controls{display:flex !important;gap:3px !important;align-items:stretch;min-height:40px;padding:0 !important;margin:0 0 -1px !important;border:0 !important;background:transparent !important;box-shadow:none !important;font-family:var(--sans,Arial,sans-serif) !important;}
.preview-controls .preview-mode,.preview-controls .preview-icon,.preview-controls .preview-model{position:relative;min-height:40px;border:1px solid var(--smart-rail-line) !important;border-bottom:0 !important;border-radius:11px 11px 0 0 !important;background:#fff !important;color:var(--smart-rail-ink) !important;}
.preview-controls .preview-mode{flex:0 0 60px;display:inline-flex;align-items:center;justify-content:center;padding:0 7px;font:400 calc(11.5px + 0.5pt)/1 var(--sans,Arial,sans-serif);white-space:nowrap;}
.preview-controls .preview-mode:first-child{border-radius:13px 0 0 0 !important;border-right:0 !important;}
.preview-controls .preview-mode:nth-child(2){border-radius:0 13px 0 0 !important;}
.preview-controls .preview-mode.on{background:#fff !important;color:var(--smart-rail-ink) !important;}
.preview-controls .control-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.preview-controls .preview-icon{flex:1 1 0;width:auto !important;min-width:0;height:40px !important;padding:0 !important;display:inline-flex;align-items:center;justify-content:center;}
.preview-controls .preview-icon[title^="Cite"]{width:auto !important;padding:0 !important;}
.preview-controls .preview-icon[title^="Cite"]::after{content:none !important;}
.preview-controls .preview-icon[title^="Cite"] .cite-checkbox{background:var(--smart-rail-cite) !important;color:#fff !important;}
.preview-controls .preview-icon[title^="Model"] .cite-checkbox{background:#fff !important;color:transparent !important;}
.preview-controls .preview-model{flex:0 1 170px;display:flex;min-width:0;align-items:center;margin:0 !important;padding:0 !important;}
.preview-controls .preview-model label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.preview-controls .preview-model select{width:100%;min-width:0;min-height:39px;border:0 !important;border-radius:10px 10px 0 0 !important;background:#fff !important;padding:6px 7px !important;color:var(--smart-rail-ink) !important;font:400 calc(11px + 0.5pt)/1 var(--sans,Arial,sans-serif) !important;text-overflow:ellipsis;}
.preview-controls .preview-model .cost{display:none;}
.preview-composer{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 12px;border:1px solid var(--smart-rail-line);border-radius:0 0 22px 22px;background:#fff;box-shadow:0 7px 18px rgba(17,24,39,.05);color:var(--muted);font:400 calc(13px + 0.5pt)/1.25 var(--sans,Arial,sans-serif);}
.preview-composer .preview-prompt{flex:1;min-width:0;}
.preview-composer .preview-send{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--smart-rail-chat);color:var(--smart-rail-ink);flex:none;}
.preview-composer svg{width:18px;height:18px;}

@media(max-width:720px){
  .modebar{gap:2px !important;}
  .modebar #modeChat,.modebar #modeAgent{flex-basis:50px;width:50px !important;font-size:calc(10px + 0.5pt) !important;}
  .modebar .mb-btn,.modebar .icon-toggle{min-height:38px;height:38px !important;}
  .modebar .icon-toggle{width:auto !important;}
  .modebar .modelbar,.modebar .landing-model{flex-basis:132px;min-height:38px;}
  .modebar .modelbar select,.modebar .landing-model select{min-height:37px;padding:6px 21px 6px 6px !important;font-size:calc(11px + 0.5pt) !important;}
  .modebar .modelbar .selwrap::after{right:8px;}
  .modebar .mb-effort.on{min-height:38px;padding:0;}
  .demo-modebar,.preview-controls{gap:2px !important;}
  .demo-modebar #demoChat,.demo-modebar #demoAgent{flex-basis:48px;}
  .demo-modebar .demo-model{flex-basis:118px;}
  .preview-controls .preview-mode{flex-basis:56px;}
  .preview-controls .preview-model{flex-basis:118px;}
  .demo-modebar .mode-btn{width:48px !important;font-size:calc(10px + 0.5pt) !important;}
  .demo-modebar .demo-icon,.preview-controls .preview-icon{width:auto !important;min-height:38px;height:38px !important;}
  .demo-modebar #demoCite,.preview-controls .preview-icon[title^="Cite"]{width:auto !important;padding:0 !important;}
  .demo-modebar .demo-effort.on{min-height:38px;padding:0;}
  .demo-modebar .demo-model select,.preview-controls .preview-model select{min-height:37px;padding:6px 5px !important;font-size:calc(10.5px + 0.5pt) !important;}
  .demo .composer,.frame .composer{margin-top:5px !important;}
}

@media(max-width:380px){
  .modebar #modeChat,.modebar #modeAgent{flex-basis:48px;width:48px !important;font-size:calc(10px + 0.5pt) !important;}
  .modebar .modelbar,.modebar .landing-model{flex-basis:104px;}
  .modebar .icon-toggle,.modebar #citeToggle,.modebar #landingCite{width:auto !important;}
  .demo-modebar #demoChat,.demo-modebar #demoAgent{flex-basis:46px;}
  .demo-modebar .mode-btn{width:46px !important;}
  .demo-modebar .demo-model{flex-basis:104px;}
  .preview-controls .preview-mode{flex-basis:52px;}
  .preview-controls .preview-model{flex-basis:104px;}
}

@media(max-width:340px){
  .modebar #modeChat,.modebar #modeAgent{flex-basis:44px;width:44px !important;font-size:calc(9px + 0.5pt) !important;gap:2px !important;}
  .modebar #modeChat svg,.modebar #modeAgent svg{width:14px;height:14px;}
  .modebar #citeToggle,.modebar #landingCite,.modebar .icon-toggle{width:auto !important;}
  .modebar .modelbar,.modebar .landing-model{flex-basis:90px;}
  .modebar .modelbar select,.modebar .landing-model select{font-size:calc(9px + 0.5pt) !important;padding-left:4px !important;padding-right:14px !important;}
  .modebar .mb-effort.on{padding:0;}
  .demo-modebar #demoChat,.demo-modebar #demoAgent{flex-basis:42px;}
  .demo-modebar .mode-btn{width:42px !important;font-size:calc(9px + 0.5pt) !important;}
  .demo-modebar .demo-model{flex-basis:88px;}
  .preview-controls .preview-mode{flex-basis:48px;}
  .preview-controls .preview-model{flex-basis:88px;}
  .demo-modebar #demoCite{width:auto !important;}
  .demo-modebar .demo-effort.on{padding:0;}
}

/* The legacy native rules predate the compact rail and intentionally placed
   the model and effort controls on separate rows. Keep the remote Capacitor
   page on the same stable flex rail without changing its native detection. */
html.native .modebar{display:flex !important;align-items:stretch !important;gap:2px !important;}
html.native .modebar .landing-model,html.native .modebar .mb-effort.on{
  grid-column:auto !important;
  grid-row:auto !important;
  width:auto !important;
}

/* Signed-in app simplification. Keep the established shared rail on public
   previews, while the live composer exposes only mode, model, and settings. */
.composer-wrap .modebar{
  position:relative;
  display:flex !important;
  align-items:stretch;
  gap:6px !important;
  min-height:42px;
}
.composer-wrap .modebar > [hidden]{display:none !important;}
.mode-select-control{
  position:relative;
  flex:0 0 108px;
  min-width:0;
  border:1px solid var(--smart-rail-line);
  border-bottom:0;
  border-radius:14px 14px 0 0;
  background:#fff;
}
.mode-select-control::after,.composer-wrap .modebar .modelbar .selwrap::after{
  pointer-events:none;
}
.mode-select-control select{
  width:100%;
  height:41px;
  border:0;
  border-radius:13px 13px 0 0;
  background:#fff;
  color:var(--smart-rail-ink);
  padding:0 28px 0 12px;
  font:400 calc(13px + 0.5pt)/1 var(--sans,Arial,sans-serif);
  cursor:pointer;
}
.composer-wrap .modebar .modelbar{
  order:4;
  flex:0 1 220px;
  max-width:none;
}
.composer-settings{position:relative;flex:0 0 42px;}
.composer-settings > summary{
  box-sizing:border-box;
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  list-style:none;
  border:1px solid var(--smart-rail-line);
  border-bottom:0;
  border-radius:14px 14px 0 0;
  background:#fff;
  color:var(--smart-rail-ink);
  cursor:pointer;
}
.composer-settings > summary::-webkit-details-marker{display:none;}
.composer-settings > summary svg{width:18px;height:18px;}
.composer-settings[open] > summary,.composer-settings > summary:hover{background:var(--smart-rail-soft);border-color:#b8bec8;}
.mode-select-control:focus-within,.composer-settings > summary:focus-visible{z-index:2;outline:3px solid rgba(239,43,143,.18);outline-offset:2px;}
.composer-settings-panel{
  position:absolute;
  right:0;
  bottom:calc(100% + 9px);
  z-index:40;
  width:min(310px,calc(100vw - 36px));
  box-sizing:border-box;
  padding:6px;
  border:1px solid var(--smart-rail-line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 16px 38px rgba(17,24,39,.16);
}
.composer-setting-row{
  box-sizing:border-box;
  display:flex;
  width:100%;
  min-height:54px;
  align-items:center;
  gap:12px;
  padding:9px 10px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--smart-rail-ink);
  text-align:left;
  font-family:var(--sans,Arial,sans-serif);
  cursor:pointer;
}
.composer-setting-row:hover{background:var(--smart-rail-soft);}
.composer-setting-row > span:first-child{flex:1;min-width:0;}
.composer-setting-row b{display:block;font-size:calc(13px + 0.5pt);font-weight:500;line-height:1.25;}
.composer-setting-row small{display:block;margin-top:2px;color:#747b86;font-size:calc(11.5px + 0.5pt);line-height:1.3;}
.setting-switch{box-sizing:border-box;display:block;width:32px;height:18px;flex:none;padding:2px;border-radius:999px;background:#d9dde3;}
.setting-switch i{display:block;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .15s ease;}
.composer-setting-row[aria-checked="true"] .setting-switch{background:#1787ed;}
.composer-setting-row[aria-checked="true"] .setting-switch i{transform:translateX(14px);}
.setting-arrow{flex:none;color:#747b86;font-size:calc(22px + 0.5pt);line-height:1;}
.composer-settings .mb-effort{display:none;}
.composer-settings .mb-effort.on{
  position:static;
  display:flex;
  min-height:54px;
  margin:0;
  padding:9px 10px;
  border:0;
  border-radius:10px;
}
.composer-settings .mb-effort.on select{
  position:static;
  inset:auto;
  width:auto;
  height:32px;
  max-width:110px;
  opacity:1;
  padding:0 24px 0 8px;
  border:1px solid var(--smart-rail-line);
  border-radius:8px;
  background:#fff;
  color:var(--smart-rail-ink);
  cursor:pointer;
}

@media(max-width:720px){
  .composer-wrap .modebar{gap:4px !important;}
  .mode-select-control{flex-basis:82px;}
  .mode-select-control select{height:37px;padding-left:9px;padding-right:20px;font-size:calc(11.5px + 0.5pt);}
  .composer-settings{flex-basis:38px;}
  .composer-settings > summary{width:38px;height:38px;}
  .composer-settings-panel{right:-2px;}
}

/* Progressive disclosure: one compact mode selector, one model picker, and
   one settings entry point. This overrides the earlier multi-button rail on
   every public composer surface without changing each page's event handlers. */
.modebar .mode-select-control{order:1;}
.modebar .landing-model{order:2;flex:1 1 auto;max-width:none;}
.modebar .composer-settings{order:3;}
.modebar .composer-settings-panel{bottom:calc(100% + 9px);}
.modebar .composer-settings .mb-effort{display:none;}
.modebar .composer-settings .mb-effort.on{display:flex;}

.demo-modebar{position:relative;}
.demo-modebar > [hidden]{display:none !important;}
.demo-mode-select{
  order:1;
  position:relative;
  flex:0 0 78px;
  min-width:0;
  border:1px solid var(--smart-rail-line);
  border-bottom:0;
  border-radius:13px 13px 0 0;
  background:#fff;
}
.demo-mode-select select{
  width:100%;
  height:40px;
  border:0;
  border-radius:12px 12px 0 0;
  background:#fff;
  color:var(--smart-rail-ink);
  padding:0 19px 0 9px;
  font:400 calc(11px + 0.5pt)/1 var(--sans,Arial,sans-serif);
  cursor:pointer;
}
.demo-modebar .demo-model{order:2;flex:1 1 auto;max-width:none;}
.demo-settings{order:3;position:relative;flex:0 0 40px;}
.demo-settings > summary{
  display:grid;
  width:40px;
  height:40px;
  box-sizing:border-box;
  place-items:center;
  list-style:none;
  border:1px solid var(--smart-rail-line);
  border-bottom:0;
  border-radius:11px 11px 0 0;
  background:#fff;
  color:var(--smart-rail-ink);
  cursor:pointer;
}
.demo-settings > summary::-webkit-details-marker{display:none;}
.demo-settings > summary svg{width:17px;height:17px;}
.demo-settings > summary:hover,.demo-settings[open] > summary{background:var(--smart-rail-soft);border-color:#b8bec8;}
.demo-settings-panel{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:40;
  width:min(296px,calc(100vw - 36px));
  padding:6px;
  box-sizing:border-box;
  border:1px solid var(--smart-rail-line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 16px 38px rgba(17,24,39,.16);
}
.demo-settings .demo-effort{display:none;}
.demo-settings .demo-effort.on{display:flex;min-height:54px;margin:0;padding:9px 10px;border:0;border-radius:10px;}
.demo-settings .demo-effort select{position:static;inset:auto;width:auto;height:32px;opacity:1;padding:0 24px 0 8px;border:1px solid var(--smart-rail-line);border-radius:8px;background:#fff;color:var(--smart-rail-ink);cursor:pointer;}

.preview-controls .preview-mode{flex:0 0 72px;gap:3px;border-radius:13px 13px 0 0 !important;border-right:1px solid var(--smart-rail-line) !important;}
.preview-controls .preview-mode::before{display:none !important;}
.preview-controls .preview-mode svg{width:14px;height:14px;}
.preview-controls .preview-model{flex:1 1 auto;max-width:none;}
.preview-controls .preview-icon{flex:0 0 40px;width:40px !important;}
.preview-controls .preview-icon[title^="Chat"]{padding:0 !important;}

@media(max-width:720px){
  .modebar .mode-select-control{flex-basis:78px;}
  .demo-mode-select{flex-basis:72px;}
  .demo-settings{flex-basis:38px;}
  .demo-settings > summary{width:38px;height:38px;}
  .preview-controls .preview-mode{flex-basis:66px;}
  .preview-controls .preview-icon{flex-basis:38px;width:38px !important;}
}

/* Composer flow shared by the signed-in chat, home page, demo, and product
   preview. It follows one predictable sequence: message field, then add,
   settings, mode, model, and send. The controls stay in a single rail and
   never change width when Chat or Agent is selected. */
.composer-wrap{display:flex;flex-direction:column;}
.composer-wrap > .composer{order:1;min-height:90px;margin-bottom:0 !important;padding:14px 16px !important;border-radius:22px 22px 0 0 !important;align-items:stretch !important;}
.composer-wrap > .composer textarea{width:100%;min-height:58px;padding:0 !important;font-size:calc(15px + 0.5pt) !important;line-height:1.45 !important;}
.composer-wrap > .modebar{order:2;width:100%;max-width:760px;min-height:50px;margin:0 auto 8px !important;padding:6px !important;display:flex !important;align-items:center;gap:7px !important;border:1px solid var(--smart-rail-line) !important;border-top:0 !important;border-radius:0 0 22px 22px !important;background:#fff !important;box-shadow:0 10px 28px rgba(17,24,39,.06) !important;}
.composer-wrap > .ai-disc,.composer-wrap > .attachment-list{order:3;}
.composer-wrap > .composer-disclosure{margin:8px auto 0;max-width:760px;text-align:center;}

.modebar > .attach-btn,.modebar > .attach{order:1;flex:0 0 38px;width:38px !important;height:38px !important;margin:0 !important;padding:0 !important;border:1px solid var(--smart-rail-line) !important;border-radius:50% !important;background:#fff !important;color:#525967 !important;box-shadow:0 2px 4px rgba(17,24,39,.05);}
.modebar > .composer-settings{order:2;position:static;flex:0 0 auto;}
.modebar > .mode-select-control{order:3;position:relative;flex:0 0 78px;min-width:0;height:38px;border:1px solid var(--smart-rail-line);border-radius:999px;background:#fff;}
.modebar > .mode-select-control select{width:100%;height:100%;border:0;border-radius:999px;background:#fff;color:var(--smart-rail-ink);padding:0 22px 0 10px;font:400 calc(12.5px + 0.5pt)/1 var(--sans,Arial,sans-serif);}
.modebar > .modelbar,.modebar > .landing-model{order:4;flex:0 1 220px;min-width:116px;min-height:38px;margin-left:auto !important;border:1px solid var(--smart-rail-line) !important;border-radius:999px !important;background:#fff !important;}
.modebar > .modelbar .selwrap,.modebar > .landing-model{height:38px;}
.modebar > .modelbar select,.modebar > .landing-model select{height:38px;min-height:38px;border-radius:999px !important;padding:0 28px 0 12px !important;font-size:calc(12.5px + 0.5pt) !important;}
.modebar > .send-btn,.modebar > .send{order:5;flex:0 0 38px;width:38px !important;height:38px !important;margin:0 !important;padding:0 !important;border-radius:50% !important;background:var(--smart-rail-chat) !important;color:#17181b !important;box-shadow:0 4px 12px rgba(242,207,35,.28) !important;}
.modebar > .send-btn svg,.modebar > .send svg{width:17px !important;height:17px !important;}
.composer-settings > summary{display:flex !important;width:auto !important;height:38px !important;min-height:38px;padding:0 10px !important;align-items:center;gap:5px;border:1px solid var(--smart-rail-line) !important;border-radius:999px !important;background:#fff !important;color:var(--smart-rail-ink);font:400 calc(12.5px + 0.5pt)/1 var(--sans,Arial,sans-serif);}
.composer-settings > summary svg{width:15px;height:15px;flex:none;}
.composer-settings > summary .composer-menu-caret{width:13px;height:13px;}
.modebar .composer-settings-panel{right:auto;left:0;bottom:calc(100% + 9px);max-width:100%;max-height:min(360px,50dvh);overflow-y:auto;overscroll-behavior:contain;}
.modebar{position:relative;}
.frame > .top{order:1;min-height:70px;padding-top:26px;}
.frame > .thread{order:2;}
.frame > .composer{order:3;width:calc(100% - 28px);box-sizing:border-box;}
.frame > .demo-modebar{order:4;}
.frame > .live{top:8px;}
.preview:has(> .preview-controls){display:flex;flex-direction:column;}
.preview > .preview-bar{order:1;}
.preview > .pmsg{order:2;}
.preview > .preview-composer{order:3;}
.preview > .preview-controls{order:4;}
.preview > .pcredits{order:5;}
.modebar > .mode-select-control select,.demo-mode-select select{appearance:none;padding-right:18px;}
.mode-select-control::after,.demo-mode-select::after{content:"";position:absolute;right:9px;top:50%;width:5px;height:5px;margin-top:-4px;border:solid #747b86;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);pointer-events:none;}
.modebar .modelbar .selwrap,.modebar .landing-model,.demo-model,.preview-model{position:relative;}
.model-active-marker{position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:1;width:8px;height:8px;border-radius:50%;background:#007fff;pointer-events:none;}
.model-active-label{position:absolute;left:28px;right:27px;top:50%;transform:translateY(-50%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--smart-rail-ink);font:400 calc(12.5px + 0.5pt)/1.4 var(--sans,Arial,sans-serif);}
.modebar > .modelbar select,.modebar > .landing-model select,.demo-modebar .demo-model select,.preview-controls .preview-model select{color:transparent !important;}
.modebar select option,.demo-model select option,.preview-model select option{color:var(--smart-rail-ink);}
.modebar select option:disabled{color:#9499a2;}
.model-active-marker.is-suggested{width:12px;height:12px;left:10px;border-radius:0;background:#ee0c8d;clip-path:path('M6 11C5 10 0 7 0 3.5C0 0 4 -1 6 2C8 -1 12 0 12 3.5C12 7 7 10 6 11Z');}
.modebar > .modelbar select,.modebar > .landing-model select,.demo-modebar .demo-model select,.preview-controls .preview-model select{padding-left:28px !important;}
.modebar > .attach svg,.modebar > .attach-btn svg,.demo-add svg,.preview-add svg{width:17px;height:17px;}
.modebar > [hidden]{display:none !important;}

/* The home surface uses the exact same visual order while keeping its native
   form submission and logged-out previews intact. */
.stage > .hero-logo,.stage > .greet{order:1;}
.stage > .composer{order:2;min-height:90px;margin:0 !important;padding:14px 16px !important;border-radius:22px 22px 0 0 !important;align-items:stretch !important;}
.stage > .composer textarea{width:100%;min-height:58px;padding:0 !important;font-size:calc(15px + 0.5pt) !important;line-height:1.45 !important;}
.stage > .modebar{order:3;min-height:50px;margin:0 0 14px !important;padding:6px !important;display:flex !important;align-items:center;gap:7px !important;border:1px solid var(--smart-rail-line) !important;border-top:0 !important;border-radius:0 0 22px 22px !important;background:#fff !important;box-shadow:0 10px 28px rgba(17,24,39,.06) !important;}
.stage > .free-note{order:4;margin:0 auto 12px;text-align:center;}
.stage > .chips{order:5;}

/* The static preview and interactive demo communicate the same menu flow. */
.demo-modebar{position:relative !important;display:flex !important;align-items:center !important;gap:7px !important;min-height:50px !important;width:calc(100% - 28px) !important;margin:0 auto 14px !important;padding:6px !important;border:1px solid var(--smart-rail-line) !important;border-top:0 !important;border-radius:0 0 20px 20px !important;background:#fff !important;box-shadow:0 8px 20px rgba(17,24,39,.06) !important;}
.demo-add,.preview-add{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border:1px solid var(--smart-rail-line);border-radius:50%;background:#fff;color:#4d5561;font:400 calc(28px + 0.5pt)/1 var(--sans,Arial,sans-serif);}
.demo-modebar .demo-settings{order:2;position:static;flex:0 0 auto;}.demo-modebar .demo-add{order:1;}.demo-modebar .demo-mode-select{order:3;flex:0 0 78px;height:38px;border:1px solid var(--smart-rail-line);border-radius:999px;}.demo-modebar .demo-mode-select select{height:38px;border-radius:999px;font-size:calc(12.5px + 0.5pt);padding:0 22px 0 10px;}.demo-modebar .demo-model{order:4;flex:0 1 200px;min-width:104px;min-height:38px;margin-left:auto !important;border:1px solid var(--smart-rail-line) !important;border-radius:999px !important;}.demo-modebar .demo-model select{height:38px;min-height:38px;border-radius:999px !important;padding:0 12px !important;font-size:calc(12.5px + 0.5pt) !important;}.demo-modebar .demo-send{order:5;display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:var(--smart-rail-chat);}
.demo-settings > summary{display:flex !important;width:auto !important;height:38px !important;padding:0 10px !important;align-items:center;gap:5px;border:1px solid var(--smart-rail-line) !important;border-radius:999px !important;background:#fff !important;color:var(--smart-rail-ink);font:400 calc(12.5px + 0.5pt)/1 var(--sans,Arial,sans-serif);}.demo-settings > summary svg{width:15px;height:15px;}.demo-settings > summary .composer-menu-caret{width:13px;height:13px;}.demo-settings-panel{right:auto !important;left:0;max-width:100%;max-height:min(360px,50dvh);overflow-y:auto;top:auto !important;bottom:calc(100% + 9px);}
.demo .composer,.frame .composer{min-height:74px !important;margin:0 auto !important;padding:14px 16px !important;border-radius:20px 20px 0 0 !important;align-items:flex-start !important;}.demo .composer .ph{font-size:calc(14px + 0.5pt) !important;}
.preview-composer{min-height:72px;margin:0 !important;padding:14px 16px !important;border-radius:20px 20px 0 0 !important;align-items:flex-start !important;}.preview-composer .preview-prompt{font-size:calc(13px + 0.5pt);}.preview-controls{position:relative !important;display:flex !important;align-items:center !important;gap:7px !important;min-height:50px !important;margin:0 0 12px !important;padding:6px !important;border:1px solid var(--smart-rail-line) !important;border-top:0 !important;border-radius:0 0 20px 20px !important;background:#fff !important;box-shadow:0 8px 20px rgba(17,24,39,.06) !important;}.preview-controls .preview-add{order:1;}.preview-controls .preview-settings{order:2;display:flex;align-items:center;gap:5px;height:38px;padding:0 10px;border:1px solid var(--smart-rail-line);border-radius:999px;color:var(--smart-rail-ink);font:400 calc(12px + 0.5pt)/1 var(--sans,Arial,sans-serif);}.preview-controls .preview-settings svg{width:15px;height:15px;}.preview-controls .preview-mode{order:3;flex:0 0 62px;min-height:38px;border:1px solid var(--smart-rail-line) !important;border-radius:999px !important;}.preview-controls .preview-model{order:4;flex:0 1 185px;min-height:38px;margin-left:auto !important;border:1px solid var(--smart-rail-line) !important;border-radius:999px !important;}.preview-controls .preview-model select{min-height:38px;border-radius:999px !important;font-size:calc(12px + 0.5pt) !important;}.preview-controls .preview-send{order:5;display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:var(--smart-rail-chat);color:#17181b;}.preview-controls .preview-send svg{width:16px;height:16px;}

@media(max-width:560px){
  .composer-wrap > .composer,.stage > .composer{min-height:78px;padding:11px 13px !important;}
  .composer-wrap > .composer textarea,.stage > .composer textarea{min-height:50px;font-size:calc(14px + 0.5pt) !important;}
  .composer-wrap > .modebar,.stage > .modebar{gap:5px !important;padding:5px !important;}
  .modebar > .attach-btn,.modebar > .attach,.modebar > .send-btn,.modebar > .send{flex-basis:36px;width:36px !important;height:36px !important;}
  .modebar > .mode-select-control{flex-basis:68px;height:36px;}.modebar > .mode-select-control select{font-size:calc(11.5px + 0.5pt);padding-left:8px;}
  .composer-settings > summary{height:36px !important;padding:0 8px !important;}.composer-settings > summary span{display:none;}
  .modebar > .modelbar,.modebar > .landing-model{min-width:96px;min-height:36px;}.modebar > .modelbar .selwrap,.modebar > .landing-model{height:36px;}.modebar > .modelbar select,.modebar > .landing-model select{height:36px;min-height:36px;font-size:calc(11.5px + 0.5pt) !important;padding-left:9px !important;}
  .model-active-label{font-size:calc(11.5px + 0.5pt);}
  .demo-modebar,.preview-controls{gap:5px !important;padding:5px !important;}.demo-add,.preview-add,.demo-modebar .demo-send,.preview-controls .preview-send{flex-basis:36px;width:36px;height:36px;}.demo-modebar .demo-mode-select{flex-basis:68px;height:36px;}.demo-modebar .demo-mode-select select{height:36px;font-size:calc(11.5px + 0.5pt);padding-left:8px;}.demo-settings > summary{height:36px !important;padding:0 8px !important;}.demo-settings > summary span,.preview-controls .preview-settings span{display:none;}.demo-modebar .demo-model{min-width:96px;min-height:36px;}.demo-modebar .demo-model select{height:36px;min-height:36px;font-size:calc(11.5px + 0.5pt) !important;}.preview-controls .preview-mode{flex-basis:58px;min-height:36px;font-size:calc(11px + 0.5pt);}.preview-controls .preview-model{min-width:88px;min-height:36px;}.preview-controls .preview-model select{min-height:36px;font-size:calc(11px + 0.5pt) !important;}.preview-controls .preview-settings{height:36px;padding:0 8px;}
}

@media(max-width:360px){
  .composer-wrap > .modebar,.stage > .modebar{gap:4px !important;}
  .modebar > .attach-btn,.modebar > .attach,.modebar > .send-btn,.modebar > .send{flex-basis:32px;width:32px !important;height:36px !important;}
  .modebar > .mode-select-control{flex-basis:62px;}
  .composer-settings > summary{padding:0 6px !important;gap:3px;}
  .modebar > .modelbar,.modebar > .landing-model{min-width:68px;}
  .demo-modebar,.preview-controls{gap:4px !important;}
  .demo-add,.preview-add,.demo-modebar .demo-send,.preview-controls .preview-send{flex-basis:32px;width:32px;}
  .demo-modebar .demo-mode-select{flex-basis:58px;}
  .demo-settings > summary{padding:0 6px !important;gap:3px;}
  .demo-modebar .demo-model,.preview-controls .preview-model{min-width:52px;}
}