/* ===================================================================
   THE POST COMPOSER -- shared stylesheet.

   Lifted out of feed.php on 2026-07-29 when My Signal gained a composer of
   its own. Moving the markup alone would have been a false extraction:
   CLAUDE.md records the feed-post-card case where markup moved, 24 of its
   28 classes stayed behind in feed.php, and the component rendered 1440px
   avatars the first time it appeared somewhere new. Markup, CSS and
   behaviour moved together here.

   Also carries two primitives the utility rail needs on both pages --
   .feed-rail-btn and .fsp-form. Their POSITIONING deliberately did not
   move: a game feed's rail is absolutely positioned out in the page
   margin, My Signal's sits inline above the stream. Same control, honestly
   different placement, so the shared thing is the button and not the
   layout around it.
   =================================================================== */
.feed-composer { background: rgba(12,19,34,.6); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 24px; backdrop-filter: blur(8px); overflow: visible; box-sizing: border-box; width: 100%; }
.composer-collapsed-row { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: text; }
.composer-collapsed-row .fake-input { flex: 1; min-width: 0; color: var(--text-dimmer); font-size: .9rem; }
.composer-expanded { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.composer-expanded.open { max-height: 700px; overflow: visible; }
.composer-expanded-inner { padding: 0 18px 18px; position: relative; }
.composer-body { position: relative; }
.composer-body textarea { width: 100%; box-sizing: border-box; background: transparent; border: none; outline: none; color: var(--text); font-family: var(--body); font-size: .98rem; resize: none; min-height: 60px; line-height: 1.5; padding: 10px 40px 10px 2px; }
.composer-body textarea::placeholder { color: var(--text-dimmer); }
.composer-emoji-corner { position: absolute; bottom: 6px; right: 2px; }
.composer-preview { position: relative; margin-top: 10px; display: inline-block; max-width: 100%; }
.composer-preview img { max-height: 200px; max-width: 100%; border-radius: 10px; display: block; }
.composer-preview button { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(5,7,13,.8); border: 1px solid var(--line); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; }
.category-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; min-width: 0; }
.cat-pill { background: rgba(5,7,13,.5); border: 1px solid var(--line); color: var(--text-dim); font-size: .76rem; font-family: var(--mono); padding: 5px 12px; border-radius: 14px; cursor: pointer; transition: all .18s; }
.cat-pill.selected { background: rgba(var(--ion-rgb),.15); border-color: var(--ion-dim); color: var(--star); }
.composer-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; gap: 10px; min-width: 0; }
.composer-attach { color: var(--star); cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: .85rem; font-family: var(--mono); transition: color .2s; }
.composer-attach:hover { color: var(--text); }
.composer-attach svg { width: 16px; height: 16px; }
/* Same control as "Add image" so the two read as one row of actions, not a
   label beside a button. */
.composer-gif-btn { background: none; border: none; padding: 0; font-family: var(--mono); }
.composer-gif-btn svg { width: 22px; height: 16px; }
.composer-right { display: flex; align-items: center; gap: 14px; }
.composer-char-count { color: var(--text-dimmer); font-family: var(--mono); font-size: .75rem; }
.btn-post { background: linear-gradient(135deg, var(--ion), var(--star)); color: #03060d; border: none; padding: 9px 22px; border-radius: 20px; font-weight: 600; font-size: .88rem; cursor: pointer; transition: all .2s; }
.btn-post:hover { box-shadow: 0 4px 16px rgba(var(--ion-rgb),.35); transform: translateY(-1px); }
.composer-error { color: #ff9baa; font-size: .82rem; margin: 14px 18px 0; padding: 10px 14px; background: rgba(138,45,59,.15); border: 1px solid rgba(255,155,170,.25); border-radius: 8px; }
.composer-notice { color: #f0a868; font-size: .82rem; margin: 14px 18px 0; padding: 10px 14px; background: rgba(240,168,104,.12); border: 1px solid rgba(240,168,104,.25); border-radius: 8px; }
.feed-rail-btn { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--line); background: rgba(12,19,34,.55); color: var(--text-dim); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.fsp-form { display: flex; gap: 8px; }
.fsp-form input { flex: 1; min-width: 0; padding: 9px 12px; background: rgba(5,7,13,.5); border: 1px solid var(--line); color: var(--text); border-radius: 8px; font-family: var(--body); }
.fsp-form button { background: var(--ion); border: none; border-radius: 8px; padding: 0 16px; color: #03060d; cursor: pointer; font-weight: 600; }

/* --- Signal scope ---------------------------------------------------
   No collapsed row on My Signal: the compose icon in the rail is the
   trigger, so the panel starts at zero height and the stream below simply
   moves down when it opens. max-height rather than height because the
   composer's real height depends on its textarea, previews and staged GIF
   -- there is no fixed number to animate to. 700px matches the game feed's
   value for the same reason it was chosen there: comfortably past the
   tallest real composer, so the transition never clips content. */
.composer-signal { margin-bottom: 18px; }
.composer-signal .composer-expanded-inner { padding-top: 16px; }
.composer-cancel { background: none; border: 1px solid var(--line); color: var(--text-dim); font-family: var(--mono); font-size: .78rem; padding: 7px 14px; border-radius: 6px; cursor: pointer; transition: color .2s, border-color .2s; }
.composer-cancel:hover { color: var(--text); border-color: var(--text-dim); }