/* =========================================================
   FEED SYSTEM — CARTOON POST-IT UI (SIMPLIFIED ARCHITECTURE)

   CORE IDEA
   ---------------------------------------------------------
   1. stacked  → small post-its in a horizontal strip
   2. overlay  → centered focused post-it
   3. level    → background color only (semantic)
   4. actions  → minimal UI controls (dismiss)

   RULES
   ---------------------------------------------------------
   - NO type-based layout system
   - NO mixed responsibilities in CSS
   - STACK = uniform representation
   - OVERLAY = expanded representation
   ========================================================= */


/* =========================================================
   TOKENS (design constants)
   ========================================================= */

   :root {
    /* ink stays RGB (fine as-is) */
    --ink: #2f4a7a;
  
    /* OKLab semantic colors */
    --info-bg: oklch(92% 0.06 240);
    --success-bg: oklch(92% 0.10 145);
    --warning-bg: oklch(92% 0.12 85);
    --error-bg: oklch(92% 0.14 25);
  
    --radius: 2px;
    --border: 0px solid var(--ink);
    --shadow: 0px 0px 0 var(--ink);
  }
  
  
  /* =========================================================
     STACK CONTAINER (layout only)
     ---------------------------------------------------------
     Horizontal “post-it strip” anchored at top-center.
     ========================================================= */
  
  .feed-stack {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
  
    display: flex;
    flex-direction: row;
    gap: 8px;
  
    z-index: 9999;
  }
  
  
  /* =========================================================
     BASE FEED (shared structure)
     ---------------------------------------------------------
     Always applies regardless of state.
     ========================================================= */
  
     .feed {
      display: flex;
      flex-direction: row;
    
      align-items: flex-start;
    
      gap: 10px;
    
      box-sizing: border-box;
    
      padding: 12px 14px;
    
      border: var(--border);
      border-radius: var(--radius);
    
      background: #fff;
      box-shadow: var(--shadow);
    }
  
  
  /* =========================================================
     STACKED STATE (compact post-it)
     ---------------------------------------------------------
     Small, clickable note inside stack.
     No positioning logic here.
     ========================================================= */
  
  .feed-stacked {
    width: 180px;
    font-size: 12px;
  
    cursor: pointer;
  
    animation: feed-pop 0.18s ease;
  }
  
  
  /* =========================================================
     OVERLAY STATE (focused post-it)
     ---------------------------------------------------------
     Centered modal-like expansion.
     ========================================================= */
  
  .feed-overlay {
    position: fixed;
  
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  
    width: 320px;
    max-width: 90vw;
  
    z-index: 10000;
  
    font-size: 14px;
  }
  
  
  /* =========================================================
     LEVELS (semantic meaning only)
     ---------------------------------------------------------
     Background color encodes message severity/type.
     No layout changes allowed here.
     ========================================================= */
  
  .feed-level-info {
    background: var(--info-bg);
  }
  
  .feed-level-success {
    background: var(--success-bg);
  }
  
  .feed-level-warning {
    background: var(--warning-bg);
  }
  
  .feed-level-error {
    background: var(--error-bg);
  }
  
  .feed-content {
    flex: 1;
    min-width: 0; /* IMPORTANT: prevents overflow issues */
  } 

  /* =========================================================
     DISMISS BUTTON (UI control)
     ---------------------------------------------------------
     Always top-right inside feed.
     Injected by FeedWiz.
     ========================================================= */
  
  .feed-actions {
    flex-shrink: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 6px;
  }
  
  /* =========================================================
     ANIMATION (stack entry)
     ========================================================= */
  
  @keyframes feed-pop {
    from {
      transform: translateY(6px) scale(0.96);
      opacity: 0;
    }
    to {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }  
  
  /* =========================================================
     INTERACTION FEEL (shared behavior)
     ---------------------------------------------------------
     Slight “cartoon press/lift” effect.
     ========================================================= */
  
  .feed:hover {
    transform: translate(-2px, -2px);
  }
  
  .feed:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--ink);
  }

  /* =========================================================
   INLINE ACTION BUTTONS (HTML CONTENT)
   ---------------------------------------------------------
   Buttons declared inside feed.html via:
   <button data-action="...">
   ========================================================= */

.feed [data-action] {
  all: unset;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 2px 6px;

  font-size: 12px;
  line-height: 1;

  cursor: pointer;
  user-select: none;

  border: 1.5px solid var(--ink);
  border-radius: 6px;

  background: #fff;

  box-shadow: 1px 1px 0 var(--ink);

  margin-top: 6px;
}

/* hover feedback */
.feed [data-action]:hover {
  background: #e6efff;
  transform: translate(-1px, -1px);
}

/* press feedback */
.feed [data-action]:active {
  transform: translate(1px, 1px);
  box-shadow: 0.5px 0.5px 0 var(--ink);
}