/* Wik Desktop D1 -- composer (owner F). Port of activity_main.xml `sendContainer` :500-993; 1 dp = 1 px, 1 sp = 1 px.
   Colours: B's --c-* (tokens.js applyTheme); sizes: B's --t-* / --icon-bar / --frame-corner + --comp-t-* (composer.js). */

/* sendContainer -- ThemeModule.chromeBar(): the card fill, the frame's top corners, square bottom; children clipped to it */
.comp-root {
  display: flex;
  flex-direction: column;
  background: var(--c-chrome-card);                /* chromeOver(cardFill()) */
  border-radius: var(--frame-corner) var(--frame-corner) 0 0;
  overflow: hidden;
  color: var(--c-text);
}
.comp-root.comp-drop { outline: 2px solid var(--c-accent-shown); outline-offset: -2px; }

/* a pack glyph (icons.systemIcon: SVG in currentColor, or a mask span) at the bar's icon size (SizeTokens.iconBarDp) */
.comp-glyph { display: inline-flex; width: var(--icon-bar); height: var(--icon-bar); }
.comp-glyph > *, .comp-type > * { width: 100%; height: 100%; }

.comp-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0 0 0 4px; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--c-icon-tint);                       /* ThemeModule.iconTint (applyIconThemeToHeader's iconCsl) */
  cursor: pointer;
}
.comp-btn:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.comp-btn:focus-visible { outline: 2px solid var(--c-accent-shown); outline-offset: 1px; }
.comp-muted { color: var(--c-muted); }

/* stagingArea :510 -- 52dp, c_card2, 16/12 padding; icon 24dp tinted accent; name 13sp c_text; size 11sp c_dim; close 36dp */
.comp-staging {
  display: flex; align-items: center;
  height: 52px; padding: 0 12px 0 16px;
  background: var(--c-card2-fill);
}
.comp-staging[hidden], .comp-search[hidden], .comp-reply[hidden] { display: none; }
.comp-staging-icon { display: inline-flex; width: 24px; height: 24px; color: var(--c-accent-shown); }
.comp-type { display: inline-flex; width: 24px; height: 24px; }
.comp-staging-text { flex: 1 1 auto; min-width: 0; padding: 0 8px 0 10px; }
.comp-staging-name { font-size: var(--comp-t-13); color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-staging-size { font-size: var(--comp-t-11); color: var(--c-dim); }
.comp-staging .comp-dismiss { width: 36px; height: 36px; margin: 0; }

/* roomSearchBar :572 -- c_card2 (opaque), 14/4 + 5/5 padding; the field 14sp c_text, hint c_subtext; close 32dp c_muted */
.comp-search {
  display: flex; align-items: center;
  padding: 5px 4px 5px 14px;
  background: var(--c-card2-fill);
}
.comp-search-field {
  flex: 1 1 auto; min-width: 0;
  padding: 6px 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: var(--t-main); color: var(--c-text);
}
.comp-search-field::placeholder { color: var(--c-subtext); }
.comp-search .comp-dismiss, .comp-reply .comp-dismiss { width: 32px; height: 32px; margin: 0; }

/* replyBar :619 -- stripe 3x28dp accent, 10dp after; label 12sp c_subtext, two lines; close 32dp c_muted */
.comp-reply {
  display: flex; align-items: center;
  padding: 5px 4px 5px 14px;
  background: var(--c-card2-fill);
}
.comp-reply-stripe { flex: 0 0 3px; height: 28px; margin-inline-end: 10px; background: var(--c-accent-shown); }
.comp-reply-label {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--comp-t-12); color: var(--c-subtext);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
  white-space: pre-wrap;                           /* ":  " keeps its two spaces (showReplyBar) */
}
.comp-reply-name { color: var(--c-red); }

/* sendBar :794 -- 8dp padding round the field and its buttons */
.comp-bar { display: flex; align-items: center; padding: 8px; }

/* tilMessage -- ThemeModule.inputFrame(): card2 fill, the frame's corners, the small tail corner bottom-right; no border */
.comp-field-wrap {
  flex: 1 1 auto; min-width: 0;
  background: var(--c-input-fill);                 /* chromeOverFloored(card2Fill()) */
  border-radius: var(--post-corner) var(--post-corner) calc(var(--post-corner) / 3) var(--post-corner);   /* W177A2_DESK A2-5 §10 */
}
.comp-field {
  display: block; width: 100%; box-sizing: border-box;
  padding: 10px 8px 10px 16px;
  border: 0; outline: 0; resize: none; background: transparent;
  font: inherit; font-size: var(--t-main); line-height: 1.25; color: var(--c-text);
  overflow-y: auto;
  field-sizing: content;                           /* grows with its text (etMessage minLines 1) ... */
  max-height: calc(5lh + 20px);                    /* ... to five lines (maxLines 5), then scrolls */
}
.comp-field::placeholder { color: var(--c-subtext); }

/* btnSend -- the accent disc at every moment; the arrow's ink says whether there is something to send */
.comp-send { padding: 9px; }   /* the disc and the arrow ink: composer.js updateSendButtonState (btnPrimary, inkOn / inkOnMuted) */
.comp-send.comp-cannot { cursor: default; }
.comp-send .comp-glyph { width: 26px; height: 26px; }

/* btnPaste / btnPasteAndSend -- 40dp, 4dp / 2dp before; paste grey (iconTint), paste-and-send the accent */
.comp-paste, .comp-paste-send { width: 40px; height: 40px; }
.comp-paste { color: var(--c-icon-tint); }
.comp-paste-send { margin-inline-start: 2px; color: var(--c-accent-shown); }
/* W1/73 P34: the clear-X while the field holds text -- ThemeModule.kt:2043 btnClear: a flat c_orange disc (no bevel), pressed = 20 %
   black over it; the ink (inkOn(orange)) is composer.js dressPasteSend's inline colour. Beats .comp-btn:hover's tint (same box). */
.comp-btn.comp-paste-send.comp-clears,
.comp-btn.comp-paste-send.comp-clears:hover,
.comp-btn.comp-paste-send.comp-clears:focus-visible { background: var(--c-orange); }
.comp-btn.comp-paste-send.comp-clears:active { background: color-mix(in srgb, var(--c-orange) 80%, black); }

/* the upload progress composer.js puts in dialogs.sheet() (B has no progress dialog) */
.comp-ask { display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 12px; color: var(--c-text); }
.comp-ask-title { font-size: var(--t-main); font-weight: 600; }
.comp-ask-msg { color: var(--c-subtext); white-space: pre-wrap; }
.comp-progress-status { color: var(--c-subtext); }
.comp-progress-bar { width: 100%; accent-color: var(--c-accent-shown); }


/* W175B BIDI r4 (W1/75): user text takes its FIRST-STRONG paragraph direction, as Android's TextView (TEXT_DIRECTION_FIRST_STRONG) --
   the typed text (the dir=auto equivalent), the reply bar's quoted words, the staged file name. A Latin line in the ar layout keeps its period on the right. */
.comp-field { unicode-bidi: plaintext; }   /* bodies / centred: the paragraph's own leading edge (Android ALIGN_NORMAL) */
/* W175B BIDI r5: a LABEL keeps its place -- its text takes its own direction, its alignment the parent's (Android: the row lays the TextView out) */
.comp-reply-label, .comp-staging-name { unicode-bidi: plaintext; }
/* W175B BIDI r5b: match-parent did not hold under plaintext (measured); the page direction pins it */
.comp-reply-label:dir(ltr), .comp-staging-name:dir(ltr) { text-align: left; }
.comp-reply-label:dir(rtl), .comp-staging-name:dir(rtl) { text-align: right; }