html,
body {
    height: 100%;
    margin: 0;
    font-family: Segoe UI, system-ui, -apple-system, sans-serif;
}

/* Column layout: small logo header on top, chat fills the rest. overflow:hidden keeps the page
   itself from ever scrolling past the viewport — Web Chat scrolls inside #webchat instead. */
body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#app-header {
    flex: 0 0 auto;
    padding: 0.4rem 0.75rem;
    background: #fff;
    border-bottom: 1px solid #e5e1e6;
    max-height: 4em;
}

#logo {
    height: 30px;
    width: auto;
    display: block;
}

#webchat {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;   /* allow the chat to shrink within the flex column */
}

#status {
    padding: 1rem;
    color: #444;
}

/* Rate-limit banner: a fixed overlay pinned to the bottom, over the (disabled) send box, so
   toggling it never changes the chat layout / pushes the input off-screen. */
#ratelimit-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: 0.7rem 1rem;
    background: #fff4ce;            /* amber warning */
    border-top: 1px solid #e6c200;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
    color: #6b5900;
    font-size: 0.9rem;
    text-align: center;
}

/* Visual cue that sending is disabled during the cooldown. The store middleware is the real
   guard (it blocks the send actions); this just greys out the send box. Class names target
   Web Chat's send box best-effort and degrade gracefully if they change. */
#webchat.scowl-rate-limited .webchat__send-box,
#webchat.scowl-rate-limited [class*="send-box"] {
    opacity: 0.5;
}

#webchat.scowl-rate-limited .webchat__send-box *,
#webchat.scowl-rate-limited [class*="send-box"] * {
    pointer-events: none;
}