/* The theme's .section reserves 80px/130px of padding — far too much
   framing for a full-height chat. Slim it so the conversation owns
   the viewport. The long selector outweighs the theme's
   `.page-header + .page-wrapper .page-content > .section:first-child`
   rules (including their media-query variants). */
.section.ff-chat-section,
.page-header + .page-wrapper .page-content > .section.ff-chat-section {
    padding-top: 16px;
    padding-bottom: 40px;
}

.ff-chat {
    display: flex;
    height: 80vh; /* no-JS fallback; chat.js sizes to the viewport */
    min-height: 380px;
    background: transparent;
    overflow: hidden;
    position: relative;
}

.ff-chat--disabled,
.ff-chat--signin {
    display: block;
    height: auto;
    min-height: 0;
    padding: 24px;
    text-align: center;
}

/* Locked state: inline password prompt */
.ff-chat__unlock {
    display: flex;
    gap: 8px;
    justify-content: center;
    max-width: 380px;
    margin: 16px auto 0;
}

.ff-chat__unlock-input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font: inherit;
}

.ff-chat__unlock-btn {
    padding: 8px 16px;
    border: 0;
    border-radius: 6px;
    background: #b08140;
    color: #fff;
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.ff-chat__unlock-btn:hover:not(:disabled) {
    background: #9a6f35;
}

.ff-chat__unlock-btn:disabled {
    opacity: 0.5;
}

.ff-chat__unlock--stacked {
    flex-direction: column;
}

.ff-chat__unlock--stacked .ff-chat__unlock-btn {
    align-self: stretch;
}

.ff-chat__unlock-error {
    margin-top: 10px;
    color: #b90707;
    font-size: 0.9em;
}

.ff-chat__signin-links {
    margin-top: 14px;
    font-size: 0.9em;
    color: #959898;
}

/* --- Sidebar: past conversations --- */

.ff-chat__sidebar {
    display: flex;
    flex-direction: column;
    width: 240px;
    flex-shrink: 0;
    background: #2e363e;
    border-radius: 8px;
}

.ff-chat__new-btn {
    margin: 12px;
    padding: 9px 12px;
    border: 1px solid #b08140;
    border-radius: 6px;
    background: transparent;
    color: #d9b98a;
    font: inherit;
    font-size: 0.9em;
    text-align: left;
    cursor: pointer;
}

.ff-chat__new-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

.ff-chat__convos {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 12px;
}

.ff-chat__convo {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 2px;
    padding: 8px 26px 8px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: #aeb4ba;
}

.ff-chat__convo-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: #8f979e;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
}

.ff-chat__convo:hover .ff-chat__convo-delete,
.ff-chat__convo-delete:focus {
    opacity: 1;
}

.ff-chat__convo-delete:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #f2efe9;
}

.ff-chat__convo:hover {
    background: rgba(255, 255, 255, 0.06);
}

.ff-chat__convo.is-active {
    background: rgba(255, 255, 255, 0.10);
    border-left: 3px solid #b08140;
    border-radius: 0;
    padding-left: 7px;
}

.ff-chat__convo.is-active .ff-chat__convo-title {
    color: #f2efe9;
}

.ff-chat__convo-title {
    display: block;
    font-size: 0.88em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ff-chat__convo-date {
    display: block;
    font-size: 0.72em;
    color: #767e85;
    margin-top: 1px;
}

/* --- Main column: active conversation --- */

.ff-chat__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ff-chat__mainbar {
    display: none;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
}

.ff-chat__sidebar-toggle {
    border: 1px solid #b08140;
    border-radius: 6px;
    background: #fff;
    padding: 6px 10px;
    font: inherit;
    font-size: 0.85em;
    color: #8a6531;
    cursor: pointer;
}

.ff-chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ff-chat__message {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.ff-chat__message--user {
    align-self: flex-end;
    background: #2e363e;
    color: #f5f3ef;
    border-bottom-right-radius: 4px;
}

.ff-chat__message--assistant {
    align-self: flex-start;
    background: #f6f3ee;
    color: #2c2c2a;
    border-bottom-left-radius: 4px;
}

.ff-chat__message--pending {
    opacity: 0.6;
    font-style: italic;
}

/* Rich (markdown-rendered) assistant messages */
.ff-chat__message--rich {
    white-space: normal;
}

.ff-chat__message--rich p {
    margin: 0 0 10px;
}

.ff-chat__message--rich p:last-child,
.ff-chat__message--rich ul:last-child,
.ff-chat__message--rich ol:last-child,
.ff-chat__message--rich pre:last-child,
.ff-chat__message--rich blockquote:last-child {
    margin-bottom: 0;
}

.ff-chat__message--rich .ff-chat__heading {
    font-weight: 700;
    margin: 0 0 6px;
}

.ff-chat__message--rich ul,
.ff-chat__message--rich ol {
    margin: 0 0 10px;
    padding-left: 22px;
}

.ff-chat__message--rich li {
    margin: 0 0 4px;
}

.ff-chat__message--rich code {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.9em;
}

.ff-chat__message--rich pre {
    background: #2d3237;
    color: #eee;
    border-radius: 6px;
    padding: 10px 12px;
    margin: 0 0 10px;
    overflow-x: auto;
}

.ff-chat__message--rich pre code {
    background: none;
    padding: 0;
    font-size: 0.85em;
}

.ff-chat__message--rich blockquote {
    border-left: 3px solid #d8d0c2;
    margin: 0 0 10px;
    padding: 2px 0 2px 10px;
    color: #555;
}

.ff-chat__message--rich a {
    color: #8a6531;
    text-decoration: underline;
}

.ff-chat__cite {
    color: #8a6531;
    font-size: 0.72em;
    margin-left: 1px;
    cursor: help;
}

/* Adjacent citations ([1][3]) would read as one number — separate them */
.ff-chat__cite + .ff-chat__cite::before {
    content: ",";
    margin-right: 1px;
}

.ff-chat__sources {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.8em;
    color: #8a8578;
}

.ff-chat__sources-label {
    font-weight: 600;
    margin-bottom: 4px;
}

.ff-chat__sources-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ff-chat__sources-list li {
    margin: 0 0 2px;
}

.ff-chat__sources-n {
    display: inline-block;
    min-width: 18px;
    color: #b08140;
    font-size: 0.9em;
}

/* Ghost icon action row below each bubble (Open WebUI style).
   The bottom padding reserves space for the hover pill labels so they
   never add overflow inside the scrolling messages pane (which made
   the scrollbar jump); the negative margin keeps message spacing
   unchanged. */
.ff-chat__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: -6px;
    padding-bottom: 34px;
    margin-bottom: -24px;
}

.ff-chat__actions--assistant {
    align-self: flex-start;
    margin-left: 6px;
}

.ff-chat__actions--user {
    align-self: flex-end;
    margin-right: 6px;
}

/* Past messages: reveal actions on hover; the newest response's bar
   (.is-current) stays visible. Touch devices keep everything visible. */
@media (hover: hover) {
    .ff-chat__actions {
        opacity: 0;
        transition: opacity 0.12s ease;
    }

    .ff-chat__message:hover + .ff-chat__actions,
    .ff-chat__actions:hover,
    .ff-chat__actions.is-current {
        opacity: 1;
    }
}

.ff-chat__speak,
.ff-chat__regen,
.ff-chat__copy {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #9a948a;
    line-height: 1;
    cursor: pointer;
}

/* Pill label beneath the icon on hover */
.ff-chat__speak:hover::after,
.ff-chat__regen:hover::after,
.ff-chat__copy:hover::after {
    content: attr(data-label);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #2e363e;
    color: #fff;
    padding: 5px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-style: normal;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
}

.ff-chat__speak:hover,
.ff-chat__regen:hover,
.ff-chat__copy:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #8a6531;
}

.ff-chat__speak.is-loading {
    opacity: 0.5;
    cursor: wait;
}

.ff-chat__speak.is-playing,
.ff-chat__copy.is-copied {
    color: #b08140;
}

.ff-chat__notice {
    margin: 0 16px 8px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #fcf3e3;
    color: #7a5b1e;
    font-size: 0.9em;
}

.ff-chat__form {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #eee;
}

.ff-chat__input {
    flex: 1;
    resize: none;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font: inherit;
    /* chat.js grows the box with its content; cap it so long drafts
       scroll instead of squeezing the conversation out of view */
    max-height: 32vh;
    overflow-y: auto;
}

.ff-chat__send {
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #b08140;
    color: #fff;
    cursor: pointer;
}

.ff-chat__send:hover:not(:disabled) {
    background: #9a6f35;
}

/* Mid-generation the send button becomes a stop button */
.ff-chat__send--stop {
    background: #2e363e;
}

.ff-chat__send--stop:hover:not(:disabled) {
    background: #454f59;
}

.ff-chat__send:disabled,
.ff-chat__input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ff-chat__footer {
    display: flex;
    justify-content: flex-end;
    padding: 6px 16px 10px;
    font-size: 0.85em;
    color: #959898;
}

/* --- Mobile: sidebar becomes a toggleable drawer --- */

@media (max-width: 700px) {
    /* Vertical space is scarce: compact the page title (the theme
       reserves ~100px below it) and the chat chrome so the
       conversation gets the screen. */
    .ff-chat-page-header .header-inline {
        padding-bottom: 0;
    }

    .ff-chat-page-header .page-title {
        font-size: 22px;
        margin: 10px 0 12px;
    }

    .section.ff-chat-section,
    .page-header + .page-wrapper .page-content > .section.ff-chat-section {
        padding-top: 6px;
    }

    .ff-chat {
        height: 80vh;
        font-size: 0.88em;
    }

    .ff-chat__mainbar {
        padding: 6px 10px;
    }

    .ff-chat__sidebar-toggle {
        padding: 4px 10px;
        font-size: 0.8em;
    }

    .ff-chat__messages {
        padding: 14px;
    }

    .ff-chat__form {
        flex-direction: column;
        gap: 6px;
        padding: 10px 12px;
    }

    .ff-chat__input {
        /* Auto-grow takes it from here (chat.js) */
        min-height: 56px;
    }

    .ff-chat__footer {
        padding: 4px 12px 8px;
        font-size: 0.78em;
    }

    .ff-chat__send {
        align-self: stretch;
        width: 100%;
        height: 42px;
        border-radius: 6px;
    }

    .ff-chat__sidebar {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 5;
        width: 260px;
        max-width: 85%;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
    }

    .ff-chat--sidebar-open .ff-chat__sidebar {
        transform: translateX(0);
    }

    .ff-chat__mainbar {
        display: block;
    }

    /* No reliable hover on touch — keep delete affordance visible */
    .ff-chat__convo-delete {
        opacity: 0.6;
    }
}