:root { --app-chat-sidebar-w: 0px; --app-chat-sidebar-width: 23rem; }
html.app-chat-sidebar-open { --app-chat-sidebar-w: var(--app-chat-sidebar-width); }
html.app-chat-sidebar-open .app-main:not(.app-main--fullscreen) { margin-right: calc(var(--page-right-margin) + var(--app-chat-sidebar-w)); width: calc(100% - var(--sidebar-collapsed-w) - var(--page-right-margin) - var(--app-chat-sidebar-w)); }
html.app-chat-sidebar-open .app-shell-loader { right: calc(var(--page-right-margin) + var(--app-chat-sidebar-w)); }

.app-chat-sidebar-toggle { position: fixed; top: .75rem; right: 1rem; z-index: 1240; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--app-border); border-radius: var(--app-radius-sm); background: var(--app-surface); color: var(--app-text-muted); box-shadow: var(--app-shadow-sm); cursor: pointer; }
.app-chat-sidebar-toggle:hover, .app-chat-sidebar-toggle:focus-visible, .app-chat-sidebar-toggle[aria-expanded='true'] { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-accent-strong); outline: none; }
.app-chat-sidebar-toggle--in-navbar { position: relative; top: auto; right: auto; z-index: auto; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.app-chat-sidebar-toggle.has-unread { color: var(--app-accent-strong); }
.app-chat-sidebar-toggle__badge { position: absolute; top: -.35rem; right: -.35rem; display: inline-flex; align-items: center; justify-content: center; min-width: 1.1rem; height: 1.1rem; padding: 0 .28rem; border: 2px solid var(--app-surface); border-radius: 999px; background: #dc2626; color: #fff; font-size: .62rem; font-weight: 800; line-height: 1; box-shadow: var(--app-shadow-sm); }
.app-chat-sidebar-toggle__badge[hidden] { display: none; }

.app-chat-sidebar { position: fixed; top: var(--navbar-h); right: 0; z-index: 1250; display: flex; flex-direction: column; width: var(--app-chat-sidebar-width); height: calc(100vh - var(--navbar-h)); border-left: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-text); box-shadow: var(--app-shadow-lg); font-family: var(--app-font-sans); transform: translateX(100%); transition: transform .2s ease; }
html.app-chat-sidebar-open .app-chat-sidebar { transform: translateX(0); }
.app-chat-sidebar__header { display: flex; align-items: center; gap: var(--app-space-3); padding: var(--app-space-4); border-bottom: 1px solid var(--app-border); }
.app-chat-sidebar__title { min-width: 0; margin: 0; font-size: 1rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-chat-sidebar__open-page { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-left: auto; border-radius: var(--app-radius-sm); color: var(--app-text-muted); text-decoration: none; }
.app-chat-sidebar__open-page:hover, .app-chat-sidebar__open-page:focus-visible { background: var(--app-surface-muted); color: var(--app-text); outline: none; }
.app-chat-sidebar__open-page .material-symbols-outlined { font-size: 1rem; }
.app-chat-sidebar__close { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-left: 0; border: 0; border-radius: var(--app-radius-sm); background: transparent; color: var(--app-text-muted); cursor: pointer; }
.app-chat-sidebar__close:hover, .app-chat-sidebar__close:focus-visible { background: var(--app-surface-muted); color: var(--app-text); outline: none; }
.app-chat-sidebar__body { flex: 1; min-height: 0; overflow: hidden; }

.app-chat-directory, .app-chat-conversation { height: 100%; min-height: 0; }
.app-chat-directory { display: flex; flex-direction: column; padding: var(--app-space-3); }
.app-chat-directory__search { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); align-items: center; gap: var(--app-space-2); min-height: 2.45rem; padding: 0 .7rem; border-radius: var(--app-radius-sm); background: var(--app-surface-muted); color: var(--app-text-soft); }
.app-chat-directory__search .material-symbols-outlined { font-size: 1.1rem; }
.app-chat-directory__search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--app-text); font: inherit; font-size: .875rem; }
.app-chat-directory__label { margin: var(--app-space-5) var(--app-space-2) var(--app-space-2); color: var(--app-text-soft); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.app-chat-directory__list { min-height: 0; overflow-y: auto; }
.app-chat-user { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--app-space-3); width: 100%; padding: .65rem var(--app-space-2); border: 0; border-radius: var(--app-radius-md); background: transparent; color: var(--app-text); font: inherit; text-align: left; cursor: pointer; }
.app-chat-user:hover, .app-chat-user.is-active { background: var(--app-accent-soft); }
.app-chat-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--app-accent-soft); color: var(--app-accent-strong); font-size: .78rem; font-weight: 800; }
.app-chat-user:nth-child(3n + 2) .app-chat-avatar { background: var(--app-info-soft); color: var(--app-info); }
.app-chat-user:nth-child(3n) .app-chat-avatar { background: var(--app-warning-soft); color: #b45309; }
.app-chat-user__copy { display: grid; min-width: 0; gap: .15rem; }.app-chat-user__copy strong, .app-chat-user__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.app-chat-user__copy strong { font-size: .84rem; }.app-chat-user__copy small { color: var(--app-text-muted); font-size: .75rem; }
.app-chat-user__meta { display: grid; justify-items: end; gap: .3rem; color: var(--app-text-soft); font-size: .67rem; }.app-chat-user__meta b { min-width: 1.05rem; padding: .1rem .3rem; border-radius: 999px; background: var(--app-accent-strong); color: #fff; font-size: .65rem; text-align: center; }.app-chat-directory__empty { margin: var(--app-space-5) 0; color: var(--app-text-muted); text-align: center; font-size: .85rem; }

.app-chat-conversation { display: flex; flex-direction: column; }.app-chat-conversation__back { display: inline-flex; align-items: center; gap: var(--app-space-2); width: fit-content; margin: var(--app-space-3); padding: .35rem; border: 0; background: transparent; color: var(--app-text-muted); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }.app-chat-conversation__back:hover { color: var(--app-accent-strong); }.app-chat-conversation__back .material-symbols-outlined { font-size: 1.1rem; }
.app-chat-conversation__identity { display: flex; align-items: center; gap: var(--app-space-3); padding: 0 var(--app-space-4) var(--app-space-3); border-bottom: 1px solid var(--app-border); }.app-chat-conversation__identity div { display: grid; gap: .1rem; }.app-chat-conversation__identity strong { font-size: .9rem; }.app-chat-conversation__identity span:not(.app-chat-avatar) { color: var(--app-accent-strong); font-size: .72rem; }
.app-chat-conversation__messages { display: flex; flex: 1; flex-direction: column; gap: var(--app-space-2); min-height: 0; overflow-y: auto; padding: var(--app-space-4); }.app-chat-message { display: flex; flex-direction: column; align-items: flex-start; }.app-chat-message--out { align-items: flex-end; }.app-chat-message p { max-width: 82%; margin: 0; padding: .55rem .7rem; border-radius: var(--app-radius-md); background: var(--app-surface-muted); color: var(--app-text); font-size: .82rem; line-height: 1.4; }.app-chat-message--out p { background: var(--app-accent-strong); color: #fff; }.app-chat-message__read { margin-top: .2rem; color: var(--app-text-soft); font-size: .67rem; font-weight: 600; }
.app-chat-system-log { align-self: center; display: inline-flex; align-items: center; justify-content: center; gap: .28rem; max-width: 92%; margin: .15rem auto; padding: .25rem .55rem; border-radius: 999px; background: var(--app-surface-muted); color: var(--app-text-muted); font-size: .66rem; font-weight: 650; line-height: 1.3; text-align: center; }
.app-chat-system-log .material-symbols-outlined { flex: 0 0 auto; color: var(--app-accent-strong); font-size: .82rem; }
.app-chat-system-log time { flex: 0 0 auto; color: var(--app-text-soft); font-size: .61rem; }
.app-chat-sidebar__footer { padding: var(--app-space-4); border-top: 1px solid var(--app-border); }.app-chat-sidebar__form { display: flex; align-items: center; gap: var(--app-space-2); width: 100%; }.app-chat-sidebar__input { width: 100%; min-width: 0; border: 1px solid var(--app-border-strong); border-radius: var(--app-radius-md); background: var(--app-surface-raised); color: var(--app-text); padding: .7rem .8rem; font: inherit; font-size: .875rem; }.app-chat-sidebar__send { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2.35rem; width: 2.35rem; height: 2.35rem; border: 0; border-radius: var(--app-radius-md); background: var(--app-accent-strong); color: #fff; cursor: pointer; }.app-chat-sidebar__send:hover { background: var(--app-accent); }.app-chat-sidebar__send .material-symbols-outlined { font-size: 1.05rem; }

.app-chat-avatar { position: relative; }
.app-chat-presence { position: absolute; right: -.05rem; bottom: -.05rem; width: .65rem; height: .65rem; border: 2px solid var(--app-surface); border-radius: 50%; background: var(--app-text-soft); }
.app-chat-presence.is-online { background: var(--app-accent); }
.app-chat-conversation__search { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); align-items: center; gap: .35rem; margin: 0 var(--app-space-4) var(--app-space-2); padding: .4rem .6rem; border: 1px solid var(--app-border); border-radius: var(--app-radius-sm); color: var(--app-text-soft); }
.app-chat-conversation__search input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--app-text); font: inherit; font-size: .78rem; }
.app-chat-load-older { align-self: center; margin: 0 0 .35rem; border: 0; background: transparent; color: var(--app-accent-strong); font: inherit; font-size: .72rem; cursor: pointer; }
.app-chat-day { display: flex; align-items: center; justify-content: center; margin: .35rem 0; color: var(--app-text-soft); font-size: .68rem; }
.app-chat-day span { padding: .15rem .5rem; border-radius: 999px; background: var(--app-surface-muted); }
.app-chat-message small { margin-top: .15rem; color: var(--app-text-soft); font-size: .62rem; }
.app-chat-message__actions { display: flex; gap: .35rem; margin-top: .15rem; opacity: 0; transition: opacity .15s ease; }
.app-chat-message:hover .app-chat-message__actions, .app-chat-message:focus-within .app-chat-message__actions { opacity: 1; }
.app-chat-message__actions button { border: 0; background: transparent; color: var(--app-text-soft); font: inherit; font-size: .62rem; cursor: pointer; }
.app-chat-message.is-failed p { outline: 1px solid #dc2626; }
.app-chat-message [data-app-chat-retry] { margin-top: .2rem; border: 0; background: transparent; color: #dc2626; font: inherit; font-size: .67rem; cursor: pointer; }
.app-chat-typing { margin: 0 var(--app-space-4) .35rem; color: var(--app-accent-strong); font-size: .72rem; }
.app-chat-status { margin: .45rem 0 0; color: var(--app-text-muted); font-size: .72rem; }
.app-chat-status[data-kind='error'] { color: #b91c1c; }

@media (max-width: 991.98px) { html.app-chat-sidebar-open { --app-chat-sidebar-w: 0px; }.app-chat-sidebar { width: min(23rem, 100vw); } }