/* LocBx Office edition (LOCBX_EDITION=office): light business theme on top of style.css. Loaded after style.css. */
:root,
:root[data-theme="dark"],
:root[data-theme="light"],
:root:not([data-theme="dark"]) {
    --bg: #F6F7F9;
    --bg-soft: #FFFFFF;
    --panel: #FFFFFF;
    --panel-2: #F2F4F7;
    --glass: #FFFFFF;
    --line: #E4E7EC;
    --text: #101828;
    --text-soft: #475467;
    --link: #1E4FD8;
    --brand: #1E4FD8;
    --brand-hover: #163BA3;
    --ok: #067647;
    --in-bubble: #FFFFFF;
    --out-bubble: #1E4FD8;
    --danger: #B42318;
    --input-bg: #FFFFFF;
    --input-border: #D0D5DD;
    --focus-ring: rgba(30, 79, 216, 0.25);
    --bubble-meta: #475467;
    --popup-bg: #FFFFFF;
    --scrollbar: #D0D5DD;
    --bg-grad-top: #F6F7F9;
    --bg-grad-bottom: #F6F7F9;
    --feed-surface: #F9FAFB;
    --feed-dots: transparent;
    --compose-bg: #FFFFFF;
    --header-icon: #101828;
    --bs-body-bg: #F6F7F9;
    --bs-body-color: #101828;
    --bs-secondary-color: #475467;
    --bs-primary: #1E4FD8;
    --bs-primary-rgb: 30, 79, 216;
    --bs-link-color: #1E4FD8;
    --bs-link-color-rgb: 30, 79, 216;
}

html, body, .btn, .form-control, .form-select {
    font-family: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

/* Incoming bubbles need an edge on the light ground. */
.locbx-bubble-in, .bubble-in, .msg-in {
    border: 1px solid #E4E7EC;
}

/* Business buttons: calmer radius, brand blue. */
.btn { border-radius: 6px; }
.btn-primary {
    --bs-btn-bg: #1E4FD8; --bs-btn-border-color: #1E4FD8;
    --bs-btn-hover-bg: #163BA3; --bs-btn-hover-border-color: #163BA3;
    --bs-btn-active-bg: #163BA3; --bs-btn-active-border-color: #163BA3;
}
.btn-secondary {
    --bs-btn-bg: #FFFFFF; --bs-btn-color: #101828; --bs-btn-border-color: #D0D5DD;
    --bs-btn-hover-bg: #F2F4F7; --bs-btn-hover-color: #101828; --bs-btn-hover-border-color: #D0D5DD;
}
.btn-outline-light {
    --bs-btn-color: #101828; --bs-btn-border-color: #D0D5DD;
    --bs-btn-hover-bg: #F2F4F7; --bs-btn-hover-color: #101828; --bs-btn-hover-border-color: #D0D5DD;
}

/* Modals and panels are hard-coded dark in the markup; turn them light here. */
.modal-content.bg-dark,
.bg-dark {
    background-color: #FFFFFF !important;
    color: #101828 !important;
}
.text-light { color: #101828 !important; }
.text-white:not(.btn):not(.participant-pill):not(.locbx-header-icon-btn) { color: #101828 !important; }
.border-secondary { border-color: #E4E7EC !important; }
.btn-close-white { filter: none; }
.text-secondary, .text-body-secondary { color: #475467 !important; }

/* Theme switcher makes no sense in a fixed business theme. */
.locbx-theme-fab { display: none !important; }

/* Link back to the business site, shown in the app footer on office. */
.locbx-office-backlink { color: #475467; text-decoration: none; }
.locbx-office-backlink:hover { color: #101828; text-decoration: underline; }

/* ---------- Office workspace: side panels around the chat (include/office_workspace.php) ---------- */
.ow-rooms, .ow-panel { display: none; }
.ow-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #475467; margin: 0; }
.ow-muted { color: #475467; font-size: 13px; }
.ow-mono { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: #475467; }
.ow-empty { margin: 0; font-size: 14px; color: #475467; }

.ow-rooms {
    position: fixed; top: 0; bottom: 0; left: 0; width: 260px; z-index: 101;
    background: #FFFFFF; border-right: 1px solid #E4E7EC; flex-direction: column; overflow-y: auto;
}
.ow-rooms__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 16px 10px; }
.ow-new { font-size: 13px; font-weight: 600; text-decoration: none; color: #1E4FD8; }
.ow-rooms__list { display: flex; flex-direction: column; padding-bottom: 16px; }
.ow-rooms__list .ow-empty { padding: 4px 16px; }
.ow-room {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 12px 16px; border-left: 3px solid transparent; color: #101828; text-decoration: none; font-size: 15px;
}
.ow-room:hover { background: #F2F4F7; color: #101828; }
.ow-room.is-current { background: #EEF3FD; border-left-color: #1E4FD8; font-weight: 600; }
.ow-room__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ow-room__time { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: #8A4B08; font-weight: 400; }

.ow-panel {
    position: fixed; top: 0; bottom: 0; right: 0; width: 320px; z-index: 101;
    background: #FFFFFF; border-left: 1px solid #E4E7EC; flex-direction: column; overflow-y: auto;
}
.ow-panel__top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 4px; }
.ow-close { display: none; width: 44px; height: 44px; border: 0; background: transparent; font-size: 26px; line-height: 1; color: #344054; cursor: pointer; }
.ow-panel__body { padding: 8px 20px 24px; display: flex; flex-direction: column; gap: 22px; }
.ow-room-title { display: flex; flex-direction: column; gap: 6px; }
.ow-room-title strong { font-size: 18px; }
.ow-timer { align-self: flex-start; font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: #8A4B08; background: #FEF3E2; padding: 5px 9px; border-radius: 4px; }
.ow-sec { display: flex; flex-direction: column; gap: 10px; }
.ow-link { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: #F2F4F7; border-radius: 6px; padding: 9px 11px; overflow-wrap: anywhere; color: #101828; }
.ow-btn { min-height: 40px; font: inherit; font-size: 14px; font-weight: 500; background: #FFFFFF; color: #101828; border: 1px solid #D0D5DD; border-radius: 6px; padding: 8px 12px; cursor: pointer; }
.ow-btn:hover { background: #F2F4F7; }
.ow-hint { margin: 0; font-size: 13px; line-height: 1.5; color: #475467; }
.ow-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.ow-list li { display: flex; justify-content: space-between; gap: 10px; }
.ow-files li { flex-direction: column; gap: 2px; }
.ow-files a { color: #1E4FD8; text-decoration: none; overflow-wrap: anywhere; font-weight: 500; }
.ow-files a:hover { text-decoration: underline; }
.ow-log li { justify-content: flex-start; }
.ow-log li.is-fail span:last-child { color: #B42318; }

/* Wide screens: three columns while a room is open. */
@media (min-width: 1100px) {
    body:has(#boxfeed.app-page--active) .ow-panel { display: flex; }
    body.ow-has-rooms:has(#boxfeed.app-page--active) .ow-rooms { display: flex; }
    body.ow-enabled #boxfeed.app-page.app-page--active { right: 320px; width: auto !important; }
    body.ow-enabled.ow-has-rooms #boxfeed.app-page.app-page--active { left: 260px !important; }
    .ow-toggle { display: none !important; }
}

/* Narrow screens: details panel opens over the chat from the header button. */
@media (max-width: 1099.98px) {
    .ow-panel.is-open { display: flex; width: min(360px, 100%); z-index: 1060; box-shadow: -12px 0 32px rgba(16, 24, 40, 0.18); }
    .ow-panel.is-open .ow-close { display: block; }
}