/* Message toast — Slice A of plan/message-toast/.
   Scoped .msg-toast-* prefix, no collisions with app.css. Kept in its
   own file because Cody currently owns app.css this session. */

:root {
  /* Toast-specific tokens. Duplicated shadow/radius pattern rather
     than reusing generic ones so a later polish doesn't nudge every
     card in the app when we tune the toast alone. */
  --yc-toast-shadow: 0 12px 32px -10px rgba(0, 44, 66, 0.28);
  --yc-toast-radius: var(--yc-radius);
}

message-toast-host {
  /* Custom element is a positioning container only — the card inside
     is positioned. Host itself is invisible when empty (no card). */
  display: contents;
}

.msg-toast {
  /* Mobile default (< 768px per Decision 2): floating card 16px
     inset from left/right, offset from the app-header. */
  position: fixed;
  top: calc(var(--yc-header-h, 56px) + 8px);
  left: 8px;
  right: 8px;
  z-index: 950;                  /* above content, below modals (999) */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--yc-white);
  color: var(--yc-body);
  font-family: var(--yc-font);
  border: 1px solid var(--yc-hairline);
  border-radius: var(--yc-toast-radius);
  box-shadow: var(--yc-toast-shadow);
  cursor: pointer;
  /* Slide-down entrance — .is-open added on next-frame. */
  transform: translateY(-16px);
  opacity: 0;
  transition: transform var(--yc-motion-standard, 240ms) var(--yc-ease-out, ease-out),
              opacity  var(--yc-motion-standard, 240ms) var(--yc-ease-out, ease-out);
}
.msg-toast.is-open { transform: translateY(0); opacity: 1; }
.msg-toast:focus { outline: var(--yc-focus, 2px solid var(--yc-orange));
                    outline-offset: 2px; }

.msg-toast__body {
  flex: 1 1 auto;
  min-width: 0;                  /* enables ellipsis on flex child */
}

.msg-toast__head {
  font-size: var(--yc-fs-sm);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-toast__name {
  font-weight: var(--yc-fw-semibold);
  color: var(--yc-body);
}
.msg-toast__label { color: var(--yc-cat-other); }

.msg-toast__preview {
  margin-top: 2px;
  font-size: var(--yc-fs-sm);
  color: var(--yc-body);
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-toast__open {
  flex: 0 0 auto;
  background: transparent;
  color: var(--yc-teal-dark);
  border: 1px solid var(--yc-teal-dark);
  border-radius: var(--yc-radius-pill);
  padding: 6px 14px;
  font-size: var(--yc-fs-sm);
  font-weight: var(--yc-fw-semibold);
  font-family: inherit;
  cursor: pointer;
}
.msg-toast__open:hover { background: rgba(32, 128, 159, 0.08); }

.msg-toast__x {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: var(--yc-cat-other);
  font-size: 20px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  font-family: inherit;
}
.msg-toast__x:hover { color: var(--yc-body); }

/* Desktop (≥ 768px per Decision 2): sticky band feel — we still use
   `position: fixed` so the toast never shifts page content (Decision 2
   is explicit: does NOT push page content down). Just widens + centres. */
@media (min-width: 768px) {
  .msg-toast {
    left: 50%;
    right: auto;
    transform: translate(-50%, -16px);
    width: min(720px, calc(100% - 32px));
    top: calc(var(--yc-header-h, 56px) + 12px);
    padding: 14px 18px;
  }
  .msg-toast.is-open { transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .msg-toast { transition: none; }
}