/* markdown-composer.css
 *
 * The ProseMirror editable (.aq-md-composer) replaces #player-input visually
 * 1:1. All chrome values are taken directly from the #player-input rules in
 * game.css so the composer box looks and feels unchanged; the only intended
 * difference is that inline marks render as you type.
 *
 * Real rules mirrored from game.css lines 1091-1111:
 *   flex: 1
 *   background: transparent
 *   border: none
 *   color: var(--game-text-bright)
 *   font-family: var(--font-ui)          -> 'IBM Plex Mono', 'Courier New', monospace
 *   font-size: 0.75rem
 *   outline: none
 *   padding: 0
 *   overflow-y: auto
 *   min-height: 1.2em
 *   max-height: 200px
 *   line-height: 1.2
 *   placeholder color: var(--game-text-hint), font-style: italic
 *
 * Pixel-perfect tuning happens in Task 9 after live visual comparison.
 */

/* The glue inserts this wrapper between the flex input row and the editor and
   mounts the ProseMirror element inside it. It must take the textarea's old
   place as the growing flex child, or the composer collapses to zero width.
   min-width: 0 lets it shrink/grow correctly with long content. */
.aq-md-mount {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
}

.aq-md-composer {
    flex: 1 1 0%;
    min-width: 0;
    background: transparent;
    border: none;
    color: var(--game-text-bright);
    font-family: var(--font-ui, 'Courier New', monospace);
    font-size: 0.75rem;
    outline: none;
    padding: 0;
    overflow-y: auto;
    min-height: 1.2em;
    max-height: 200px;
    line-height: 1.2;
    word-wrap: break-word;
    /* Anchor the absolutely-positioned placeholder ::before. The vendored
       .ProseMirror rule already sets position: relative on this same element,
       but assert it here so the placeholder stays contained regardless of how
       the factory wires the class. */
    position: relative;
}

.aq-md-composer:focus {
    outline: none;
}

/* Placeholder: shown when the doc is empty (factory sets .aq-empty on the
   wrapper element). Mirrors #player-input::placeholder color + style. */
.aq-md-composer.aq-empty::before {
    content: attr(data-placeholder);
    color: var(--game-text-hint);
    font-style: italic;
    pointer-events: none;
    position: absolute;
}

/* Inline marks inside the composer. Visual targets match the message list. */
.aq-md-composer strong { font-weight: 700; }
.aq-md-composer em { font-style: italic; }
.aq-md-composer s { text-decoration: line-through; }
.aq-md-composer code { font-family: var(--font-ui, 'Courier New', monospace); }
.aq-md-composer blockquote {
    border-left: 3px solid var(--game-border, var(--border-color));
    color: var(--game-text-hint);
    margin: 0.4em 0;
    padding: 0.1em 0.7em;
}
.aq-md-composer ul,
.aq-md-composer ol {
    margin: 0.3em 0;
    padding-left: 1.4em;
}
/* Headings: clear hierarchy, but capped so they stay legible in the compact
   composer (the sent message renders them full size read-side). */
.aq-md-composer h1,
.aq-md-composer h2,
.aq-md-composer h3,
.aq-md-composer h4,
.aq-md-composer h5,
.aq-md-composer h6 {
    font-weight: 700;
    line-height: 1.25;
    margin: 0.3em 0 0.2em;
}
.aq-md-composer h1 { font-size: 1.5em; }
.aq-md-composer h2 { font-size: 1.3em; }
.aq-md-composer h3 { font-size: 1.15em; }
.aq-md-composer h4,
.aq-md-composer h5,
.aq-md-composer h6 { font-size: 1em; }

/* Mobile: mirror #player-input @media (max-width: 768px) cap, including the
   real #player-input::placeholder { opacity: 0.7 } so the placeholder dims
   identically on mobile. */
@media (max-width: 768px) {
    .aq-md-composer {
        font-size: 0.75rem;
        max-height: 140px;
    }
    .aq-md-composer.aq-empty::before {
        opacity: 0.7;
    }
}