/* =====================================================================
   THEME
   =====================================================================

   shadcn/ui's default "neutral" palette, written as plain custom
   properties. No Tailwind, no build step -- the values are the same ones
   shadcn generates, so anything designed against that vocabulary reads
   across, and every colour and radius in the chat UI resolves back to
   this block.

   Channels are stored bare, HSL without the wrapper, and used as
   hsl(var(--muted)). That is shadcn's own convention and it is what makes
   hsl(var(--primary) / 0.1) work for a tint without a second variable.

   To retheme: change the numbers here and nothing else. Dark values live
   under .dark rather than in a media query, again matching shadcn -- the
   page is light until something adds the class.
   ===================================================================== */

:root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;

    /* UMass maroon. #881c1c, and #6d1616 for the pressed/hover state.
       Stored as HSL channels like everything else here, so a tint is
       hsl(var(--primary) / 0.08) rather than a second hex to keep in step. */
    --primary: 0 66% 32%;
    --primary-hover: 0 66% 26%;
    --primary-foreground: 0 0% 98%;

    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;

    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;

    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 66% 32%;

    --radius: 0.5rem;

    /* Not shadcn's, but the same idea: named once, used everywhere. */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --shadow-sm: 0 1px 2px 0 hsl(var(--foreground) / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(var(--foreground) / 0.07),
        0 2px 4px -2px hsl(var(--foreground) / 0.05);
}

.dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;

    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;

    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;

    --primary: 0 60% 55%;
    --primary-hover: 0 60% 48%;
    --primary-foreground: 0 0% 98%;

    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;

    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    font-family: var(--font-sans);
    color: hsl(var(--foreground));
    /* White, a wash of the brand through the middle, white again. Fixed so a
       long page does not run out of gradient and end on a hard edge. */
    background: linear-gradient(180deg,
            hsl(var(--background)) 0%,
            hsl(var(--primary) / 0.05) 45%,
            hsl(var(--background)) 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------- */
/* HEADER + NAVIGATION */
/* ---------------------- */

.header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    padding: 14px 0;
    box-shadow: var(--shadow-sm);
}

/* Buttons inside the maroon bar cannot also be maroon. */
.header .btn {
    background: hsl(var(--primary-foreground) / 0.14);
    color: hsl(var(--primary-foreground));
    border: 1px solid hsl(var(--primary-foreground) / 0.22);
}

.header .btn:hover {
    background: hsl(var(--primary-foreground) / 0.24);
}

.nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 22px;
    font-weight: 600;
}

.nav-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-links a {
    color: hsl(var(--primary-foreground));
    text-decoration: none;
}

.white-link {
    color: hsl(var(--primary-foreground));
    text-decoration: none;
}

/* ---------------------- */
/* BUTTONS */
/* ---------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 8px 16px;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.btn:hover {
    background: hsl(var(--primary-hover));
}

.btn:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.btn:hover {
    background: hsl(var(--primary-hover));
}

.btn-success {
    background: hsl(var(--primary));
}

.btn-success:hover {
    background: hsl(var(--primary-hover));
}

.btn-secondary {
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground)) !important;
    border: 1px solid hsl(var(--border));
}

.btn-secondary:hover {
    background: hsl(var(--accent));
}

.link-button {
    display: inline-block;
    text-decoration: none;
    color: hsl(var(--primary-foreground));
    padding: 12px 24px;
    border-radius: var(--radius);
}

/* ---------------------- */
/* GLOBAL LAYOUT */
/* ---------------------- */

.container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

h1 {
    color: hsl(var(--foreground));
    font-size: 32px;
}

.header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

/* ---------------------- */
/* EVENT GRID (Index page) */
/* ---------------------- */

.event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
}

.event-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 150ms ease, border-color 150ms ease;
}

.event-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.event-title {
    font-size: 20px;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 8px;
}

.event-meta {
    color: hsl(var(--muted-foreground));
    font-size: 14px;
    margin-bottom: 12px;
}

.event-description {
    color: hsl(var(--foreground));
    line-height: 1.5;
    margin-bottom: 16px;
    white-space: pre-line;
}
.event-description p { margin: 0 0 1.25rem; }
.event-description p:last-child { margin-bottom: 0; }
.event-description a { color: #881c1c; font-weight: 650; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.event-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rating-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: hsl(var(--muted));
    border-radius: var(--radius);
}

.rating-value {
    font-weight: 600;
    font-size: 18px;
    color: hsl(var(--foreground));
}

.rating-count {
    color: hsl(var(--muted-foreground));
    font-size: 14px;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: hsl(var(--muted-foreground));
}

/* ---------------------- */
/* CREATE EVENT PAGE */
/* ---------------------- */

.form-card {
    background: hsl(var(--card));
    border-radius: var(--radius);
    padding: 40px;
    box-shadow: var(--shadow-sm);
}

.form-group {
    margin-bottom: 24px;
}

label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: hsl(var(--foreground));
}

input,
textarea,
select {
    width: 100%;
    padding: 12px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    font-size: 14px;
}

textarea {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

/* ---------------------- */
/* EVENT DETAIL PAGE */
/* ---------------------- */

.event-header {
    background: hsl(var(--card));
    border-radius: var(--radius);
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.event-title {
    font-size: 32px;
    color: hsl(var(--foreground));
    margin-bottom: 16px;
}

.event-description {
    color: hsl(var(--foreground));
    line-height: 1.6;
    margin-top: 16px;
}

/* ---------- Ratings ----------- */

.rating-section {
    background: hsl(var(--card));
    border-radius: var(--radius);
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.rating-display {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 24px;
}

.big-rating {
    font-size: 64px;
    font-weight: 600;
    color: hsl(var(--foreground));
}
.no-rating { font-size: 18px; color: hsl(var(--muted-foreground)); }

.rating-breakdown {
    flex: 1;
}

.rating-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.rating-icon {
    font-size: 24px;
    width: 40px;
}

.bar {
    flex: 1;
    height: 24px;
    background: hsl(var(--muted));
    border-radius: var(--radius);
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: hsl(var(--primary));
    transition: width 0.3s;
}

.red-fill {
    background: hsl(var(--destructive)) !important;
}

.rating-count {
    width: 60px;
    text-align: right;
    color: hsl(var(--muted-foreground));
}

/* Reaction Buttons */

.reaction-buttons {
    display: flex;
    gap: 16px;
}

.reaction-btn {
    flex: 1;
    padding: 16px;
    border: 2px solid hsl(var(--border));
    background: hsl(var(--card));
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s;
}

.reaction-btn:hover {
    border-color: hsl(var(--primary));
    background: hsl(var(--muted));
}

.reaction-btn.active {
    border-color: hsl(var(--primary));
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

/* Comments */

.comments-section {
    background: hsl(var(--card));
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}

.comment-form {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid hsl(var(--border));
}

.comment-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    min-height: 80px;
    font-family: inherit;
    margin-bottom: 12px;
}

.comment-form button {
    padding: 10px 20px;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
}

.comment {
    padding: 16px 0;
    border-bottom: 1px solid hsl(var(--border));
}

.comment:last-child {
    border-bottom: none;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.comment-author {
    font-weight: 600;
    color: hsl(var(--foreground));
}

.comment-date {
    color: hsl(var(--muted-foreground));
    font-size: 14px;
}

.comment-text {
    color: hsl(var(--foreground));
    line-height: 1.5;
}

.empty-comments {
    text-align: center;
    color: hsl(var(--muted-foreground));
    padding: 40px;
}

/* ---------------------- */
/* LOGIN + REGISTER PAGE */
/* ---------------------- */

.login-container,
.register-container {
    background: hsl(var(--card));
    border-radius: var(--radius);
    padding: 40px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-md);
    margin: auto;
    margin-top: 40px;
}

.login-container h1,
.register-container h1 {
    color: hsl(var(--foreground));
    margin-bottom: 24px;
    text-align: center;
}

.link {
    text-align: center;
    margin-top: 20px;
    color: hsl(var(--muted-foreground));
}

.link a {
    color: hsl(var(--primary));
    text-decoration: none;
}
/* ---------------------- */
/* LANDING */
/* ---------------------- */

/*
   The front page, and the only one that has to read well signed out. It uses
   the same tokens and the same primitives as everything else -- the demo card
   below is literally the chat fragment's classes, not a screenshot, so it
   cannot drift away from what the product actually looks like.
*/

.landing {
    font-size: 15px;
    line-height: 1.6;
}

.landing .button-lg {
    height: 2.875rem;
    padding: 0 1.5rem;
    font-size: 15px;
}

.landing .button-outline {
    border-color: hsl(var(--border));
    background: hsl(var(--card));
    color: hsl(var(--foreground));
}

.landing .button-outline:hover {
    border-color: hsl(var(--primary) / 0.4);
    background: hsl(var(--primary) / 0.05);
}

/* -- nav --------------------------------------------------------------- */

.landing-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 4rem;
    padding: 0 1.5rem;
    /* Translucent rather than solid, so the gradient behind it shows through
       and the page reads as one surface while scrolling. */
    background: hsl(var(--background) / 0.72);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid hsl(var(--border));
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: hsl(var(--foreground));
    font-weight: 650;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.landing-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-radius: calc(var(--radius) + 0.125rem);
}

.landing-mark svg {
    width: 1.125rem;
    height: 1.125rem;
}

.landing-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* -- hero -------------------------------------------------------------- */

.landing-hero {
    max-width: 52rem;
    margin: 0 auto;
    padding: 4.5rem 1.5rem 2rem;
    text-align: center;
}

.landing {
    background: linear-gradient(180deg, #fff 0%, #f5e2e2 40%, #fff 100%);
    background-attachment: fixed;
}

.landing .site-header {
    border-top: 5px solid #881c1c;
}

.landing-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    background: hsl(var(--primary) / 0.08);
    border: 1px solid hsl(var(--primary) / 0.18);
    border-radius: 9999px;
    color: hsl(var(--primary));
    font-size: 13px;
    font-weight: 500;
}

.landing-pill svg {
    width: 0.875rem;
    height: 0.875rem;
}

.landing-headline {
    margin-top: 1.5rem;
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.landing-accent {
    color: hsl(var(--primary));
}

.landing-subhead {
    max-width: 40rem;
    margin: 1.25rem auto 0;
    color: hsl(var(--muted-foreground));
    font-size: 17px;
}

.landing-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* -- stats ------------------------------------------------------------- */

.landing-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
    margin-top: 3.5rem;
    text-align: left;
}

.landing-stat {
    padding: 1.125rem 1.25rem;
    background: #881c1c;
    border: 1px solid #881c1c;
    border-radius: var(--radius);
}

.landing-stat-value {
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.landing-stat-label {
    margin-top: 0.25rem;
    color: #f5dddd;
    font-size: 13px;
}

/* -- the demo card ----------------------------------------------------- */

.landing-demo {
    max-width: 46rem;
    margin: 3.5rem auto 0;
    padding: 0 1.5rem;
}

.landing-demo-card {
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.landing-demo-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.625rem 0.875rem;
    background: #881c1c;
    border-bottom: 1px solid #6d1616;
}

.landing-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 9999px;
    background: hsl(var(--border));
}

.landing-demo-title {
    margin-left: 0.5rem;
    color: #fff;
    font-size: 12px;
}

.landing-demo-body {
    padding: 1.25rem;
}

/*
   The demo reuses .chat-event, which is an <a> in the real fragment and a
   <span> here -- there is nothing to click in a mock-up. Spans are not flex
   containers by default, so the layout is restated for them.
*/
.landing-demo-body .chat-event,
.landing-demo-body .chat-event-meta,
.landing-demo-body .chat-event-badges {
    display: flex;
}

.landing-demo-body .chat-event-title {
    display: block;
}

/* -- features ---------------------------------------------------------- */

.landing-features {
    max-width: 64rem;
    margin: 4.5rem auto 0;
    padding: 0 1.5rem;
}

.landing-section-title {
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    text-align: center;
}

.landing-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
    margin-top: 1.75rem;
}

.landing-feature {
    padding: 1.5rem;
}

.landing-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: hsl(var(--primary) / 0.08);
    color: hsl(var(--primary));
    border-radius: var(--radius);
}

.landing-feature-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.landing-feature-title {
    margin-top: 0.875rem;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.landing-feature-text {
    margin-top: 0.5rem;
    color: hsl(var(--muted-foreground));
    font-size: 14px;
}

/* -- footer ------------------------------------------------------------ */

.site-copyright {
    margin-top: 3rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid hsl(var(--border));
    color: hsl(var(--muted-foreground));
    font-size: 13px;
    text-align: center;
}

.form-help, .form-success, .form-error { margin: 0.5rem 0 1rem; }
.form-help { color: hsl(var(--muted-foreground)); }
.form-success { color: #166534; }
.form-error { color: #b42318; }
.submission-review { padding: 1rem 0; border-bottom: 1px solid hsl(var(--border)); }
.submission-review h2 { margin: 0; font-size: 1.1rem; }
.submission-review form { display: inline-block; margin-right: 0.5rem; }

.landing-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    max-width: 64rem;
    margin: 4.5rem auto 0;
    padding: 1.5rem;
    border-top: 1px solid hsl(var(--border));
    color: hsl(var(--muted-foreground));
    font-size: 13px;
}

.landing-footer-links {
    display: flex;
    gap: 1rem;
}

.landing-footer-links a {
    color: hsl(var(--muted-foreground));
    text-decoration: none;
}

.landing-footer-links a:hover {
    color: hsl(var(--primary));
    text-decoration: underline;
}

@media (max-width: 40rem) {
    .landing-nav {
        padding: 0 1rem;
    }

    .landing-brand span:last-child {
        display: none;
    }

    .landing-hero {
        padding-top: 3rem;
    }
}

/* ---------------------- */
/* CHAT */
/* ---------------------- */

/*
   Everything below is scoped to .chat-page, which only /chat sets. The rest of
   the app predates this palette and is left exactly as it was rather than
   half-converted: one page that is consistent with itself beats five pages
   that are each half of two designs.
*/

.chat-page {
    font-size: 14px;
    line-height: 1.5;
}

.chat-page *,
.chat-page *::before,
.chat-page *::after {
    box-sizing: border-box;
}

/* -- primitives ------------------------------------------------------- */

.card {
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) - 0.25rem);
    padding: 0.125rem 0.5rem;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.badge-secondary {
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

.badge-outline {
    border-color: hsl(var(--border));
    color: hsl(var(--muted-foreground));
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, opacity 150ms ease;
}

.button:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.button-primary {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.button-primary:hover:not(:disabled) {
    background: hsl(var(--primary-hover));
}

.button-ghost {
    color: hsl(var(--foreground));
}

.button-ghost:hover {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.input {
    flex: 1;
    min-width: 0;
    height: 2.5rem;
    padding: 0 0.75rem;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
}

.input::placeholder {
    color: hsl(var(--muted-foreground));
}

.input:focus {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* -- shell ------------------------------------------------------------ */

.chat-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 3.5rem;
    padding: 0 1.5rem;
    background: hsl(var(--background) / 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid hsl(var(--border));
}

.chat-brand {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.chat-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chat-shell {
    max-width: 48rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 0;
}

.chat-heading {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.chat-hint {
    margin-top: 0.375rem;
    color: hsl(var(--muted-foreground));
}

.chat-demo-note {
    margin-top: 0.875rem;
    padding: 0.625rem 0.875rem;
    border: 1px dashed hsl(var(--border));
    border-radius: var(--radius);
    color: hsl(var(--muted-foreground));
    font-size: 13px;
}

/* -- the conversation -------------------------------------------------- */

/*
   Messages accumulate: htmx appends each exchange rather than replacing the
   last, so the page reads as a conversation and the previous answer is still
   there to compare the new one against.
*/

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.chat-messages:empty {
    display: none;
}

.chat-exchange {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chat-question {
    align-self: flex-end;
    max-width: 85%;
    padding: 0.5rem 0.875rem;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-radius: var(--radius);
    font-weight: 500;
}

.chat-answer {
    padding: 1rem;
    white-space: pre-wrap;
}

.chat-note {
    margin: 0 1rem 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid hsl(var(--border));
    color: hsl(var(--muted-foreground));
    font-size: 13px;
}

.chat-error-detail {
    margin-top: 0.5rem;
    padding: 0.5rem 0.625rem;
    background: hsl(var(--destructive) / 0.06);
    border-radius: calc(var(--radius) - 0.25rem);
    color: hsl(var(--foreground));
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.45;
}

.chat-error {
    padding: 1rem;
    border-color: hsl(var(--destructive) / 0.5);
    color: hsl(var(--destructive));
}

/* -- event cards ------------------------------------------------------- */

.chat-events {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.75rem;
    /* Sits inside the answer card, under .chat-answer's own padding. */
    padding: 0 1rem 1rem;
}

.chat-event {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 150ms ease, border-color 150ms ease;
}

.chat-event:hover {
    border-color: hsl(var(--foreground) / 0.2);
    box-shadow: var(--shadow-md);
}

.chat-event-title {
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.chat-event-meta {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    color: hsl(var(--muted-foreground));
    font-size: 13px;
}

.chat-event-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: auto;
    padding-top: 0.25rem;
}

/* -- the composer ------------------------------------------------------ */

/*
   Sticky rather than fixed: it sits at the bottom of the viewport with the
   conversation scrolling behind it, and still stops at the end of the page.
*/

.chat-composer {
    position: sticky;
    bottom: 0;
    padding: 1rem 0 1.5rem;
    background: linear-gradient(to bottom,
            hsl(var(--background) / 0), hsl(var(--background)) 1.5rem);
}

.chat-composer-card {
    padding: 0.75rem;
}

.chat-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding-bottom: 0.75rem;
}

.chat-chips-label {
    margin-right: 0.125rem;
    color: hsl(var(--muted-foreground));
    font-size: 12px;
}

/*
   The input is the accessible control and the span is the thing you see, so
   the checked state is styled off the input rather than off :has(). Nothing
   here needs a polyfill, and keyboard focus lands where it should.
*/

.chip {
    position: relative;
    display: inline-flex;
}

.chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.chip span {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border: 1px solid hsl(var(--border));
    border-radius: 9999px;
    color: hsl(var(--muted-foreground));
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background-color 150ms ease, color 150ms ease,
        border-color 150ms ease;
}

.chip span:hover {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.chip input:checked + span {
    background: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.chip input:focus-visible + span {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.chat-input-row {
    display: flex;
    gap: 0.5rem;
}

.chat-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 1.25rem;
    padding-top: 0.625rem;
    color: hsl(var(--muted-foreground));
    font-size: 12px;
}

.chat-quota-line {
    margin-top: 0.5rem;
    color: hsl(var(--muted-foreground));
    font-size: 12px;
    text-align: right;
}

/* -- the spinner ------------------------------------------------------- */

.htmx-indicator {
    opacity: 0;
    transition: opacity 150ms ease-in;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.chat-spinner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.chat-spinner::before {
    content: "";
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid hsl(var(--muted-foreground) / 0.3);
    border-top-color: hsl(var(--muted-foreground));
    border-radius: 9999px;
    animation: chat-spin 700ms linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .chat-spinner::before {
        animation-duration: 3s;
    }
}

/* ---------------------- */
/* SIGN IN WITH A PROVIDER */
/* ---------------------- */

.provider-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.provider-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 11px;
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
    font-weight: 600;
}

.provider-btn:hover {
    background: hsl(var(--muted));
    border-color: hsl(var(--foreground) / 0.2);
}

.provider-divider {
    display: flex;
    align-items: center;
    color: hsl(var(--muted-foreground));
    font-size: 13px;
    margin-bottom: 20px;
}

.provider-divider::before,
.provider-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: hsl(var(--muted));
}

.provider-divider span {
    padding: 0 12px;
}

.auth-error {
    background: hsl(var(--destructive) / 0.08);
    color: hsl(var(--destructive));
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 20px;
    font-size: 14px;
}

/* Shared navigation and calendar browsing. */
.site-header { background: #fff; border-bottom: 1px solid #e9dede; }
.site-nav { max-width: 1600px; margin: auto; padding: 18px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #391c1c; font-size: 18px; font-weight: 750; white-space: nowrap; }
.site-mark { background: #881c1c; color: white; border-radius: 9px; padding: 10px 7px; font-size: 13px; letter-spacing: -1px; }
.site-links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.site-links a { padding: 10px 13px; color: #554747; text-decoration: none; font-size: 14px; font-weight: 600; border-radius: 6px; }
.site-greeting { padding: 10px 5px; color: #881c1c; font-size: 14px; font-weight: 700; white-space: nowrap; }
.site-links a:hover, .site-links a[aria-current] { background: #f6eded; color: #881c1c; }
.site-links a.site-chat { color: #fff; background: #881c1c; }
.site-links a.site-chat:hover { background: #6d1616; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #b86122; outline-offset: 3px; }
.browse-shell { display: grid; grid-template-columns: 256px minmax(0, 1fr); max-width: 1600px; margin: 28px auto; padding: 0 28px; gap: 30px; align-items: start; }
.browse-sidebar { background: #881c1c; color: #fff; border-radius: 12px; padding: 26px 22px; }
.sidebar-kicker { font-size: 10px; letter-spacing: 1.3px; font-weight: 700; line-height: 1.6; }
.browse-sidebar h1 { font-size: 27px; color: white; margin: 10px 0; letter-spacing: -.8px; }
.sidebar-intro { font-size: 14px; line-height: 1.6; color: #f4dada; margin-bottom: 28px; }
.browse-sidebar label { font-size: 13px; color: #fff; margin-top: 22px; }
.browse-sidebar input, .browse-sidebar select { background: white; color: #332929; min-height: 44px; font-family: inherit; border: none; font-size: 13px; }
.browse-sidebar .free-filter { display: flex; align-items: center; gap: 10px; }
.browse-sidebar .free-filter input { width: 17px; min-height: 17px; height: 17px; accent-color: #f1cb8b; }
.sidebar-submit { display: flex; justify-content: space-between; width: 100%; padding: 13px; margin: 24px 0 16px; background: #f1cb8b; color: #3c251b; border: 0; border-radius: 6px; font-family: inherit; font-weight: 700; cursor: pointer; }
.sidebar-submit:hover { background: #f8d9a6; }
.sidebar-reset { color: #fff; font-size: 12px; text-underline-offset: 4px; }
.sidebar-chat { border-top: 1px solid #b36565; margin-top: 32px; padding-top: 24px; }
.sidebar-chat h2 { font-size: 29px; margin: 10px 0; }
.sidebar-chat p { color: #f4dada; font-size: 14px; line-height: 1.7; }
.sidebar-chat a { display: block; color: white; font-weight: 700; font-size: 13px; margin-top: 20px; text-underline-offset: 5px; }
.sidebar-chat small { display: block; color: #f4dada; font-size: 11px; margin-top: 12px; }
.browse-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 5px 0 24px; }
.eyebrow { color: #881c1c; font-size: 10px; letter-spacing: 1.5px; font-weight: 750; margin-bottom: 10px; }
.browse-heading h2 { font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -1px; color: #302424; }
.campus-label { color: #746363; font-size: 12px; white-space: nowrap; }
.results-summary { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid #e5dcdc; border-bottom: 1px solid #e5dcdc; padding: 15px 0; font-size: 13px; color: #655656; }
.results-summary strong { color: #382727; }
.event-month > h2 { font-size: 17px; font-weight: 650; margin: 25px 0 16px; color: #493333; }
.browse-results .event-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.browse-results .event-card { padding: 0; border-radius: 9px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; border-color: #e7dfdf; }
.event-card-banner { height: 110px; background: #eee1d8; position: relative; padding: 14px; overflow: hidden; }
.event-card:nth-child(3n+2) .event-card-banner { background: #e4e9e1; }
.event-card:nth-child(3n+3) .event-card-banner { background: #eee1e3; }
.event-date { position: relative; z-index: 1; width: 48px; background: #881c1c; color: white; text-align: center; padding: 7px 4px; border-radius: 3px; }
.event-date span { display: block; font-size: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; }
.event-date strong { font-size: 27px; line-height: 1.15; }
.banner-category { position: absolute; left: 76px; right: 12px; bottom: 18px; font-size: 12px; font-weight: 650; color: #513f39; z-index: 1; }
.banner-art { position: absolute; right: -25px; top: 0; width: 240px; height: 110px; stroke: #881c1c; stroke-width: 1; opacity: .13; }
.event-card-body { padding: 18px; display: flex; flex: 1; flex-direction: column; }
.event-card-body h3 { font-size: 18px; line-height: 1.4; letter-spacing: -.3px; margin: 0 0 18px; }
.event-card-body h3 a { color: #342828; text-decoration: none; }
.event-card-body h3 a:hover { color: #881c1c; text-decoration: underline; }
.event-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.event-tags:not(:empty) { margin-bottom: 10px; }
.event-tags span { background: #f3eeee; color: #6a3434; font-size: 10px; padding: 4px 7px; border-radius: 4px; font-weight: 650; }
.event-facts { font-size: 12px; line-height: 1.55; color: #635555; margin-bottom: 22px; }
.event-facts > div { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 6px; margin-bottom: 8px; }
.event-facts dt { color: #881c1c; font-weight: 650; }
.event-facts dd { overflow-wrap: anywhere; }
.browse-results .event-footer { margin-top: auto; gap: 8px; padding-top: 14px; border-top: 1px solid #eee6e6; flex-wrap: wrap; }
.event-feedback { color: #756565; font-size: 10px; }
.event-details-link { color: #881c1c; font-size: 12px; font-weight: 700; text-decoration: none; padding: 5px 0; }
.event-details-link:hover { text-decoration: underline; }
.login-container, .register-container { width: calc(100% - 32px); }
.provider-btn { min-height: 46px; }
@media (min-width: 1450px) { .browse-results .event-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
    .site-nav { flex-wrap: wrap; gap: 12px; }
    .browse-shell { grid-template-columns: 230px minmax(0, 1fr); gap: 22px; padding: 0 20px; }
    .browse-results .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .campus-label { display: none; }
}
@media (max-width: 700px) {
    .site-nav { padding: 14px 16px; }
    .site-brand { font-size: 16px; }
    .site-links { gap: 3px; }
    .site-links a { font-size: 12px; padding: 9px; }
    .browse-shell { display: block; padding: 0 16px; margin-top: 16px; }
    .browse-sidebar { padding: 20px; margin-bottom: 26px; }
    .sidebar-intro { margin-bottom: 14px; }
    .browse-sidebar form { display: grid; grid-template-columns: 1fr; }
    .sidebar-chat { margin-top: 22px; padding-top: 18px; }
    .sidebar-chat h2, .sidebar-chat p, .sidebar-chat .sidebar-kicker { display: none; }
    .sidebar-chat a { margin-top: 0; }
    .browse-results .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .event-card-body { padding: 13px; }
    .event-card-body h3 { font-size: 16px; }
    .event-facts > div { display: block; }
    .banner-category { font-size: 10px; }
    .results-summary { font-size: 12px; }
}
@media (max-width: 420px) { .browse-results .event-grid { grid-template-columns: 1fr; } }