/* =========================================================
   FEED SYSTEM — CARTOON POST-IT UI
   =========================================================

   Application-specific presentation for FeedWiz.

   Architecture
   ---------------------------------------------------------
   #feed-stack
       → normal / compact feeds

   #overlays
       → floating / focused feeds

   .feed
       → shared feed structure

   .overlay / .overlay-*
       → positioning, provided by ui-lang-overlay.css

   .feed-level-*
       → semantic appearance

   .feed-actions
       → controls injected by FeedWiz

   This stylesheet is self-contained.
   It depends only on standard CSS and the DOM structure
   generated by FeedWiz.

   ========================================================= */


/* =========================================================
   TOKENS
   ========================================================= */

:root {
    /* Ink */
    --feed-ink: #2f4a7a;

    /* Semantic backgrounds */
    --feed-info-bg: oklch(92% 0.06 240);
    --feed-success-bg: oklch(92% 0.10 145);
    --feed-warning-bg: oklch(92% 0.12 85);
    --feed-error-bg: oklch(92% 0.14 25);

    /* Geometry */
    --feed-radius: 2px;
    --feed-border: 0 solid var(--feed-ink);
    --feed-shadow: 0 0 0 var(--feed-ink);

    /* Dimensions */
    --feed-stack-width: 180px;
    --feed-overlay-width: 320px;

    /* Controls */
    --feed-control-size: 18px;
    --feed-control-font-size: 16px;

    /* Layering */
    --feed-z-index: 9999;
}


/* =========================================================
   STACK CONTAINER
   ========================================================= */

#feed-stack {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    flex-direction: row;
    gap: 8px;

    z-index: var(--feed-z-index);
}


/* =========================================================
   BASE FEED
   ========================================================= */

.feed {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;

    box-sizing: border-box;

    padding: 12px 14px;

    border: var(--feed-border);
    border-radius: var(--feed-radius);

    background: #fff;
    box-shadow: var(--feed-shadow);
}


/* =========================================================
   STACK FEEDS
   ========================================================= */

#feed-stack .feed {
    width: var(--feed-stack-width);

    font-size: 12px;

    box-shadow: none;

    animation: feed-pop 0.18s ease;
}

#feed-stack .feed-expandable {
  cursor: pointer;
}

/* =========================================================
   OVERLAY FEEDS
   ========================================================= */

#overlays .feed {
    width: var(--feed-overlay-width);
    max-width: 90vw;

    font-size: 14px;
}


/* =========================================================
   LEVELS
   ========================================================= */

.feed-level-info {
    background: var(--feed-info-bg);
}

.feed-level-success {
    background: var(--feed-success-bg);
}

.feed-level-warning {
    background: var(--feed-warning-bg);
}

.feed-level-error {
    background: var(--feed-error-bg);
}


/* =========================================================
   CONTENT
   ========================================================= */

.feed-content {
    flex: 1;
    min-width: 0;
}

/* =========================================================
   ACTIONS
   ========================================================= */

.feed-actions {
    flex-shrink: 0;

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

    gap: 6px;
}

/* =========================================================
   DISMISS BUTTON
   ========================================================= */

.feed-dismiss {
    all: unset;

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

    width: var(--feed-control-size);
    height: var(--feed-control-size);

    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;
    user-select: none;

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

    background: #fff;

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

.feed-dismiss:hover {
    background: #e6efff;
    transform: translate(-1px, -1px);
}

.feed-dismiss:active {
    transform: translate(1px, 1px);
    box-shadow: 0.5px 0.5px 0 var(--feed-ink);
}

/* =========================================================
   STACK INTERACTION
   ========================================================= */

#feed-stack .feed:hover {
    transform: translate(-2px, -2px);
}

#feed-stack .feed:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--feed-ink);
}


/* =========================================================
   INLINE ACTION BUTTONS
   ========================================================= */

.feed-content [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(--feed-ink);
    border-radius: 6px;

    background: #fff;

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

    margin-top: 6px;
}

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

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


/* =========================================================
   STACK ENTRY ANIMATION
   ========================================================= */

@keyframes feed-pop {
    from {
        transform: translateY(6px) scale(0.96);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}