/**
 * Prompt clear (×) — RIGHT of the prompt text, same look as Speak & Create.
 * Visible styles use :not(.u-hidden) so empty state does not flash.
 * Load this stylesheet LAST on every page that has a prompt box.
 */

.tg-prompt-wrap,
.tc-prompt-wrap,
.tg-prompt-wrapper.tg-prompt-wrap,
.tg-prompt-wrapper.tc-prompt-wrap {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 3px !important;
  /* Do NOT use width:100% here — inside .tg-input-row it steals space and
     squashes the circular green Generate button into a tall oval (phones/iPad). */
  width: auto !important;
  max-width: 100% !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Keep circular Generate / icon buttons from shrinking beside the prompt wrap */
#tg-composer .tg-generate-btn,
#tg-composer .tg-icon-btn,
#qe-mobile-composer .tg-generate-btn,
#qe-mobile-composer .tg-icon-btn,
.tg-input-row > .tg-generate-btn,
.tg-input-row > .tg-icon-btn {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
}

.tg-prompt-wrap > textarea,
.tc-prompt-wrap > textarea,
.tg-prompt-wrapper.tg-prompt-wrap > textarea,
.tg-prompt-wrapper.tc-prompt-wrap > textarea {
  flex: 1 1 0% !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding-right: 4px !important;
  order: 1 !important;
}

/* Match Speak & Create: soft white circle, not red */
.tg-prompt-clear:not(.u-hidden),
.tc-prompt-clear:not(.u-hidden),
html body #qe-mobile-composer .tg-prompt-clear:not(.u-hidden),
html body #qe-mobile-composer .tc-prompt-clear:not(.u-hidden),
html body #tg-composer .tg-prompt-clear:not(.u-hidden),
html.tg-ipad-editor-shell body #qe-mobile-composer .tg-prompt-clear:not(.u-hidden),
html.tg-ipad-editor-shell body #qe-mobile-composer .tc-prompt-clear:not(.u-hidden),
html.tg-ipad-editor-shell body #tg-composer .tg-prompt-clear:not(.u-hidden),
html.tg-ipad-editor-shell body .qe-sidebar .tg-prompt-clear:not(.u-hidden),
html.tg-ipad-editor-shell body .tg-sidebar .tg-prompt-clear:not(.u-hidden),
html.tg-ipad-editor-shell body .qe-sidebar .tc-prompt-clear:not(.u-hidden),
html.tg-ipad-editor-shell body .tg-sidebar .tc-prompt-clear:not(.u-hidden) {
  position: static !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: 40 !important;
  order: 2 !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none !important;
}

.tg-sidebar .tg-prompt-wrap,
.qe-sidebar .tg-prompt-wrap,
.tg-sidebar .tc-prompt-wrap,
.qe-sidebar .tc-prompt-wrap,
aside .tg-prompt-wrap,
aside .tc-prompt-wrap {
  display: block !important;
  width: 100% !important;
  flex: none !important;
}

.tg-sidebar .tg-prompt-wrap > textarea,
.qe-sidebar .tg-prompt-wrap > textarea,
.tg-sidebar .tc-prompt-wrap > textarea,
.qe-sidebar .tc-prompt-wrap > textarea,
aside .tg-prompt-wrap > textarea,
aside .tc-prompt-wrap > textarea {
  width: 100% !important;
  flex: none !important;
  order: 0 !important;
  padding-right: 36px !important;
  padding-left: 10px !important;
}

.tg-sidebar .tg-prompt-wrap > .tg-prompt-clear:not(.u-hidden),
.qe-sidebar .tg-prompt-wrap > .tg-prompt-clear:not(.u-hidden),
.tg-sidebar .tc-prompt-wrap > .tc-prompt-clear:not(.u-hidden),
.qe-sidebar .tc-prompt-wrap > .tc-prompt-clear:not(.u-hidden),
aside .tg-prompt-wrap > .tg-prompt-clear:not(.u-hidden),
aside .tc-prompt-wrap > .tc-prompt-clear:not(.u-hidden) {
  position: absolute !important;
  right: 10px !important;
  left: auto !important;
  top: 10px !important;
  order: 0 !important;
  transform: none !important;
  flex: none !important;
}

.tg-prompt-clear:not(.u-hidden):hover,
.tc-prompt-clear:not(.u-hidden):hover {
  background: rgba(255, 255, 255, 0.24) !important;
  color: #fff !important;
}

.tg-prompt-clear.u-hidden,
.tc-prompt-clear.u-hidden,
html body .tg-prompt-clear.u-hidden,
html body .tc-prompt-clear.u-hidden,
html body #qe-mobile-composer .tg-prompt-clear.u-hidden,
html body #qe-mobile-composer .tc-prompt-clear.u-hidden,
html body #tg-composer .tg-prompt-clear.u-hidden,
html.tg-ipad-editor-shell body .tg-prompt-clear.u-hidden,
html.tg-ipad-editor-shell body .tc-prompt-clear.u-hidden,
html.tg-ipad-editor-shell body .qe-sidebar .tg-prompt-clear.u-hidden,
html.tg-ipad-editor-shell body .tg-sidebar .tg-prompt-clear.u-hidden,
html.tg-ipad-editor-shell body #qe-mobile-composer .tg-prompt-clear.u-hidden,
html.tg-ipad-editor-shell body #tg-composer .tg-prompt-clear.u-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

html body #qe-mobile-composer .tg-prompt-wrapper.tg-prompt-wrap,
html body #qe-mobile-composer .tg-prompt-wrapper.tc-prompt-wrap,
html body #tg-composer .tg-prompt-wrapper.tg-prompt-wrap,
html.tg-ipad-editor-shell body #qe-mobile-composer .tg-prompt-wrapper.tg-prompt-wrap,
html.tg-ipad-editor-shell body #qe-mobile-composer .tg-prompt-wrapper.tc-prompt-wrap,
html.tg-ipad-editor-shell body #tg-composer .tg-prompt-wrapper.tg-prompt-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  position: relative !important;
  overflow: visible !important;
}

body.talk-create-page .tc-prompt-clear:not(.u-hidden) {
  order: 2 !important;
}
body.talk-create-page .tc-prompt-wrap > textarea {
  order: 1 !important;
}