/*
 * ============================================================
 * ThinkerStreet Composer
 * ============================================================
 *
 * WELCOME:
 *   Full composer.
 *
 * ACTIVE CONVERSATION:
 *   Empty + unfocused = compact row.
 *   Focus / text      = premium expanded composer.
 *
 * The browser owns the viewport and keyboard.
 * JavaScript never positions this composer.
 * ============================================================
 */


/*
 * ============================================================
 * PAGE
 * ============================================================
 */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body.chat-home {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}


/*
 * ============================================================
 * APPLICATION GRID
 * ============================================================
 */

.chat-home #app {
  position: relative;

  display: grid;

  grid-template-rows:
    var(--toolbar-height, 60px)
    minmax(0, 1fr);

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  overflow: hidden;
}


/*
 * ============================================================
 * TOOLBAR
 * ============================================================
 */

.chat-home #app > .toolbar {
  position: relative;

  width: 100%;
  height: var(--toolbar-height, 60px);

  min-width: 0;
  min-height: 0;
}


/*
 * ============================================================
 * MAIN CHAT GRID
 * ============================================================
 */

.chat-home #main {
  display: grid;

  grid-template-rows:
    minmax(0, 1fr)
    auto;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  overflow: hidden;
}


/*
 * ============================================================
 * CHAT SCROLLER
 * ============================================================
 */

.chat-home #main > :first-child {
  min-width: 0;
  min-height: 0;

  overflow-x: hidden;
  overflow-y: auto;

  -webkit-overflow-scrolling: touch;
}


/*
 * ============================================================
 * COMPOSER DOCK
 * ============================================================
 */

.chat-home #composerDock {
  position: relative;
  z-index: 40;

  width: 100%;
  min-width: 0;

  box-sizing: border-box;

  padding:
    6px
    10px
    max(8px, env(safe-area-inset-bottom));
}


/*
 * ============================================================
 * COMPOSER SHELL
 * ============================================================
 */

#chatComposer.is-xiao { border-color:#ffe75b78;box-shadow:0 0 22px #ffe75b14,inset 0 1px 0 #ffe75b25; }
#chatComposer.is-xiao #intelligenceButton,#chatComposer.is-xiao #composerBoost { display:none; }
#chatComposer #reportButton[hidden],#chatComposer #analyzeReportButton[hidden] { display:none; }
#reportButton { display:flex;align-items:center;gap:8px;min-width:130px;padding:8px 9px;border:1px solid #ffe75b55;border-radius:10px;background:#ffe75b0b;color:#fff4ac;font:650 11px/1.3 system-ui,sans-serif;cursor:pointer; }
.report-completion { position:relative;display:block;width:50px;height:4px;border-radius:9px;background:#ffe75b20;overflow:hidden; }
.report-completion i { display:block;height:100%;width:0;border-radius:inherit;background:#ffe75b;box-shadow:0 0 8px #ffe75b88;transition:width .35s ease; }
.report-percent { min-width:25px;color:#d5d0a7;font:600 9px/1 system-ui,sans-serif; }
#reportButton.is-analyzing .report-completion i { box-shadow:0 0 13px #fff3a2; }
#reportButton.is-analyzing .report-percent { opacity:.4; }
@keyframes report-building { from { margin-left:-38%;opacity:.3; } 50% { opacity:1; } to { margin-left:110%;opacity:.3; } }
#analyzeReportButton { padding:8px 9px;border:1px solid #ffe75b55;border-radius:10px;background:#ffe75b18;color:#fff2a4;white-space:nowrap;font:600 10px/1.3 system-ui,sans-serif;cursor:pointer; }
#analyzeReportButton:disabled { opacity:.35;cursor:default; }
#chatComposer.is-xiao .send-button { color:#ffe75b;border-color:#ffe75b70; }
@media(max-width:400px) { #reportButton { min-width:110px;gap:5px;padding:7px; }.report-completion { width:32px; }#analyzeReportButton { font-size:9px;padding:8px 6px; } }
@media(prefers-reduced-motion:reduce) { .report-completion i { transition:none; }#reportButton.is-analyzing .report-completion i { animation:none;margin-left:30%; } }
#chatComposer {
  --composer-input-height: 74px;
  --composer-controls-height: 52px;

  position: relative;

  width: min(820px, 100%);
  height:
    calc(
      var(--composer-input-height) +
      var(--composer-controls-height)
    );

  min-width: 0;

  margin: 0 auto;

  box-sizing: border-box;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent) 75%,
      white
    );

  border-radius: 24px;

  background:
    linear-gradient(
      140deg,
      #101925ed,
      #050914f5
    );

  box-shadow:
    0 0 24px
      color-mix(
        in srgb,
        var(--accent) 12%,
        transparent
      ),
    inset 0 1px 0 #ffffff20;

  overflow: hidden;

  transform: translateZ(0);

  transition:
    height 360ms cubic-bezier(.16, 1, .3, 1),
    border-radius 360ms cubic-bezier(.16, 1, .3, 1),
    border-color 180ms ease,
    box-shadow 260ms ease,
    background 260ms ease;

  will-change: height;
}


/*
 * ============================================================
 * FOCUS / ENGAGED
 * ============================================================
 */

#chatComposer:focus-within,
#chatComposer.is-engaged {
  border-color:
    color-mix(
      in srgb,
      var(--accent) 90%,
      white
    );

  box-shadow:
    0 0 31px
      color-mix(
        in srgb,
        var(--accent) 17%,
        transparent
      ),
    0 13px 34px #00000022,
    inset 0 1px 0 #ffffff27;
}


/*
 * ============================================================
 * TEXTAREA
 * ============================================================
 */

#chatInput {
  position: relative;
  z-index: 1;

  display: block;

  width: 100%;
  height: var(--composer-input-height);

  min-height: 0;
  max-height: 160px;

  margin: 0;

  padding:
    15px
    17px
    5px;

  box-sizing: border-box;

  border: 0;
  border-radius: 0;
  outline: 0;

  resize: none;

  background: transparent;

  color: var(--ink);

  font-family: inherit;
  font-size: 17px;
  line-height: 1.5;

  overflow-x: hidden;
  overflow-y: auto;

  -webkit-appearance: none;
  appearance: none;

  -webkit-text-size-adjust: 100%;

  transition:
    height 360ms cubic-bezier(.16, 1, .3, 1),
    padding 330ms cubic-bezier(.16, 1, .3, 1);

  /*
   * Prevent browser scroll anchoring inside the textarea from
   * competing with the chat scroller while it changes height.
   */
  overflow-anchor: none;
}

#chatInput::placeholder {
  color: #aeb9cc88;
  opacity: 1;
}

#plannerButton.composer-planner { position:absolute;z-index:4;top:10px;right:13px;width:34px;height:34px;padding:7px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:10px;background:color-mix(in srgb,var(--accent) 5%,transparent);color:color-mix(in srgb,var(--accent) 38%,#9aa5b3);opacity:0;pointer-events:none;cursor:pointer;transition:opacity .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease; }
#plannerButton svg { display:block;width:100%;height:100%; }
#chatComposer.is-engaged:not(.is-xiao) #plannerButton { opacity:.62;pointer-events:auto; }
#chatComposer.is-engaged:not(.is-xiao) #plannerButton[aria-pressed="true"] { opacity:1;color:var(--accent);background:color-mix(in srgb,var(--accent) 19%,#0a1120);border-color:color-mix(in srgb,var(--accent) 75%,white);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 35%,transparent),inset 0 0 10px color-mix(in srgb,var(--accent) 12%,transparent); }
#chatComposer.is-compact #plannerButton { opacity:0;pointer-events:none; }
#plannerButton:disabled { opacity:.18!important;pointer-events:none!important;box-shadow:none!important; }


/*
 * ============================================================
 * CONTROLS
 * ============================================================
 *
 * Controls remain bottom-anchored at all times.
 *
 * That is important:
 * when the composer grows, the controls move smoothly downward
 * instead of being removed from one layout and inserted into
 * another one.
 */

.composer-controls {
  position: absolute;
  z-index: 3;

  left: 0;
  right: 0;
  bottom: 0;

  display: flex;

  align-items: center;

  gap: 10px;

  height: var(--composer-controls-height);

  min-width: 0;

  padding:
    6px
    10px
    10px;

  box-sizing: border-box;

  /*
   * The controls layer overlaps the textarea in compact mode.
   * Empty parts of this layer must not block textarea focus.
   */
  pointer-events: none;

  transition:
    height 360ms cubic-bezier(.16, 1, .3, 1),
    padding 330ms cubic-bezier(.16, 1, .3, 1);
}

.composer-controls button,
.composer-controls a,
.composer-controls input,
.composer-controls [role="button"],
.composer-documents,
.composer-intelligence {
  pointer-events: auto;
}

/*
 * ============================================================
 * DOCUMENTS / PLUS
 * ============================================================
 */

.composer-documents {
  display: flex;

  align-items: center;

  flex: 0 0 auto;

  min-width: 0;

  transition:
    transform 330ms cubic-bezier(.16, 1, .3, 1),
    opacity 220ms ease;
}


/*
 * ============================================================
 * INTELLIGENCE
 * ============================================================
 */

.composer-intelligence {
  display: flex;

  align-items: center;

  min-width: 0;
  max-width: 360px;

  opacity: 1;

  transform:
    translate3d(0, 0, 0)
    scale(1);

  transform-origin: left center;

  transition:
    opacity 180ms ease 70ms,
    transform 330ms cubic-bezier(.16, 1, .3, 1),
    max-width 330ms cubic-bezier(.16, 1, .3, 1);
}


/*
 * ============================================================
 * SEND
 * ============================================================
 */

.send-button {
  display: grid;

  place-items: center;

  width: 36px;
  height: 36px;

  min-width: 36px;

  flex: 0 0 36px;

  margin-left: auto;
  padding: 0;

  border:
    1px solid
    var(--accent);

  border-radius: 12px;

  outline: 0;

  background:
    color-mix(
      in srgb,
      var(--accent) 45%,
      #111
    );

  color: #fff;

  box-shadow:
    0 0 17px
      color-mix(
        in srgb,
        var(--accent) 30%,
        transparent
      );

  cursor: pointer;

  touch-action: manipulation;

  -webkit-tap-highlight-color: transparent;

  transition:
    transform 160ms cubic-bezier(.16, 1, .3, 1),
    opacity 160ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.send-button svg {
  display: block;

  width: 18px;
  height: 18px;

  fill: none;

  stroke: currentColor;
  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;

  pointer-events: none;
}

.send-button:hover,
.send-button:focus-visible {
  background:
    color-mix(
      in srgb,
      var(--accent) 58%,
      #111
    );

  box-shadow:
    0 0 22px
      color-mix(
        in srgb,
        var(--accent) 40%,
        transparent
      );
}

.send-button:active {
  transform: scale(.92);
}

.send-button:disabled {
  opacity: .42;
  cursor: default;
}

.send-button .send-stop { display: none; fill: currentColor; stroke: none; }
.send-button.is-busy .send-arrow { display: none; }
.send-button.is-busy .send-stop { display: block; }
.send-button.is-busy { background: color-mix(in srgb, var(--accent) 18%, #101620); }
.send-button.is-busy:hover { background: color-mix(in srgb, var(--accent) 35%, #101620); }


/*
 * ============================================================
 * COMPACT CONVERSATION STATE
 * ============================================================
 *
 * Only active conversation + empty + unfocused.
 *
 * Layout:
 *
 *   [+]   Ask ThinkerStreet AI                    [↑]
 */

#chatComposer.is-compact {
  --composer-controls-height: 54px;

  height: 54px;

  border-radius: 19px;

  box-shadow:
    0 8px 24px #0000002e,
    0 0 20px
      color-mix(
        in srgb,
        var(--accent) 8%,
        transparent
      ),
    inset 0 1px 0 #ffffff19;
}

#chatComposer.is-compact #chatInput {
  height: 54px;

  padding:
    13px
    58px
    11px;

  overflow: hidden;
}

#chatComposer.is-compact .composer-controls {
  height: 54px;

  padding:
    9px
    10px;
}


/*
 * Intelligence disappears from the center.
 *
 * max-width collapses so it consumes no horizontal space while
 * opacity/scale provide the premium reveal in the other direction.
 */

#chatComposer.is-compact .composer-intelligence {
  max-width: 0;

  opacity: 0;

  transform:
    translate3d(-7px, 0, 0)
    scale(.90);

  pointer-events: none;

  overflow: hidden;

  transition:
    opacity 100ms ease,
    transform 240ms cubic-bezier(.4, 0, .2, 1),
    max-width 300ms cubic-bezier(.4, 0, .2, 1);
}


/*
 * In compact mode the controls sit over the input.
 * Keep the + and Send visually anchored to their sides.
 */

#chatComposer.is-compact .composer-documents {
  transform:
    translate3d(0, 0, 0)
    scale(.96);
}

#chatComposer.is-compact .send-button {
  transform: scale(.96);
}


/*
 * ============================================================
 * EXPANSION DETAIL
 * ============================================================
 *
 * A subtle highlight crosses the border while the composer is
 * engaged. It gives the expansion a deliberate premium feel
 * without moving any page geometry independently.
 */

#chatComposer::after {
  content: "";

  position: absolute;
  z-index: 5;

  top: 0;
  left: -24%;

  width: 22%;
  height: 1px;

  opacity: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(
        in srgb,
        var(--accent) 85%,
        white
      ),
      transparent
    );
}

#chatComposer.is-conversation.is-engaged::after {
  animation:
    composer-edge-scan
    620ms
    cubic-bezier(.16, 1, .3, 1);
}

@keyframes composer-edge-scan {
  0% {
    left: -24%;
    opacity: 0;
  }

  18% {
    opacity: .78;
  }

  100% {
    left: 104%;
    opacity: 0;
  }
}


/*
 * ============================================================
 * STATUS
 * ============================================================
 */

#composerStatus {
  width: min(820px, 100%);

  margin: 0 auto;

  box-sizing: border-box;

  padding:
    5px
    15px
    2px;

  color: #eacb99;

  font-size: 12px;
}

#composerStatus:empty {
  display: none;
}


/*
 * ============================================================
 * MOBILE
 * ============================================================
 */

@media (max-width: 680px) {
  .chat-home #composerDock {
    padding-left: 8px;
    padding-right: 8px;
  }

  #chatComposer {
    border-radius: 22px;
  }

  #chatComposer.is-compact {
    border-radius: 18px;
  }

  #chatInput {
    max-height: 145px;
  }

  #chatComposer.is-compact #chatInput {
    padding-left: 54px;
    padding-right: 54px;
  }

  .composer-controls {
    gap: 8px;
  }
}


/*
 * ============================================================
 * REDUCED MOTION
 * ============================================================
 */

@media (prefers-reduced-motion: reduce) {
  #chatComposer,
  #chatInput,
  .composer-controls,
  .composer-documents,
  .composer-intelligence,
  .send-button {
    transition: none !important;
  }

  #chatComposer::after {
    animation: none !important;
  }
}

.chat-home.xiao-question-view #app { grid-template-rows:0 minmax(0,1fr); }
.chat-home.xiao-mode #app { transition:grid-template-rows .25s ease; }
.chat-home.xiao-question-view #app > .toolbar { opacity:0;overflow:hidden;pointer-events:none; }
.chat-home.xiao-mode #app > .toolbar { transition:opacity .25s ease; }
#chatComposer.is-xiao,#chatComposer.is-xiao textarea,.is-xiao .report-percent { color:#ffe75b; }
#reportButton.is-analyzing .report-completion i { margin-left:0;animation:none; }
#reportButton.is-analyzing .report-percent { opacity:1; }
@media(prefers-reduced-motion:reduce) { .chat-home.xiao-mode #app,.chat-home.xiao-mode #app > .toolbar { transition:none; } }

#chatComposer.is-xiao.is-compact .composer-intelligence { position:absolute;right:52px;max-width:120px;opacity:1;transform:none;overflow:visible;pointer-events:auto; }
#chatComposer.is-xiao.is-compact #analyzeReportButton,#chatComposer.is-xiao.is-compact #fileModeButton { display:none; }
#chatComposer.is-xiao.is-compact #reportButton { min-width:112px;padding:7px 6px;gap:5px;font-size:10px; }
#chatComposer.is-xiao.is-compact #chatInput { padding-right:180px; }
#chatComposer.is-xiao.is-compact .report-completion { width:24px; }
#reportButton.is-ready>span:first-child { display:none; }
#chatComposer.is-xiao.is-compact #reportButton.is-ready { min-width:112px; }
#chatComposer.is-xiao #chatInput::placeholder { color:#ffe75b80; }

/* A retained draft gets a little breathing room; empty input uses the normal compact height. */
#chatComposer.is-compact #chatInput { white-space:pre; }
#chatComposer.is-compact.has-collapsed-draft { --composer-controls-height:64px;height:64px;min-height:64px; }
#chatComposer.is-compact.has-collapsed-draft #chatInput { height:64px;min-height:64px;padding-top:18px;padding-bottom:16px; }
#chatComposer.is-compact.has-collapsed-draft .composer-controls { height:64px; }

#xiaoNavigation { position:fixed;z-index:1200;width:250px;max-width:calc(100vw - 24px);padding:7px;border:1px solid #ffe75b55;border-radius:12px;background:#090b12f5;backdrop-filter:blur(20px);box-shadow:0 12px 45px #000a,0 0 25px #ffe75b15;animation:xiao-menu-in .2s ease both; }
#xiaoNavigation[hidden] { display:none; }
#xiaoNavigation button { display:flex;flex-direction:column;gap:4px;width:100%;padding:12px 13px;border:0;border-radius:7px;background:none;color:#ffe75b;text-align:left;cursor:pointer; }
#xiaoNavigation button:is(:hover,:focus-visible) { background:#ffe75b15;outline:1px solid #ffe75b55; }
#xiaoNavigation strong { font:600 15px/1.4 Georgia,serif; }#xiaoNavigation small { color:#ffe75b99;font:400 11px/1.4 system-ui,sans-serif; }
#reportButton>span:first-child { display:block!important; }
#reportButton .report-completion,#reportButton .report-percent { display:none; }
#chatComposer #reportButton,#chatComposer.is-xiao.is-compact #reportButton { min-width:85px;justify-content:center; }
#chatComposer.is-xiao.is-compact .composer-intelligence { max-width:90px; }
#chatComposer.is-xiao.is-compact #chatInput { padding-right:150px; }
#chatComposer.is-compact #chatInput { clip-path:inset(0 49px 0 0); }
#chatComposer.is-xiao.is-compact #chatInput { clip-path:inset(0 146px 0 0); }
#chatComposer.is-xiao.is-compact #reportButton.is-ready { min-width:85px; }
@keyframes xiao-menu-in { from { opacity:0;transform:translateY(7px) scale(.98); }to { opacity:1;transform:none; } }
@media(prefers-reduced-motion:reduce) { #xiaoNavigation { animation:none; } }

/* Xiao's dock is a compact mode switch, not a second answer input. */
#chatComposer .composer-controls>#fileModeButton { display:flex;position:absolute;right:53px;top:50%;transform:translateY(-50%);width:34px;height:34px;min-width:34px;padding:8px;border:1px solid #ffe75b35;border-radius:11px;color:#ffe75b80;background:#ffe75b05;opacity:.6;box-shadow:none; }
#chatComposer .composer-controls>#fileModeButton span { display:none; }
#chatComposer .composer-controls>#fileModeButton svg { width:19px;height:19px; }
#chatComposer.is-xiao .composer-controls>#fileModeButton { display:flex;color:#171704;background:#ffe75b;border-color:#fff5aa;opacity:1;box-shadow:0 0 19px #ffe75b55,inset 0 1px 0 #fff9; }
#chatComposer.is-compact #chatInput { padding-right:104px;clip-path:inset(0 98px 0 0); }
#chatComposer.is-xiao #chatInput { visibility:hidden;pointer-events:none; }
#chatComposer.is-xiao.is-compact .composer-intelligence { display:flex;position:absolute;left:55px;right:100px;max-width:none;justify-content:center;gap:5px;opacity:.35;transform:none;overflow:visible;pointer-events:none; }
#chatComposer.is-xiao #intelligenceButton,#chatComposer.is-xiao #composerBoost { display:flex; }
#chatComposer.is-xiao #intelligenceButton { min-width:0;max-width:145px;flex:1;border-color:#ffe75b40;color:#ffe75b; }
#chatComposer.is-xiao #composerBoost { color:#ffe75b;background:none;box-shadow:none; }
#chatComposer.is-xiao .send-button:disabled { opacity:.35;cursor:default; }