/* ======================================================
c070-composer.css — COMPOSER (ChatGPT-style FIXED pill)
FULL REPLACE

Editable controls at top:
--bmComposerGap   → move chat up/down
--bmComposerH     → overall thickness
button size below → also affects thickness

PLUS CONTROL:
--bmComposerPlusX / Y → moves ONLY the + in front of circle
====================================================== */

:root{
  --bmComposerGap: 35px;
  --bmComposerMaxW: 760px;
  --bmComposerH: 42px;

  /* move ONLY the + symbol (circle never moves) */
  --bmComposerPlusX: 0px;
  --bmComposerPlusY: -1px;
}


/* FIXED container */
.bm-composer{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--bmComposerGap);
  z-index: 120;

  width: min(var(--bmComposerMaxW), calc(100vw - 24px));
  margin: 0;

  padding: 0;
  border: 0;
  background: transparent;

  padding-bottom: env(safe-area-inset-bottom);

  pointer-events: none;
}


/* pill wrapper */
.bm-composer__form{
  pointer-events: auto;

  display: flex;
  align-items: center;
  gap: 10px;

  min-height: var(--bmComposerH);
  padding: 6px 12px;

  border: 0;
  border-radius: 999px;

  background: rgba(255,255,255,0.98);

box-shadow:
  0 0 0 1px rgba(0,85,190,0.9),
  0 0 9px rgba(0,85,190,0.20),
  0 20px 60px rgba(0,0,0,0.12),
  0 6px 18px rgba(0,0,0,0.08);


/* textarea */
#bmComposerBody.bm-textarea{
  flex: 1;
  min-width: 0;

  border: 0;
  outline: none;
  background: transparent;

  font-size: 16px;
  line-height: 1.35;

  padding: 4px 6px;

  resize: none;
  overflow: hidden;

  min-height: 20px;
  max-height: 180px;
}

#bmComposerBody.bm-textarea::placeholder{
  color: rgba(0,0,0,0.35);
}


/* ======================================================
SUBMIT BUTTON — circle fixed, + floats ABOVE it
UPDATED: allows pushing circle further RIGHT
====================================================== */

#bmComposerSubmit{

  /* CIRCLE SIZE */
  width: 40px;
  height: 40px;
  min-width: 40px;

  border-radius: 50%;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;

  /* hide the real + but keep layout */
  font-size: 0;

  /* spacing from textarea */
  margin-left: 10px;

  /* ✅ pushes circle closer to pill right edge */
  margin-right: -6px;   /* adjust: -4px small, -6px good, -8px max */
}


/* DRAW THE + IN FRONT OF THE BLUE CIRCLE */
#bmComposerSubmit::after{
  content:"+";

  position:absolute;
  left:50%;
  top:50%;

  transform:
    translate(-50%, -50%)
    translate(var(--bmComposerPlusX), var(--bmComposerPlusY));

  font-size:24px;
  line-height:1;

  z-index:2;
  pointer-events:none;
}



/* Mobile */
@media (max-width: 720px){

  :root{
    --bmComposerGap: 10px;
  }

  .bm-composer{
    width: calc(100vw - 24px);
  }

}