/* Agent mascot badges (mascotapp, docs/mascot.md). Only the mascot's audience gets this file ({% mascot_assets %}).
   A badge is a .pt-tile, so .pt-tile and the rules around it keep placing it, and give the small icons their box;
   these rules swap the tile's face for the picture, give the moving badge its size, and let the rows around it grow
   to fit. mascot.js moves the background of .pt-mascot-anim. */

/* Three classes: above the two-class rules that round the tile where it sits (".pt-agent-card .pt-tile"), which
   would clip the picture's corners. */
.pt-tile.pt-mascot.pt-mascot {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% 100%;
    border-radius: 0;
    color: transparent;
}

/* ------------------------------------------------------------------ the size (docs/mascot.md 2, 7)
   {% mascot_assets %} puts the admin's sizes (MascotSettings), or a member's own, on the page: --pt-mascot-px for PCs
   and --pt-mascot-px-phone for phones, the screens under 768 px where the menu is a drawer and the agent opens full
   screen. Kept here within 20-256 px and 20-128 px too. In px, so the 13 px root of phones (static/base.css, 500 px
   and less) does not shrink it. A size drawn without the ink outline (96 px and up) also turns off the outline's
   fallback (--pt-mascot-outline-pc, -phone: transparent), and a size above 64 px gives the badge a line of its own in
   the heads with buttons (--pt-mascot-own-line-pc, -phone: 1; below). For sizes mascot.js draws from a larger set
   than the default one, the still a badge shows until then comes from that set too (--pt-mascot-still-pc, -phone; a
   badge's inline style falls back to the default set's when there is none). */
:root {
    --pt-mascot-badge: clamp(20px, var(--pt-mascot-px, 30px), 256px);
    --pt-mascot-outline: var(--pt-mascot-outline-pc, var(--pt-ink));
    --pt-mascot-own-line: var(--pt-mascot-own-line-pc, 0);
    --pt-mascot-still: var(--pt-mascot-still-pc);
    --pt-mascot-lift: .06;         /* the share of its size a moving badge is drawn higher (below) */
}
@media (max-width: 767px) {
    :root {
        --pt-mascot-badge: clamp(20px, var(--pt-mascot-px-phone, 26px), 128px);
        --pt-mascot-outline: var(--pt-mascot-outline-phone, var(--pt-ink));
        --pt-mascot-own-line: var(--pt-mascot-own-line-phone, 0);
        --pt-mascot-still: var(--pt-mascot-still-phone);
    }
}

/* Every moving badge, in every place: the phone header's agent button (templates/base.html), the menu head for
   members and visitors (agentapp/sidebar.html), the rail's head and folded strip (rail.html), the Studio and My prompts
   chats (chat.html, library_chat.html), a card's panel (panel.html) and "Will you help improve the service?"
   (consent.html). Three classes: above each place's own tile box (agent.css, brand.css: two classes at most), which
   the "Ag" tile keeps outside the audience. Square, and never wider than a row that has a width of its own.
   The picture keeps room above the head for its jumps, so standing the body sits 6% of the badge below the box's
   middle: a pixel or two at 30 px, 16 px at 256 px (Park 2026-10-29: "무게중심이 위로"). Every moving badge is drawn
   that much higher than its box (--pt-mascot-lift), its body in the middle at any size; the highest jump then reaches
   about a pixel past the box's top at 256 px. A transform, so the box and everything laid out around it stay put. */
.pt-tile.pt-mascot.pt-mascot-anim {
    width: var(--pt-mascot-badge);
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    transform: translateY(calc(var(--pt-mascot-lift) * -100%));
}

/* The two icon columns of PCs hold the badge at their width, 44 px: the folded rail strip (56 px wide) and the
   folded menu (72 px). Drawn at 44 px or less, it keeps the ink outline there whatever the size. */
.pt-rail-unfold .pt-tile.pt-mascot.pt-mascot-anim {
    width: min(var(--pt-mascot-badge), 2.75rem);
    --pt-mascot-outline: var(--pt-ink);
}
@media (min-width: 768px) {
    html.pt-sb-mini .pt-agent-head .pt-tile.pt-mascot.pt-mascot-anim {
        width: min(var(--pt-mascot-badge), 2.75rem);
        --pt-mascot-outline: var(--pt-ink);
    }
    html.pt-sb-mini .pt-agent .pt-agent-head { padding-inline: 0; }
    html.pt-sb-mini .pt-agent-head .pt-agent-mark { margin-inline: 0; }
    html.pt-sb-mini .pt-agent-head .pt-agent-dot { top: -3px; right: -3px; }
}

/* "Will you help improve the service?" and a card's panel: boxes no taller than the window, whose buttons have to stay
   in view (the question's at its foot, Fill the Studio and Not now under a suggestion), with the badge as decoration
   at their top. It stays at most 64 px there, and so keeps the ink outline. */
.pt-consent-inner > .pt-tile.pt-mascot.pt-mascot-anim,
.pt-agent-panel-head > .pt-tile.pt-mascot.pt-mascot-anim {
    width: min(var(--pt-mascot-badge), 64px);
    --pt-mascot-outline: var(--pt-ink);
}

/* The menu head: the badge stays centred on the menu's icon column (the rows' 22 px icons, 1.375rem, as the tile was)
   and its title on the labels' line while that leaves a quarter rem between them (to about 30 px); a larger badge
   reaches at most into the head's inset on the start side, out to the rows' edge, and the title and the count go
   beside it, or under it once the line is full. The focus ring stays around the badge (at least the tile's 22 px). */
.pt-agent-head { flex-wrap: wrap; }
.pt-agent-head .pt-agent-mark {
    flex-shrink: 0;                /* the badge keeps its size; the title and the count give way, to the next line */
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;           /* the link stays as large as the tile was, a 20 px badge in its middle */
    min-height: 1.375rem;
    margin-inline-start: max(-1rem, (1.375rem - max(var(--pt-mascot-badge), 1.375rem)) / 2);
    margin-inline-end: max(-.25rem, (1.375rem - max(var(--pt-mascot-badge), 1.375rem)) / 2);
}
/* The unread dot: on the badge's corner (agent.css: -3px) up to about 30 px; on a larger badge it moves in towards the
   crown, as the picture keeps room above the head for its jumps, and up with the drawn badge (--pt-mascot-lift; at
   256 px: 27 px down, 13 px in). */
.pt-agent-head .pt-agent-dot {
    top: max(-3px, var(--pt-mascot-badge) * (.2 - var(--pt-mascot-lift)) - 9px);
    right: max(-3px, var(--pt-mascot-badge) * .07 - 5px);
}
/* PCs: the menu folds to its icons and back with a width transition. While the title fits beside the badge (to 64 px;
   {% mascot_assets %} sets --pt-mascot-menu-wrap above that) the head keeps one line, as the tile's did: wrapping, the
   title would drop under the badge and jump back up while the menu widens. */
@media (min-width: 768px) {
    .pt-agent-head { flex-wrap: var(--pt-mascot-menu-wrap, nowrap); }
}

/* The heads with buttons at their end: the rail's (rail.html: back, badge, title, Earlier chats, Close) and the chats'
   of Studio and My prompts (chat.html, library_chat.html: badge, title, the model's note, New chat, Earlier chats).
   Up to 64 px the badge stays on the head's line, as the tile did. Above (--pt-mascot-own-line: 1, which
   {% mascot_assets %} sets for a size over 64 px) it takes a line of its own at the start, its margin filling the rest
   of it, and everything else goes on the next line, the buttons at its end, as on a one-line head; the rail's back
   button too, beside the title (the badge comes first). So no button is left alone at the start of a line, and the
   rail head is laid out alike at the rail's two widths and with or without the back button. */
.pt-rail-head, .pt-chat-head { --pt-mascot-head-badge: var(--pt-mascot-badge); }
.pt-rail-head > .pt-tile.pt-mascot.pt-mascot-anim,
.pt-chat-head > .pt-tile.pt-mascot.pt-mascot-anim {
    width: var(--pt-mascot-head-badge);
    order: calc(var(--pt-mascot-own-line) * -1);
    margin-inline-end: calc(var(--pt-mascot-own-line) * max(0px, 100% - var(--pt-mascot-head-badge)));
}
/* The first button after the spacer (the chats' New chat is hidden until there is a chat) keeps the buttons at the end
   of whatever line they land on: a narrow head (Studio beside the open rail on a 768-1279 px screen) puts Earlier
   chats on a line of its own. On the spacer's line the spacer takes the room first, as before. */
.pt-rail-head > .gen-spacer + .pt-icon-btn,
.pt-chat-head > .gen-spacer + .pt-chat-new:not([hidden]),
.pt-chat-head > .gen-spacer + .pt-chat-new[hidden] + .pt-chat-new { margin-inline-start: auto; }
/* The rail holds its chat under the head in the window's height: the badge takes at most what the window has once the
   chat keeps 464 px (its suggestions, input and note, and a few messages), and at least the 44 px the head always had
   room for. In a window 528 px tall or less it so stays at most 64 px, on the line. */
.pt-rail-head {
    flex-wrap: wrap;
    --pt-mascot-head-badge: min(var(--pt-mascot-badge), max(44px, 100vh - 464px));
}
@media (max-height: 528px) {
    .pt-rail-head { --pt-mascot-own-line: 0; }
}
/* PCs: while the rail widens from its folded strip (0.25 s), the head keeps the open rail's width, so nothing moves to
   another line meanwhile, and the rail clips what is beyond its edge instead of drawing it over the page. Using the
   input widens it again, into the conversation, and shows the back button: that grows with the rail, so a one-line
   head never runs out of room at the narrower width and comes back to one line at the wider. */
@media (min-width: 768px) {
    .pt-rail .pt-rail-head { min-width: calc(var(--pt-rail-w) - 1px); }
    html.pt-rail-on .pt-rail { overflow-x: clip; }
    .pt-rail-head > .pt-rail-back { overflow: hidden; animation: pt-mascot-back-in .25s ease-in-out; }
}
@keyframes pt-mascot-back-in {
    from { width: 0; margin-inline-end: -.5rem; opacity: 0; }
}

/* A card's panel: its close button stays in the head's top corner, centred on the badge's line (64 px at most,
   above), and the title goes under the badge when the line has no room for it. */
.pt-agent-panel-head {
    position: relative;
    flex-wrap: wrap;
    min-height: 2.25rem;
    padding-inline-end: calc(2.25rem + .6rem);
}
.pt-agent-panel-head .pt-agent-x {
    position: absolute;
    inset-inline-end: 0;
    top: max(0px, (min(var(--pt-mascot-badge), 64px) - 2.25rem) / 2);
}

/* The phone header's agent button grows from its 44 px touch target with the badge, and the logo between the menu
   button and it gives way on narrow phones rather than push the row off the screen or squeeze the buttons (it
   shrinks, keeping its shape). */
.pt-icon-btn.pt-rail-mobile {
    width: auto;
    height: auto;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: .25rem;
}
div:has(> .pt-rail-mobile) > .pt-icon-btn { flex-shrink: 0; }
div:has(> .pt-rail-mobile) > .mx-auto { min-width: 0; }
div:has(> .pt-rail-mobile) > .mx-auto img { max-width: 100%; object-fit: contain; }

/* 21-95 px: a 1 CSS px ink outline whatever the size, so the light hair keeps its edge on white
   (on dark grounds it is barely seen, and harmless). 96 px and up go without.
   mascot.js draws it with an SVG filter (#pt-mascot-ink, set on each badge it takes over while the badge is drawn at
   95 px or less) that drops the picture's faint pixels first. These four drop-shadows are the fallback until then:
   on 2x and 3x screens they turn the faint pixels at the crown's points and the hair's tips into a comb of dark
   streaks. Transparent for a size of 96 px and up. */
.pt-mascot-ink {
    filter: drop-shadow(1px 0 0 var(--pt-mascot-outline)) drop-shadow(-1px 0 0 var(--pt-mascot-outline))
            drop-shadow(0 1px 0 var(--pt-mascot-outline)) drop-shadow(0 -1px 0 var(--pt-mascot-outline));
}
.pt-mascot-ink-flood { flood-color: var(--pt-ink); }

/* 18-20 px: the small still icon, outline drawn in, at its own pixel size in the middle of the box
   (stretched, the outline would blur); smaller boxes shrink it. */
.pt-mascot-icon > img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

/* ------------------------------------------------------------------ a member's own size (docs/mascot.md 2-4)
   The size row of the account settings (mascotapp/size_choice.html), there only for the audience while members may
   choose: the four choices as chips (each a radio, unseen but in the page, so Tab, the arrow keys and screen readers
   reach it), then the preview and Save. The preview sizes its badge as :root does for the page, from the custom
   properties on its own box (the chosen sizes, which its script changes at once). The badge grows in a stage the size
   of the largest choice, against the name, so trying the choices moves nothing: whether the name fits beside the
   stage and Save beside the preview depends on the largest choice only (on a short line they go under). On phones the
   chips and Save keep the 2.75rem touch height of Studio's shape chips. */
.ps-mascot-size { display: flex; flex-direction: column; gap: .75rem; margin: 0; padding: .9rem 1.1rem; }
.ps-mascot-size-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.ps-mascot-size-choice { position: relative; display: inline-flex; margin: 0; }
.ps-mascot-size-choice input {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.ps-mascot-size-choice .pt-chip { cursor: pointer; }
.ps-mascot-size-choice input:checked + .pt-chip {
    background: var(--pt-selected-bg);
    border-color: var(--pt-selected-bg);
    color: var(--pt-selected-fg) !important;
    font-weight: 600;
}
.ps-mascot-size-choice input:focus-visible + .pt-chip { outline: 2px solid var(--pt-focus-ring); outline-offset: 2px; }
.ps-mascot-size-foot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.ps-mascot-size-foot > .pt-btn { margin-inline-start: auto; }
.pt-mascot-preview {
    --pt-mascot-badge: clamp(20px, var(--pt-mascot-px, 30px), 256px);
    --pt-mascot-preview-room: clamp(20px, var(--pt-mascot-preview-most, 48px), 256px);
    display: flex;
    flex: 1 1 calc(var(--pt-mascot-preview-room) + 2rem);
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: .75rem 1rem;
    border-radius: var(--pt-radius-md);
    background: var(--pt-surface-2);
}
.pt-mascot-preview-stage {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: flex-end;
    width: var(--pt-mascot-preview-room);
    max-width: 100%;
    height: var(--pt-mascot-preview-room);
}
@media (max-width: 767px) {
    .pt-mascot-preview {
        --pt-mascot-badge: clamp(20px, var(--pt-mascot-px-phone, 26px), 128px);
        --pt-mascot-preview-room: clamp(20px, var(--pt-mascot-preview-most-phone, 42px), 128px);
    }
    .ps-mascot-size-choice .pt-chip, .ps-mascot-size-foot > .pt-btn { min-height: 2.75rem; }
}
.pt-mascot-preview-stage > .pt-tile { flex-shrink: 0; }
.pt-mascot-preview .pt-mascot-preview-name { font: 600 .9375rem/1.3 var(--pt-font-text); color: var(--pt-text); }