/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*
 * Niall's blue backdrop lives on the brand-kit shell's main column, so the
 * shared grey.ooo chrome (top bar + sidebar) keeps its own dark palette.
 */
.gooo-main {
    background-color: #0b3192;
    background-image: url("/images/niall_blue.png");
    color: white;
}

/*
 * .niall is the positioning context: a big square stage for the Three.js
 * canvas, sized in relative units so it still fits (rather than pushing the
 * page into horizontal scroll) below that width. The chat form is a sibling
 * of the canvas, absolutely positioned over it (see body .niall .chat
 * below) instead of sitting in normal flow beneath it.
 */
body .niall {
    position: relative;
    width: min(800px, 92vw);
    aspect-ratio: 1;
    margin: 0 auto;
}

/*
 * The face is a Three.js canvas (a rotating, floating cube textured with
 * Niall's mug — see chat_controller.js). It fills .niall entirely; the
 * controller's ResizeObserver keeps the renderer/camera in sync with
 * whatever size that ends up being.
 */
body .niall .face {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Floats over the lower third of the canvas, roughly where the chat form
   used to sit in normal flow below it, but centered over the stage. */
body .niall .chat {
    position: absolute;
    left: 50%;
    bottom: -8%;
    transform: translateX(-50%);
    width: min(640px, 94%);
    margin: 0;
    padding: 10px 14px;
    background: rgba(11, 49, 146, 0.55);
    border-radius: 8px;
    backdrop-filter: blur(2px);
}

/*
 * The conversation log: an SMS-style thread sitting directly above the
 * compose field. It scrolls (newest at the bottom, chat_controller.js keeps
 * it pinned there), and the mask-image fades the top ~40px to transparent
 * so older messages dissolve as they scroll up, instead of hitting a hard
 * clipped edge against the canvas behind.
 */
body .chat .log {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    margin-bottom: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.35;
    mask-image: linear-gradient(to bottom, transparent 0, black 40px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 40px);
    /* The log scrolls but shouldn't look like a widget — no visible bar. */
    scrollbar-width: none;
}

body .chat .log::-webkit-scrollbar {
    display: none;
}

/* Empty until the first exchange lands — don't reserve the margin. */
body .chat .log:empty {
    display: none;
}

body .chat .log li.msg {
    max-width: 75%;
    padding: 6px 11px;
    border-radius: 16px;
    color: white;
    overflow-wrap: break-word;
    /* A small SMS-style entrance: rise a few px and fade in, nothing more. */
    animation: msg-arrive 200ms ease-out;
}

/* Your messages: right-aligned, brighter blue — the "sent" side. */
body .chat .log li.msg--you {
    align-self: flex-end;
    background: #1d6ae5;
    border-bottom-right-radius: 4px;
}

/* Niall's: left-aligned, darker — the "received" side. */
body .chat .log li.msg--niall {
    align-self: flex-start;
    background: #092775;
    border-bottom-left-radius: 4px;
}

@keyframes msg-arrive {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body .chat .compose {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* An unstyled text input renders at the UA default (~170px, from its
   `size=20` default) — this is that default roughly tripled. */
body .chat .compose input[type="text"] {
    width: 510px;
    max-width: 100%;
}

body .chat .enhanced-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    user-select: none;
}