/* ================================
   Rules Lawyer — Layout & Theme
   Scoped under #content .ruleslawyer
   ================================ */

#content .ruleslawyer {
    --glass: rgba(0,0,0,.48);
    --glass-weak: rgba(0,0,0,.65);
    --border: rgba(255,255,255,.42);
    --text: #fff;
    --muted: rgba(255,255,255,.8);
    --accent: #21a366;
    --accent2: #2bd081;
    color: var(--text);
}

.is-hidden {
    display: none !important;
}

/* ---- Single-column layout & wider container (no sidebar) ---- */
#content .ruleslawyer .container {
    max-width: 1200px; /* wider than your site default */
    margin-inline: auto;
}

/* (If some templates still have .layout-2col, force it to 1col here) */
#content .ruleslawyer .layout-2col {
    display: block;
}

/* ----- Chat column ----- */
#content .rl-chat {
    position: relative;
}

#content .rl-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem;
}

#content .rl-title {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.2;
}

#content .rl-badges {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
}

#content .rl-badge {
    font-size: .75rem;
    font-weight: 800;
    padding: .2rem .5rem;
    border-radius: .5rem;
    border: 1px solid var(--border);
    background: var(--glass);
    letter-spacing: .02em;
}

#content .rl-badge-ai {
    color: #fff;
    border-color: rgba(43,208,129,.4)
}

#content .rl-badge-srd {
    color: #fff;
    border-color: rgba(255,255,255,.25)
}

#content .rl-badge-ver {
    color: #fff;
    border-color: rgba(255,255,255,.5);
}

/* Utility buttons */
#content .rl-clear {
    margin-left: auto;
    background: transparent;
    color: #fff;
    border: 1px solid var(--border);
    border-radius: .5rem;
    padding: .4rem .6rem;
    cursor: pointer;
}

    #content .rl-clear.is-hidden {
        display: none;
    }

    #content .rl-clear:hover {
        background: rgba(255,255,255,.08);
    }

/* ----- Version Gate ----- */
#content .rl-gate {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: .75rem;
    padding: 1rem;
    box-shadow: 0 12px 36px rgba(0,0,0,.35);
    text-align: center;
}

#content .rl-gate-title {
    margin: 0 0 .3rem;
    font-size: 1.2rem;
}

#content .rl-gate .muted {
    color: var(--muted);
    margin-bottom: .6rem;
}

#content .rl-gate-buttons {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    width: min(520px, 100%);
}

#content .rl-gate-btn {
    padding: .75rem 1rem;
    border-radius: .7rem;
    font-weight: 900;
    letter-spacing: .02em;
    cursor: pointer;
    color: #fff;
    border: 1px solid transparent;
    background: linear-gradient(180deg, var(--accent2), var(--accent));
    box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.16);
}

    #content .rl-gate-btn:hover {
        filter: brightness(1.06);
        transform: translateY(-1px);
    }

    #content .rl-gate-btn:active {
        filter: brightness(.98);
        transform: none;
    }

/* ----- Chat UI ----- */
#content .rl-messages {
    background: var(--glass-weak);
    border: 1px solid var(--border);
    border-radius: .75rem;
    padding: .75rem;
    height: min(60vh, 560px);
    overflow: auto;
    box-shadow: 0 12px 36px rgba(0,0,0,.35);
}

#content .rl-msg {
    display: flex;
    margin: .5rem 0;
}

    #content .rl-msg.is-user {
        justify-content: flex-end;
    }

    #content .rl-msg.is-assistant {
        justify-content: flex-start;
    }

/* WIDER bubbles */
#content .rl-bubble {
    max-width: clamp(70ch, 75vw, 110ch);
    padding: .7rem .9rem;
    border-radius: .9rem;
    line-height: 1.35;
    border: 1px solid var(--border);
    background: rgba(0,0,0,.55);
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

#content .rl-msg.is-user .rl-bubble {
    background: linear-gradient(180deg, var(--accent2), var(--accent));
    color: #fff;
    border-color: transparent;
}

#content .rl-msg-foot {
    margin-top: .35rem;
    font-size: .85rem;
    opacity: .85;
}

/* typing dot animation */
#content .rl-typing {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

    #content .rl-typing span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255,255,255,.9);
        animation: rl-bounce 1s infinite ease-in-out;
    }

        #content .rl-typing span:nth-child(2) {
            animation-delay: .15s
        }

        #content .rl-typing span:nth-child(3) {
            animation-delay: .3s
        }

@keyframes rl-bounce {
    0%,80%,100% {
        transform: translateY(0);
        opacity: .6
    }

    40% {
        transform: translateY(-4px);
        opacity: 1
    }
}

/* Input area */
#content .rl-form {
    margin-top: .75rem;
}

#content .rl-input-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem;
}

#content .rl-input {
    width: 100%;
    color: #fff;
    background: rgba(0,0,0,.58);
    border: 1px solid var(--border);
    border-radius: .6rem;
    padding: .7rem .8rem;
    resize: vertical;
}

#content .rl-send {
    padding: .7rem 1rem;
    font-weight: 800;
    border-radius: 999px;
    border: 1px solid transparent;
    background: linear-gradient(180deg, var(--accent2), var(--accent));
    color: #fff;
    cursor: pointer;
}

    #content .rl-send[disabled] {
        opacity: .7;
        cursor: not-allowed;
    }

#content .rl-footnote {
    margin-top: .6rem;
    color: var(--muted);
}

/* Focus ring */
#content .rl-input:focus,
#content .rl-send:focus,
#content .rl-clear:focus,
#content .rl-gate-btn:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- Old sidebar styles not needed anymore (kept harmless if present) --- */
/* #content .rl-side, .rl-panel, .rl-panel-title, .rl-citations, .rl-cite-empty { } */