/* ================================================================================
   INBOX.CSS - The in-app inbox overlay (announcements, events, offers)
   Every rule scoped under #inboxOverlay per house style.
   All colour from var(--token) - no hard-coded values, so dark mode needs no
   [data-theme="dark"] block in here.
   ================================================================================ */

/* --------------------------------------------------------------------------
   LAYOUT
   The scroll container and the message panel are siblings. The panel covers
   the list rather than replacing it, so the list keeps its scroll position
   when the nav back button returns to it.
   -------------------------------------------------------------------------- */
#inboxOverlay .inbox-scroll {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

#inboxOverlay .inbox-subview {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding: var(--space-lg);
    padding-top: calc(var(--nav-height) + env(safe-area-inset-top) + var(--space-lg));
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + var(--space-lg));
    background: var(--bg-home-page);
}

/* --------------------------------------------------------------------------
   LIST HEADER
   -------------------------------------------------------------------------- */
#inboxOverlay .inbox-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
}

#inboxOverlay .inbox-head h2 {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
}

#inboxOverlay .inbox-head-count {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   MESSAGE LIST
   -------------------------------------------------------------------------- */
#inboxOverlay .inbox-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

#inboxOverlay .inbox-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

#inboxOverlay .inbox-item:hover {
    border-color: var(--border-purple);
}

#inboxOverlay .inbox-item.unread {
    background: var(--bg-elevated-card);
    border-color: var(--border-purple);
}

/* --------------------------------------------------------------------------
   ITEM ICON
   The emoji says what KIND of message this is (festival, event, crawl,
   offer, news) - a different question to whether it's been read, which the
   dot answers. Category comes from inbox_messages.category via the
   CATEGORY_ICONS map in inbox.js.
   -------------------------------------------------------------------------- */
#inboxOverlay .inbox-item-icon {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--bg-purple);
    display: grid;
    place-items: center;
    font-size: var(--text-lg);
}

/* Unread dot sits ON the icon so it reads as belonging to the message,
   not floating in the card's corner. The border punches it out of the
   icon background - matched to the card so it works on read and unread. */
#inboxOverlay .inbox-item.unread .inbox-item-icon::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 11px;
    height: 11px;
    border-radius: var(--radius-circle);
    background: var(--text-purple);
    border: 2px solid var(--bg-card);
}

/* --------------------------------------------------------------------------
   ITEM CONTENT
   -------------------------------------------------------------------------- */
#inboxOverlay .inbox-item-content {
    flex: 1;
    min-width: 0;
}

#inboxOverlay .inbox-item-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
}

#inboxOverlay .inbox-item-title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

#inboxOverlay .inbox-item.unread .inbox-item-title {
    font-weight: 700;
}

#inboxOverlay .inbox-item-time {
    flex-shrink: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

#inboxOverlay .inbox-item-preview {
    margin: var(--space-xxs) 0 0;
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#inboxOverlay .inbox-item-response {
    display: inline-block;
    margin-top: var(--space-sm);
    padding: var(--space-xxs) var(--space-sm);
    border-radius: var(--radius-pill);
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

#inboxOverlay .inbox-item-chevron {
    flex-shrink: 0;
    align-self: center;
    font-size: var(--text-lg);
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   EMPTY + LOADING
   An empty screen is an invitation to act, not an apology.
   -------------------------------------------------------------------------- */
#inboxOverlay .inbox-empty {
    padding: var(--space-4xl) var(--space-lg);
    text-align: center;
}

#inboxOverlay .inbox-empty-icon {
    font-size: var(--icon-md);
    margin-bottom: var(--space-md);
}

#inboxOverlay .inbox-empty-title {
    margin: 0 0 var(--space-sm);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
}

#inboxOverlay .inbox-empty-text {
    margin: 0 auto;
    max-width: 30ch;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-muted);
}

#inboxOverlay .inbox-loading {
    padding: var(--space-3xl) var(--space-lg);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   ONE MESSAGE
   -------------------------------------------------------------------------- */
#inboxOverlay .inbox-message {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-xl);
}

#inboxOverlay .inbox-message-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

#inboxOverlay .inbox-message-icon {
    font-size: var(--text-md);
}

#inboxOverlay .inbox-message-expired {
    padding: var(--space-xxs) var(--space-sm);
    border-radius: var(--radius-pill);
    background: var(--bg-muted);
    color: var(--text-secondary);
}

#inboxOverlay .inbox-message-title {
    margin: var(--space-xs) 0 0;
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}

#inboxOverlay .inbox-message-body {
    margin-top: var(--space-lg);
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--text-secondary);
    /* Body text stays readable rather than running the full overlay width. */
    max-width: 62ch;
}

/* --------------------------------------------------------------------------
   LINKS INSIDE THE BODY
   Written as [label](url) in the message. Internal ones render as a button
   (routed through openDeepLink), external ones as an anchor - styled
   identically, because which kind it is isn't the reader's problem.

   Deliberately NOT a block or a pill: a link belongs in the sentence that
   mentions it, so it reads as inline text with an underline, the way a link
   in an email does.
   -------------------------------------------------------------------------- */
#inboxOverlay .inbox-body-link {
    /* Reset the button half so the two render identically. A button
       defaults to its own font, a border and a background; none of which
       an inline link should have. */
    display: inline;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    line-height: inherit;
    text-align: left;

    color: var(--text-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    /* A long URL as its own label shouldn't push the card sideways. */
    overflow-wrap: anywhere;
    transition: color var(--transition-fast);
}

#inboxOverlay .inbox-body-link:hover {
    color: var(--text-purple);
}

/* --------------------------------------------------------------------------
   LINKS
   Internal links are buttons (routed through openDeepLink); external ones
   are anchors. Styled identically so the user doesn't have to care - the
   arrow is what tells them whether they're leaving the app.
   -------------------------------------------------------------------------- */
#inboxOverlay .inbox-message-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
}

#inboxOverlay .inbox-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    background: var(--bg-option);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

#inboxOverlay .inbox-link:hover {
    background: var(--bg-purple);
    border-color: var(--border-purple);
    color: var(--text-primary);
}

#inboxOverlay .inbox-link-arrow {
    flex-shrink: 0;
    font-size: var(--text-md);
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   YES / NO / MAYBE
   -------------------------------------------------------------------------- */
#inboxOverlay .inbox-message-responses {
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--divider-color);
}

#inboxOverlay .inbox-responses-prompt {
    margin: 0 0 var(--space-md);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

#inboxOverlay .inbox-responses-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}

#inboxOverlay .inbox-response-btn {
    padding: var(--space-md) var(--space-xs);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    background: var(--bg-option);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

#inboxOverlay .inbox-response-btn:hover {
    border-color: var(--border-purple);
    color: var(--text-primary);
}

#inboxOverlay .inbox-response-btn.selected {
    background: var(--primary-gradient-simple);
    border-color: transparent;
    color: var(--text-white);
}

/* --------------------------------------------------------------------------
   ARCHIVE
   Quiet by default - it removes something, so it shouldn't compete with the
   response buttons above it.
   -------------------------------------------------------------------------- */
#inboxOverlay .inbox-message-archive {
    display: block;
    width: 100%;
    margin-top: var(--space-lg);
    padding: var(--space-md);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
    transition: color var(--transition-fast);
}

#inboxOverlay .inbox-message-archive:hover {
    color: var(--red);
}

/* Confirming state. The button becomes two halves in place rather than
   opening a modal - same pattern as the unfollow confirm on a profile.
   Remove carries the colour because it's the destructive half and should
   be the one you look at before tapping. */
#inboxOverlay .inbox-message-archive.confirming {
    display: flex;
    gap: var(--space-sm);
    padding: 0;
}

#inboxOverlay .inbox-archive-yes,
#inboxOverlay .inbox-archive-no {
    flex: 1;
    padding: var(--space-md);
    border-radius: var(--radius);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
}

#inboxOverlay .inbox-archive-yes {
    background: var(--bg-red);
    border: 1px solid var(--border-red);
    color: var(--red);
}

#inboxOverlay .inbox-archive-yes:hover {
    background: var(--red);
    color: var(--text-white);
}

/* Cancel is the safe half, so it stays quiet - the eye should land on
   Remove and have to think about it. */
#inboxOverlay .inbox-archive-no {
    background: var(--bg-option);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
}

#inboxOverlay .inbox-archive-no:hover {
    color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY
   -------------------------------------------------------------------------- */
#inboxOverlay .inbox-item:focus-visible,
#inboxOverlay .inbox-body-link:focus-visible,
#inboxOverlay .inbox-response-btn:focus-visible,
#inboxOverlay .inbox-message-archive:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    #inboxOverlay * {
        transition: none;
    }
}