/*
 * Toast mobile collapse toggle.
 * ------------------------------------------------------------------
 * Paints what client/js/toast-collapse.js builds: a button on the
 * title row of a card that has a body or an attachment strip, and the
 * collapse rule that hides both by default on a narrow screen.
 *
 * SPLIT OUT OF client/css/toast.css, which was already 516 lines
 * against the repo's 500-line guideline before this feature - the same
 * reason session-sidebar-groups.css sits beside session-sidebar-groups.js
 * instead of growing styles.css. Loaded AFTER toast.css in
 * client/index.html so these rules win at equal specificity, though the
 * collapse rule below also carries higher specificity than toast.css's
 * own `.toast__body` / `.toast__thumbs` rules on its own, so load order
 * here is a belt, not the buckle.
 *
 * THE 640px BREAKPOINT IS THE ONE toast.css's OWN MOBILE BLOCK ALREADY
 * USES - copied, not invented. toast.css switches `.toast-container` to
 * full width at that same point, and a second breakpoint here would
 * risk a card whose toggle appears at a different width than its
 * collapse takes effect, which is a worse bug than the one this file
 * fixes.
 * ------------------------------------------------------------------
 */

/* Hidden on every viewport by default, so a desktop card gains no new
   control at all - only the media query below turns it on. The
   collapse feature is entirely a phone-width concern. */
.toast__toggle {
  display: none;
}

@media (max-width: 640px) {
  /* THE COLLAPSE ITSELF. Hidden unless the card explicitly carries
     data-expanded="1" - never the reverse (hidden only when it says
     "0") - so a card whose data-expanded attribute has never been set
     starts collapsed. That is what makes "collapsed by default" a CSS
     fact rather than something client/js/toast-collapse.js has to
     remember to stamp onto every card it builds. */
  .toast:not([data-expanded="1"]) .toast__body,
  .toast:not([data-expanded="1"]) .toast__thumbs {
    display: none;
  }

  .toast__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex-shrink: 0;
    /* The same escape from styles.css's var(--control-size)
       square-button rule that .toast__dismiss needs in toast.css, for
       the same reason: unsized, this 10px glyph would sit in a
       36-44px box. */
    width: auto;
    height: auto;
    padding: 4px;
    /* The base layer's type rules (data-btn) must not reach this glyph button: back to the browser's own button font. */
    font: revert;
    background: transparent;
    border: none;
    color: var(--oc-text-secondary);
    cursor: pointer;
    border-radius: var(--oc-radius-sm);
  }

  .toast__toggle:hover,
  .toast__toggle:focus-visible {
    background: var(--oc-ground-hover);
    color: var(--oc-text-primary);
  }

  .toast__toggle-chevron {
    display: inline-flex;
    width: 10px;
    height: 10px;
    transition: transform 120ms ease;
  }

  /* Points right (collapsed) by default, down (expanded) once toggled -
     the same rotation client/css/session-sidebar-groups.css uses for
     its own fold chevron, driven off the same attribute a screen
     reader reads. */
  .toast__toggle[aria-expanded="true"] .toast__toggle-chevron {
    transform: rotate(90deg);
  }
}

/* The toast card itself became clickable when raising went global: most
   cards on screen are now about a session the user is NOT looking at,
   so the card is the shortest route to it. The dismiss button stops the
   click propagating, so dismissing never navigates. */
.toast.toast--clickable {
  cursor: pointer;
}


}