/* Reset and Base Styles */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-primary: #05070a;
    --bg-secondary: #0b0e13;
    --bg-tertiary: #141820;
    --text-primary: #f5f7fa;
    --text-secondary: #a3abb8;
    --text-muted: #6b7380;
    --border-color: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);
    --surface: rgba(255, 255, 255, 0.035);
    --surface-hover: rgba(255, 255, 255, 0.07);

    /* The blue of the Ceritek logo */
    --accent: #7ccff5;
    --accent-strong: #a6def8;
    --accent-soft: rgba(124, 207, 245, 0.1);
    --accent-border: rgba(124, 207, 245, 0.35);
    --accent-glow: rgba(124, 207, 245, 0.18);

    --content-width: 820px;
    --gutter: 24px;
    /* The assistant's width beside an open page (dragged by the divider,
       see script.js), kept within what leaves both sides usable. */
    --copilot-width: 400px;
    --copilot: clamp(320px, var(--copilot-width), calc(100vw - 420px));
    --radius-lg: 24px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Soft blue glow behind the page */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 60% 45% at 50% 38%, rgba(124, 207, 245, 0.09), transparent 70%),
        radial-gradient(ellipse 80% 50% at 50% 110%, rgba(124, 207, 245, 0.05), transparent 70%);
    transition: opacity 0.6s ease;
}

body:not(.welcome)::before {
    opacity: 0.45;
}

button {
    font-family: inherit;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Stars Background */
.stars-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0;
    animation: starTwinkle var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
}

.star::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
    border-radius: 50%;
}

@keyframes starTwinkle {

    0%,
    100% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }

    50% {
        opacity: calc(var(--max-opacity) * 0.7);
        transform: translateY(var(--drift)) scale(1);
    }
}

/* History Panel */
.history-panel {
    position: fixed;
    left: 0;
    top: 0;
    width: 300px;
    height: 100vh;
    background: rgba(8, 10, 14, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid var(--border-color);
    box-shadow: 24px 0 48px rgba(0, 0, 0, 0.4);
    z-index: 99;
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.35s var(--ease), opacity 0.35s ease, visibility 0.35s;
    display: flex;
    flex-direction: column;
}

.history-panel.open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border-color);
}

.history-header h3 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.close-history-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: background 0.2s ease, color 0.2s ease;
}

.close-history-btn:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.close-history-btn svg {
    width: 16px;
    height: 16px;
}

.history-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.history-item {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    margin-bottom: 4px;
}

.history-item:hover {
    background: var(--surface-hover);
}

.history-item.active {
    background: var(--accent-soft);
    border-color: var(--accent-border);
}

.history-item-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-item-preview {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-item-date {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.no-history {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

/* Preview Panel: a page cited in a reply. It takes the right of the
   window while the assistant becomes a narrow copilot on the left (see
   openPreview in script.js). */
.preview-panel {
    position: fixed;
    left: var(--copilot);
    right: 0;
    top: 0;
    height: 100vh;
    height: 100dvh;
    background: rgba(8, 10, 14, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid var(--border-color);
    box-shadow: -24px 0 48px rgba(0, 0, 0, 0.4);
    z-index: 98;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.35s var(--ease), visibility 0.35s;
    display: flex;
    flex-direction: column;
}

body.preview-open .preview-panel {
    transform: translateX(0);
    visibility: visible;
}

/* The divider between the assistant and the page: drag it, or focus it and
   use the arrow keys. Double-click puts it back. */
.preview-resizer {
    position: absolute;
    left: -5px;
    top: 0;
    bottom: 0;
    width: 10px;
    z-index: 2;
    cursor: col-resize;
    touch-action: none;
    outline: none;
}

.preview-resizer::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: transparent;
    transition: background 0.2s ease;
}

.preview-resizer:hover::after,
.preview-resizer:focus-visible::after,
body.resizing .preview-resizer::after {
    background: var(--accent);
}

/* While dragging, the page must not catch the pointer, and nothing lags. */
body.resizing {
    cursor: col-resize;
    user-select: none;
}

body.resizing .preview-frame {
    pointer-events: none;
}

body.resizing .main-container,
body.resizing .preview-panel {
    transition: none;
}

.preview-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 12px 12px 18px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.preview-title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: background 0.2s ease, color 0.2s ease;
}

.preview-btn:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.preview-btn svg {
    width: 16px;
    height: 16px;
}

.preview-body {
    flex: 1;
    position: relative;
    background: #ffffff;
}

.preview-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Spinner over the page until it has loaded (.loading on the panel). */
.preview-loading {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    background: var(--bg-secondary);
}

.preview-loading::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 40%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    animation: spin 0.8s linear infinite;
}

.preview-panel.loading .preview-loading {
    display: block;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* The link whose page is in the panel. */
.message.assistant .message-text a.active {
    color: var(--accent-strong);
    text-decoration-color: var(--accent);
}

/* Main Container. It spans the whole window so the messages scrollbar
   sits at the window's edge; the column is set on each part instead. */
.main-container {
    position: relative;
    z-index: 1;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: width 0.35s var(--ease);
}

/* Copilot: the assistant, narrow, on the left of an open page. */
body.preview-open .main-container {
    width: var(--copilot);
    --gutter: 16px;
}

body.preview-open .header-btn span {
    display: none;
}

body.preview-open .header-btn {
    padding: 9px;
}

body.preview-open .logo-icon {
    height: 76px;
    margin: -20px 0 -20px -22px;
}

body.preview-open .message.user {
    max-width: 90%;
}

body.preview-open .message.assistant .message-avatar {
    display: none;
}

/* The page sent along with each question while it is open. */
.page-context {
    display: none;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin: 0 0 8px 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.page-context svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--accent);
}

.page-context span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.preview-open .page-context {
    display: flex;
}

.header,
.input-wrapper,
body.welcome .chat-container {
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 10px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color);
    animation: fadeIn 0.4s ease;
}

.header-left {
    display: flex;
    align-items: center;
}

/* The logo file has wide transparent margins, hence the height */
.logo-icon {
    height: 96px;
    margin: -26px 0 -26px -14px;
}

.logo-icon img {
    height: 100%;
    width: auto;
    display: block;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-btn.icon-only {
    padding: 9px;
}

.header-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.header-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent-border);
    color: var(--accent-strong);
}

.header-btn svg {
    width: 15px;
    height: 15px;
}

/* Chat Container */
.chat-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* ---------- Welcome state ---------- */

/* The whole welcome block (logo, headline, input, suggestions) is one
   column centered in the page. */
body.welcome .main-container {
    justify-content: center;
    padding-bottom: 6vh;
}

body.welcome .header,
body.welcome .messages-container {
    display: none;
}

body.welcome .chat-container {
    flex: 0 0 auto;
}

body:not(.welcome) .welcome-screen,
body:not(.welcome) .suggestions {
    display: none;
}

.welcome-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 28px;
}

.welcome-screen>*,
.suggestions {
    animation: fadeUp 0.7s var(--ease) both;
}

.welcome-screen> :nth-child(2) {
    animation-delay: 0.06s;
}

.welcome-screen> :nth-child(3) {
    animation-delay: 0.12s;
}

.suggestions {
    animation-delay: 0.3s;
}

.logo-img {
    height: 150px;
    width: auto;
    margin: -28px 0 -6px;
}

.welcome-title {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.025em;
    max-width: 640px;
    background: linear-gradient(180deg, #ffffff 30%, #b9c2cf 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-wrap: balance;
}

/* Suggestions */
.suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.suggestion-chip {
    padding: 9px 16px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.35);
    color: var(--text-secondary);
    font-size: 13.5px;
    line-height: 1.35;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s var(--ease);
}

.suggestion-chip:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045));
    color: var(--text-primary);
    transform: translateY(-1px);
}

/* ---------- Messages ---------- */

/* Full window width, content centered in the column: the scrollbar is at
   the window's edge, away from the text. Its thumb only shows while the
   pointer is over the conversation or it is scrolling (.scrolling, set in
   script.js). The top and bottom edges fade out instead of cutting text. */
.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 28px max(var(--gutter), calc((100% - var(--content-width)) / 2 + var(--gutter))) 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    transition: scrollbar-color 0.3s ease;
}

.messages-container:hover,
.messages-container.scrolling {
    scrollbar-color: var(--border-strong) transparent;
}

.messages-container::-webkit-scrollbar {
    width: 6px;
}

.messages-container::-webkit-scrollbar-track {
    background: transparent;
}

.messages-container::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
}

.messages-container:hover::-webkit-scrollbar-thumb,
.messages-container.scrolling::-webkit-scrollbar-thumb {
    background: var(--border-strong);
}

/* Shown only when there is more of the conversation below. */
.scroll-bottom-btn {
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: rgba(20, 24, 32, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity 0.2s ease, transform 0.25s var(--ease), color 0.2s ease, border-color 0.2s ease;
}

.scroll-bottom-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.scroll-bottom-btn:hover {
    color: var(--accent-strong);
    border-color: var(--accent-border);
}

.scroll-bottom-btn svg {
    width: 18px;
    height: 18px;
}

body.welcome .scroll-bottom-btn {
    display: none;
}

.message {
    display: flex;
    gap: 14px;
    animation: fadeUp 0.35s var(--ease);
}

.message.user {
    align-self: flex-end;
    max-width: 78%;
}

.message.assistant {
    align-self: stretch;
    align-items: flex-start;
}

.message.user .message-avatar {
    display: none;
}

/* The assistant's round badge, in the logo's blue */
.message.assistant .message-avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    margin-top: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--accent);
}

.message.assistant .message-avatar svg {
    width: 20px;
    height: 20px;
}

.message-content {
    min-width: 0;
    flex: 1;
}

.message-text {
    font-size: 15px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.message.user .message-text {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 20px 20px 6px 20px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--text-primary);
}

.message.assistant .message-text {
    color: #e6e9ee;
    padding-top: 4px;
}

/* While the assistant answers, its badge draws the Ceritek mark over and
   over: the white peak, then the blue tick, while the ring glows. When the
   reply is complete the mark is shown whole with a small pop. */
.message.thinking .message-avatar {
    animation: badgeGlow 1.8s ease-in-out infinite;
}

.message.thinking .message-avatar path {
    stroke-dasharray: 1 1;
    animation: markDraw 1.8s ease-in-out infinite both;
}

.message.thinking .message-avatar .mark-tick {
    animation-delay: 0.25s;
}

.message.replied .message-avatar svg {
    animation: markSettle 0.45s var(--ease);
}

@keyframes markDraw {
    0% {
        stroke-dashoffset: 1;
    }

    45%,
    60% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -1;
    }
}

@keyframes badgeGlow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(124, 207, 245, 0);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(124, 207, 245, 0.12), 0 0 16px rgba(124, 207, 245, 0.35);
    }
}

@keyframes markSettle {
    from {
        transform: scale(0.75);
        opacity: 0.6;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Each new word of a reply fades in from a blur (see revealWords in
   script.js). "both" keeps a word hidden until its turn comes. */
.word {
    animation: wordReveal 0.6s ease-out both;
}

@keyframes wordReveal {
    from {
        opacity: 0;
        filter: blur(8px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

/* Typing indicator */
.typing-indicator {
    display: flex;
    gap: 5px;
    padding: 8px 0;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.35;
    }

    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* ---------- Input ---------- */

.input-wrapper {
    padding-block: 12px 16px;
    flex-shrink: 0;
}

.input-container {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    background: rgba(20, 24, 32, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 10px 10px 10px 22px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.input-container:focus-within {
    border-color: var(--accent-border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), 0 0 0 4px var(--accent-glow);
}

body.welcome .input-container {
    padding-top: 13px;
    padding-bottom: 13px;
}

/* A textarea that grows with its text (autoGrow in script.js). */
.chat-input {
    flex: 1;
    min-width: 0;
    align-self: center;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    font-size: 15.5px;
    line-height: 1.5;
    font-family: inherit;
    color: var(--text-primary);
    padding: 7px 0;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.chat-input::placeholder {
    color: var(--text-muted);
}

.send-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s var(--ease), background 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
}

.send-button:hover:not(:disabled) {
    background: var(--accent-strong);
    transform: scale(1.06);
}

.send-button:active:not(:disabled) {
    transform: scale(0.95);
}

/* While a reply is coming, the button stops it. */
.send-button .icon-stop,
.send-button.stop .icon-send {
    display: none;
}

.send-button.stop .icon-stop {
    display: block;
}

.send-button.stop {
    background: var(--text-primary);
    color: var(--bg-primary);
}

.send-button.stop:hover:not(:disabled) {
    background: #ffffff;
}

.send-button:disabled {
    background: var(--bg-tertiary);
    cursor: default;
}

.send-button svg {
    width: 18px;
    height: 18px;
    color: #05070a;
}

.send-button:disabled svg {
    color: var(--text-muted);
}

.input-note {
    margin-top: 10px;
    text-align: center;
    font-size: 11.5px;
    color: var(--text-muted);
}

/* On the welcome screen the note sits at the bottom of the page */
body.welcome .input-note {
    position: absolute;
    left: 0;
    right: 0;
    bottom: max(16px, env(safe-area-inset-bottom));
    margin: 0;
}

/* ---------- Animations ---------- */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .stars-container {
        display: none;
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
    :root {
        --gutter: 16px;
    }

    .history-panel {
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1001;
        transform: translateY(100%);
    }

    .history-panel.open {
        transform: translateY(0);
    }

    /* The preview takes the whole screen; closing it goes back to the chat. */
    .preview-panel {
        left: 0;
        z-index: 1001;
        transform: translateY(100%);
    }

    body.preview-open .preview-panel {
        transform: translateY(0);
    }

    body.preview-open .main-container {
        width: 100%;
    }

    .preview-resizer {
        display: none;
    }

    .logo-icon {
        height: 76px;
        margin: -20px 0 -20px -22px;
    }

    .header-btn span {
        display: none;
    }

    .header-right {
        gap: 8px;
    }

    .header-btn {
        padding: 9px;
    }

    body.welcome .main-container {
        justify-content: flex-end;
        padding-bottom: 36px;
    }

    .welcome-screen {
        margin-bottom: auto;
        padding-top: 8vh;
    }

    .logo-img {
        height: 110px;
        margin: -20px 0 -12px;
    }

    .suggestions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .suggestion-chip {
        border-radius: 14px;
        padding: 10px 12px;
        font-size: 13px;
    }

    .input-wrapper {
        padding-block: 10px max(14px, env(safe-area-inset-bottom));
    }

    .chat-input {
        font-size: 16px;
        /* prevents iOS zoom on focus */
    }

    .message.user {
        max-width: 88%;
    }

    .message.assistant .message-avatar {
        display: none;
    }
}

/* Welcome content on short screens: let the headline breathe less */
@media (max-height: 640px) {
    .logo-img {
        height: 90px;
        margin: -16px 0 -10px;
    }
}

/* Assistant replies are markdown turned into HTML (see markdown.js). */
.message.assistant .message-text p {
    margin: 0 0 10px;
}

.message.assistant .message-text p:last-child {
    margin-bottom: 0;
}

.message.assistant .message-text ul,
.message.assistant .message-text ol {
    margin: 4px 0 10px;
    padding-left: 22px;
}

.message.assistant .message-text li {
    margin-bottom: 4px;
}

.message.assistant .message-text li::marker {
    color: var(--accent);
}

.message.assistant .message-text em {
    color: var(--text-secondary);
}

.message.assistant .message-text strong {
    color: #ffffff;
    font-weight: 600;
}

.message.assistant .message-text a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: var(--accent-border);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease;
}

.message.assistant .message-text a:hover {
    text-decoration-color: var(--accent);
}

.message.assistant .message-text code {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 13px;
}

/* Shown when the assistant cannot answer. */
.message.assistant .message-text.message-error {
    color: var(--text-secondary);
    font-style: italic;
}

/* Thumbs up / down under an answer (feedback.js). Quiet until hovered,
   so they never compete with the answer; the chosen thumb stays lit. */
.feedback-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.feedback-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.feedback-btn svg {
    width: 16px;
    height: 16px;
}

.feedback-btn:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.feedback-btn[aria-pressed="true"] {
    background: var(--accent-soft);
    border-color: var(--accent-border);
    color: var(--accent);
}

.feedback-comment {
    display: flex;
    flex: 1 1 260px;
    gap: 6px;
    min-width: 0;
}

.feedback-comment input {
    flex: 1;
    min-width: 0;
    padding: 6px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
}

.feedback-comment input:focus {
    outline: none;
    border-color: var(--accent-border);
}

.feedback-comment button {
    padding: 6px 14px;
    border: 1px solid var(--accent-border);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.feedback-comment button:hover {
    background: var(--accent-glow);
}

.feedback-thanks {
    color: var(--text-secondary);
    font-size: 13px;
}