/*
 * ========================================
 * ThinkerStreet Composer
 * ========================================
 */

.chat-home #composerDock {
  min-width: 0;

  min-height: 0;

  align-self: end;

  position: relative;

  transform: none;

  transition: none;
}


#composerDock {

  position: relative;

  z-index: 40;

  min-width: 0;

  flex-shrink: 0;

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

  /*
   * Never animate dock position.
   *
   * The surrounding grid controls
   * its vertical placement.
   */

  transition: none;

  transform: none;

  will-change: auto;

  min-height: 0;

  align-self: end;

}



/*
 * ========================================
 * Composer container
 * ========================================
 */

#chatComposer {

  width: min(
    820px,
    100%
  );

  margin: 0 auto;

  min-width: 0;

  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;

  /*
   * Visual transitions are fine.
   *
   * Do not transition height,
   * margin, padding or transform.
   */

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;

}


/*
 * ========================================
 * Focus appearance
 * ========================================
 */

.composer-focused #chatComposer {

  border-color:
    color-mix(
      in srgb,
      var(--accent) 90%,
      white
    );

  box-shadow:

    0 0 28px
      color-mix(
        in srgb,
        var(--accent) 16%,
        transparent
      ),

    inset 0 1px 0
      #ffffff25;

}


/*
 * ========================================
 * Textarea
 * ========================================
 */

#chatInput {

  display: block;

  width: 100%;

  height: 74px;

  min-height: 74px;

  max-height: min(
    160px,
    32dvh
  );

  margin: 0;

  border: 0;

  outline: 0;

  resize: none;

  padding:
    15px
    17px
    5px;

  background: transparent;

  color: var(--ink);

  font-size: 17px;

  line-height: 1.5;

  font-family: inherit;

  /*
   * Prevent Safari text autosizing.
   */

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

  /*
   * Avoid iOS native textarea styling.
   */

  -webkit-appearance: none;

  appearance: none;

  border-radius: 0;

  /*
   * Scroll internally only when
   * the maximum height is reached.
   */

  overflow-x: hidden;

  overflow-y: auto;

  overscroll-behavior: contain;

  /*
   * Remove inherited effects that
   * could interfere with layout.
   */

  transform: none;

  transition: none;

  scroll-margin: 0;

  /*
   * Avoid clipping descenders.
   */

  box-sizing: border-box;

}


/*
 * ========================================
 * Placeholder
 * ========================================
 */

#chatInput::placeholder {

  color: #aeb9cc88;

  opacity: 1;

}


/*
 * ========================================
 * Composer controls
 * ========================================
 */

.composer-controls {

  display: flex;

  align-items: center;

  gap: 10px;

  padding:
    6px
    10px
    10px;

  min-width: 0;

}


/*
 * ========================================
 * Send button
 * ========================================
 */

.send-button {

  margin-left: auto;

  width: 36px;

  height: 36px;

  min-width: 36px;

  flex-shrink: 0;

  border-radius: 12px;

  font-size: 22px;

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

  border-color: var(--accent);

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

  /*
   * Prevent double-tap zoom and
   * reduce unnecessary touch delay.
   */

  touch-action: manipulation;

  -webkit-tap-highlight-color: transparent;

}


/*
 * ========================================
 * Status
 * ========================================
 */

#composerStatus:empty {

  display: none;

}

#composerStatus {

  color: #eacb99;

  font-size: 12px;

  padding:
    0
    15px
    10px;

}


/*
 * ========================================
 * Keyboard open
 * ========================================
 */

/*.keyboard-open #composerDock {

  padding-bottom: 6px;

}*/


/*
 * ========================================
 * iOS adjustments
 * ========================================
 */

@supports (-webkit-touch-callout: none) {

  #chatInput {

    /*
     * 16px or larger prevents
     * Safari's input-focus zoom.
     */

    font-size: 17px;

  }

  #composerDock {

    /*
     * No independent dock animation.
     */

    transition: none;

  }

}