/* ============================================================================
* az-draft.css — the /draft screen, and nothing else.
*
* HOW IT LOADS
* src/app/draft/page.tsx renders the itself (React 19 hoists it into
* ); the root layout never does. Every navigation on this site is a full
* document load — the pages use plain , not next/link — so the sheet cannot
* survive into another route. The five pages verified byte-identical against
* azeria.ai keep exactly the stylesheet set they had.
*
* CONTRACT — the same three rules az-rooms.css follows
* 1. Additive only. Every selector is a class introduced here (.az-draftroom*,
* .az-dmsg*, .az-dpanel*, .az-dfield*, .az-dcard*, .az-dcomposer*) or one of
* those qualifying an existing class. None of these names appears in
* site.dist.css or in any vendor sheet — .az-dcompare and .az-dept-* are the
* only existing .az-d* names, and neither is a prefix of anything here.
* 2. No colour literals. Every colour is a var(--…) resolved from the
* [data-az-theme] token blocks in AzeriaAuthServer/wwwroot/css/site.scss, so
* the screen follows the site's light and dark themes with no second palette.
* 3. House breakpoints only: 960px, where the room panel moves below the
* conversation, and 640px for the phone-width trims.
*
* WHAT IT IS NOT
* Not the marketing chrome. This screen has no .az-navbar and no footer; it is
* a full-height application shell, which is why this sheet — alone among the
* page sheets here — sets a height on .az-draftroom.
*
* CONTENTS
* 1. Shell and header .az-draftroom, __head, __brand, __chip, __save
* 2. Two columns .az-draftroom__body, __chat, __stream
* 3. Messages .az-dmsg (+ --me, __ava, __bub, __text, __link)
* 4. Room panel .az-dpanel, .az-dfield
* 5. Room card .az-dcard
* 6. Composer .az-dcomposer
* 7. Sign-in wall .az-dwall
* 8. Narrow screens
* ========================================================================== */
/* ---------------------------------------------------------------------------
* 1. SHELL AND HEADER
* The shell owns the viewport height so the conversation scrolls inside it and
* the header, the composer and the panel stay put. 100dvh, not 100vh, so the
* composer is not left under a mobile browser's collapsing toolbar.
* ------------------------------------------------------------------------ */
.az-draftroom {
/* ONE gutter for the whole screen. The header, the conversation, the
composer and the room panel are four separate boxes stacked down the
page, so if each picks its own horizontal padding their edges step in and
out as you scroll — which is exactly what they used to do (16 / 20 / 24px
on a phone). They all read from this instead, so every vertical edge on
the screen lines up at every width. */
--az-gutter: 1.75rem;
/* How far Azeria's replies are pushed in by the avatar column: its width
plus .az-dmsg's gap. The room card uses it too, so the card lines up with
the messages it is posted among instead of starting a new left edge. */
--az-msg-indent: calc(26px + var(--s-xs));
display: flex;
flex-direction: column;
height: 100dvh;
background: var(--ground);
color: var(--ink-secondary);
font-family: var(--f-body);
}
body:has(.az-draftroom) {
overflow: hidden;
}
.az-draftroom__head {
display: flex;
align-items: center;
gap: var(--s-sm);
flex-shrink: 0;
padding: 0.9rem var(--az-gutter);
background: var(--surface);
border-bottom: 1px solid var(--hairline);
}
.az-draftroom__brand {
display: inline-flex;
align-items: center;
gap: var(--s-xs);
text-decoration: none;
}
/* .app-brand-logo is a vendor class whose size comes from whichever chrome
renders it; there is no navbar here to set it, so it is sized locally. */
.az-draftroom__brand .app-brand-logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
min-width: 26px;
padding: 0;
margin: 0;
}
.az-draftroom__brand .app-brand-logo svg {
display: block;
width: 26px;
height: 26px;
}
.az-draftroom__brandtext {
font-family: var(--f-display);
font-weight: var(--weight-bold);
font-size: var(--t-title-md);
letter-spacing: -0.02em;
color: var(--ink);
}
/* The three small pills on this screen — header, panel and card — share a
recipe. They are status, not navigation, so they are quieter than .az-chip. */
.az-draftroom__chip,
.az-dpanel__chip,
.az-dcard__chip {
display: inline-flex;
align-items: center;
font-family: var(--f-body);
font-size: var(--t-caption-strong);
line-height: 1;
padding: var(--s-xs) var(--s-sm);
border-radius: var(--pill);
border: 1px solid var(--hairline);
background: var(--rail);
color: var(--ink-secondary);
white-space: nowrap;
}
/* A