/* Pi4at foundation. Loaded last; scoped until the template CSS is retired. */
:root {
    --p-bg: #15151a; --p-surface: #1e1e25; --p-raised: #282833;
    --p-hover: #30303d; --p-pressed: #393449; --p-accent: #754dff;
    --p-accent-hover: #8966ff; --p-accent-pressed: #633be5; --p-accent-text: #c5b4ff;
    --p-text: #f5f4fa; --p-muted: #b3adbf; --p-border: #393741; --p-control-border: #716979; --p-focus: #c5b4ff;
    --p-error: #ffb2c1; --p-success: #8cdeb5; --p-warning: #f3d28b;
    --p-scrollbar-track: #1e1e25; --p-scrollbar-thumb: #5a5665; --p-scrollbar-thumb-hover: #827b91;
    --p-color-scheme: dark; --p-outline-border: #766396;
    --p-danger-bg: #39232e; --p-danger-border: #9c5969; --p-danger-hover: #653446;
    --p-chat-gradient: #1b1823; --p-overlay: #0b0912a6;
    --p-action-hover: #30253f; --p-action-hover-text: #ded1ff;
    --p-list-focus: #6344a6; --p-list-focus-ring: #ac8bff;
    --p-sheet-handle: #62596e; --p-sheet-description: #bcb4ca; --p-empty-text: #b9b4c5;
    --p-refresh-border: #6748a3;
    --p-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --p-caption: .75rem; --p-small: .875rem; --p-body: 1rem; --p-section: 1.25rem; --p-title: 1.5rem;
    --p-space-1: 4px; --p-space-2: 8px; --p-space-3: 12px; --p-space-4: 16px; --p-space-5: 24px; --p-space-6: 32px;
    --p-radius-control: 10px; --p-radius-card: 14px; --p-radius-dialog: 20px; --p-radius-pill: 999px;
    --p-target: 44px; --p-input: 48px; --p-row: 64px; --p-nav: 64px; --p-rail: 72px;
    --p-list-row: 76px; --p-avatar: 36px;
    --p-fast: 160ms; --p-panel-motion: 240ms; --p-shadow: 0 16px 48px #0005;
}
/* The same semantic tokens drive both themes. Dark values above stay unchanged. */
:root[data-theme="light"] {
    --p-color-scheme: light;
    --p-bg: #F7F7FB; --p-surface: #FFFFFF; --p-raised: #F0EFF7;
    --p-hover: #F0EFF7; --p-pressed: #EEE8FF;
    --p-border: #DADAE5; --p-control-border: #888A9B;
    --p-text: #1E2030; --p-muted: #626678;
    --p-accent: #6941D9; --p-accent-hover: #5C35C6; --p-accent-pressed: #4E2BAF;
    --p-accent-text: #6941D9; --p-focus: #6941D9; --p-outline-border: #6941D9;
    --p-error: #B4233D; --p-success: #176644; --p-warning: #805400;
    --p-danger-bg: #FDECF0; --p-danger-border: #B4233D; --p-danger-hover: #8F1830;
    --p-chat-gradient: #F0EFF7; --p-overlay: #1E203066;
    --p-action-hover: #EEE8FF; --p-action-hover-text: #6941D9;
    --p-list-focus: #6941D9; --p-list-focus-ring: #6941D9;
    --p-sheet-handle: #626678; --p-sheet-description: #626678; --p-empty-text: #626678;
    --p-refresh-border: #6941D9;
    --p-scrollbar-track: #F0EFF7; --p-scrollbar-thumb: #9494A6; --p-scrollbar-thumb-hover: #626678;
    --p-shadow: 0 16px 48px #1E203022;
}
html[data-theme] { background: var(--p-bg); color-scheme: var(--p-color-scheme); }
html.pi4at-app-root { height: 100%; overflow: hidden; overscroll-behavior: none; }
.pi4at { font-family: var(--p-font); font-size: var(--p-body); line-height: 1.5; background: var(--p-bg); color: var(--p-text); color-scheme: var(--p-color-scheme); }
.pi4at { touch-action: auto; }
/* Replace the light global scrollbar inherited from the DreamsChat stylesheet. */
html, .pi4at, .pi4at * { scrollbar-color: var(--p-scrollbar-thumb) var(--p-scrollbar-track); scrollbar-width: thin; }
html::-webkit-scrollbar, .pi4at::-webkit-scrollbar, .pi4at *::-webkit-scrollbar { width: 8px; height: 8px; }
html::-webkit-scrollbar-track, .pi4at::-webkit-scrollbar-track, .pi4at *::-webkit-scrollbar-track { background: var(--p-scrollbar-track); }
html::-webkit-scrollbar-thumb, .pi4at::-webkit-scrollbar-thumb, .pi4at *::-webkit-scrollbar-thumb { background: var(--p-scrollbar-thumb); border: 2px solid var(--p-scrollbar-track); border-radius: 999px; }
html::-webkit-scrollbar-thumb:hover, .pi4at::-webkit-scrollbar-thumb:hover, .pi4at *::-webkit-scrollbar-thumb:hover { background: var(--p-scrollbar-thumb-hover); }
.pi4at .slimScrollBar { background: var(--p-scrollbar-thumb) !important; border-radius: 999px !important; }
.pi4at .slimScrollRail { background: var(--p-scrollbar-track) !important; border-radius: 999px !important; }
.pi4at *, .pi4at *::before, .pi4at *::after { box-sizing: border-box; }
.pi4at h1, .pi4at h2, .pi4at h3, .pi4at h4, .pi4at h5, .pi4at h6 { color: var(--p-text); font-family: inherit; letter-spacing: -.02em; }
.pi4at h2, .pi4at h4 { font-size: var(--p-title); }
.pi4at h5 { font-size: var(--p-section); }
.pi4at p, .pi4at .form-label { color: inherit; }
.pi4at a { color: var(--p-accent-text); }
.pi4at :is(a,button,input,select,textarea):not(.form-control):not(.form-select):focus-visible { outline: 2px solid var(--p-focus); outline-offset: 3px; }
.pi4at .btn { min-height: var(--p-target); border-radius: var(--p-radius-control); padding: 10px 16px; font: 600 var(--p-small)/1.4 var(--p-font); transition: background-color var(--p-fast), border-color var(--p-fast); }
.pi4at .btn-primary { --bs-btn-bg: var(--p-accent); --bs-btn-border-color: var(--p-accent); --bs-btn-hover-bg: var(--p-accent-hover); --bs-btn-hover-border-color: var(--p-accent-hover); --bs-btn-active-bg: var(--p-accent-pressed); --bs-btn-active-border-color: var(--p-accent-pressed); background: var(--p-accent); border-color: var(--p-accent); color: #fff; }
.pi4at .btn-primary:hover { background: var(--p-accent-hover); border-color: var(--p-accent-hover); }
.pi4at .btn-primary:active { background: var(--p-accent-pressed); }
.pi4at .btn-outline-primary { color: var(--p-accent-text); background: transparent; border-color: var(--p-outline-border); }
.pi4at .btn-outline-primary:hover { color: var(--p-text); background: var(--p-pressed); border-color: var(--p-accent-text); }
.pi4at .btn-danger, .pi4at .btn-outline-danger { color: var(--p-error); background: var(--p-danger-bg); border-color: var(--p-danger-border); }
.pi4at .btn-danger:hover, .pi4at .btn-outline-danger:hover { color: #fff; background: var(--p-danger-hover); border-color: var(--p-error); }
.pi4at .btn:disabled { opacity: .55; cursor: not-allowed; }
.pi4at .btn-link { color: var(--p-accent-text); }
.pi4at .link-primary { color: var(--p-accent-text) !important; }
.pi4at .form-control:not(#input-send-chat-message), .pi4at .form-select { min-height: var(--p-input); background: var(--p-bg); color: var(--p-text); border: 1px solid var(--p-control-border); border-radius: var(--p-radius-control); font: inherit; }
.pi4at .form-control::placeholder { color: var(--p-muted); opacity: .85; }
/* Fields use one continuous 2px focus edge (1px border + 1px ring).
   Keep the separate offset outline for buttons/links, not text controls. */
.pi4at :is(.form-control, .form-select):not(#input-send-chat-message):focus { background: var(--p-bg); color: var(--p-text); border-color: var(--p-focus); outline: none; box-shadow: 0 0 0 1px var(--p-focus); }
.pi4at .form-label { font-size: var(--p-small); font-weight: 500; }
.pi4at .form-check-input:checked { background-color: var(--p-accent); border-color: var(--p-accent); }
.pi4at .text-danger, .pi4at .p-field-error { color: var(--p-error) !important; }
.pi4at .text-success { color: var(--p-success) !important; }
.pi4at .text-warning { color: var(--p-warning) !important; }
.pi4at .text-muted, .pi4at .text-gray-9 { color: var(--p-muted) !important; }
.pi4at .p-field-error { font-size: var(--p-small); padding-left: 0; list-style: none; }
.pi4at .card, .pi4at .card .card-body, .pi4at .p-panel { background: var(--p-surface); color: var(--p-text); border-radius: var(--p-radius-card); }
.pi4at .card, .pi4at .p-panel { border: 1px solid var(--p-border); box-shadow: none; }
.pi4at .modal .modal-content, .pi4at .chat-actions { background: var(--p-raised); color: var(--p-text); border: 1px solid var(--p-border); border-radius: var(--p-radius-dialog); box-shadow: var(--p-shadow); }
.pi4at .modal .modal-header { padding: var(--p-space-4) var(--p-space-4) var(--p-space-3); border-bottom: 0; gap: var(--p-space-3); }
.pi4at .modal .modal-body { padding: 0 var(--p-space-4) var(--p-space-4); }
.pi4at .modal .modal-footer { padding: 0 var(--p-space-4) var(--p-space-4); border: 0; }
.pi4at .modal .modal-footer > * { margin: 0; }
.pi4at .modal .modal-content .modal-header .modal-title, .pi4at .chat-actions-heading h5 { color: var(--p-text); font-size: var(--p-section); font-weight: 600; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
.pi4at .modal-dialog { max-width: 460px; margin-right: auto; margin-left: auto; }
.pi4at.pi4at-app .modal { top: var(--app-top, 0px); height: var(--app-height, 100dvh); max-height: var(--app-height, 100dvh); padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); overflow: hidden; overscroll-behavior: contain; }
.pi4at.pi4at-app .modal-dialog { width: 100%; min-width: 0; max-height: 100%; margin: 0 auto; }
.pi4at.pi4at-app .modal-dialog-centered { height: 100%; min-height: 0; }
.pi4at.pi4at-app .modal-content { min-width: 0; min-height: 0; max-height: 100%; overflow: hidden; }
.pi4at.pi4at-app .modal-header { flex: 0 0 auto; }
.pi4at.pi4at-app .modal .modal-content .modal-body { color: var(--p-text); min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.pi4at-modal-open, body.pi4at-app.modal-open { overflow: hidden; overscroll-behavior: none; }
.pi4at .modal-backdrop { background: var(--p-overlay); touch-action: none; overscroll-behavior: none; }
.pi4at .modal-backdrop.show { opacity: 1; }
.pi4at .chat-actions::backdrop { background: var(--p-overlay); }
.pi4at .chat-actions button { min-height: var(--p-target); border-radius: var(--p-radius-control); }
.p-brand { display: inline-flex; align-items: center; gap: var(--p-space-3); width: min(288px, 100%); color: var(--p-text) !important; font-size: 24px; font-weight: 700; letter-spacing: -.04em; text-decoration: none; }
.p-brand img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; }
.pi4at .p-icon-button { display: inline-grid; place-items: center; flex: 0 0 var(--p-target); width: var(--p-target); height: var(--p-target); min-height: var(--p-target); padding: 0; border: 0; border-radius: var(--p-radius-control); background: transparent; color: var(--p-muted); }
.pi4at .p-icon-button:hover { background: var(--p-hover); color: var(--p-text); }

/* Compact invitation form; shared control and color tokens cover both themes. */
.pi4at #invite .p-invitation-hint { margin: var(--p-space-1) 0 0; color: var(--p-muted); font-size: var(--p-small); line-height: 1.45; }
.pi4at #invite .p-invitation-form { display: grid; gap: var(--p-space-4); }
.pi4at #invite .p-invitation-field { display: grid; gap: var(--p-space-2); min-width: 0; }
.pi4at #invite .form-label { margin: 0; color: var(--p-text); }
.pi4at #invite-result { margin: 0; color: var(--p-muted); font-size: var(--p-small); }
.pi4at #invite-result:empty { display: none; }
.pi4at #invite .p-invitation-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--p-space-3); }
.pi4at #invite .p-invitation-actions .btn { display: flex; align-items: center; justify-content: center; min-width: 0; }

/* Guest shell is shared; page-specific forms/copy are migrated in stage 2. */
.pi4at.pi4at-auth .main-wrapper { display: grid; place-items: center; width: 100%; height: var(--app-height, 100dvh); overflow: auto; padding: max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.p-auth-content { width: min(100%, 420px); min-width: 0; margin-block: auto; }
.p-auth-brand { text-align: center; margin-bottom: var(--p-space-5); }
.pi4at-auth .card-body { padding: var(--p-space-5); }
.pi4at-auth .card { margin-bottom: var(--p-space-5); }
.pi4at-auth .input-icon-addon, .pi4at-auth .toggle-password { color: var(--p-muted); }

/* Compact auth forms reuse the shared theme tokens and controls. */
.pi4at-auth .p-auth-brand { margin-bottom: var(--p-space-4); }
.pi4at-auth .p-auth-form .card { margin-bottom: var(--p-space-4); }
.pi4at-auth .p-auth-heading { margin-bottom: var(--p-space-4); }
.pi4at-auth .p-auth-field { margin-bottom: var(--p-space-4); }
.pi4at-auth .p-auth-field .form-label { margin-bottom: var(--p-space-2); }
.pi4at-auth .p-auth-input { position: relative; }
.pi4at-auth .p-auth-input:has(.p-auth-reveal) input { padding-inline-end: 56px; }
.pi4at-auth .p-auth-reveal { position: absolute; inset-inline-end: 2px; top: 2px; width: var(--p-target); height: var(--p-target); display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--p-radius-control); background: transparent; color: var(--p-muted); cursor: pointer; }
.pi4at-auth .p-auth-reveal:hover { color: var(--p-text); background: var(--p-hover); }
.pi4at-auth .p-auth-reveal:focus-visible { outline-offset: -3px; }
.pi4at-auth .p-auth-field .form-control[aria-invalid="true"] { border-color: var(--p-error); }
.pi4at-auth .p-auth-hint, .pi4at-auth .p-auth-status, .pi4at-auth .p-auth-error { margin: var(--p-space-1) 0 0; font-size: var(--p-small); line-height: 1.4; }
.pi4at-auth .p-auth-hint { color: var(--p-muted); font-size: var(--p-caption); }
.pi4at-auth .p-auth-status { color: var(--p-success); }
.pi4at-auth .p-auth-error .p-field-error { margin: 0; }
@media (max-width: 480px) {
    .pi4at-auth .card-body { padding: var(--p-space-4); }
}

/* One geometry owner for the messenger, overriding template/PWA fixed offsets. */
.pi4at.pi4at-app { height: var(--app-height, 100dvh); overflow: hidden; }
.pi4at.pi4at-app .main-wrapper { display: block; width: 100%; height: 100%; }
.pi4at.pi4at-app .main_content { position: fixed; inset: var(--app-top, 0px) 0 auto; height: var(--app-height, 100dvh); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); padding: 0; min-width: 0; background: var(--p-bg); }
.pi4at.pi4at-app .sidebar-group { grid-column: 1; grid-row: 1; width: auto; min-width: 0; height: auto; min-height: 0; margin: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: calc(var(--p-nav) + env(safe-area-inset-bottom, 0px)); border: 0; background: var(--p-bg); overflow: hidden; }
.pi4at-app .sidebar-group > .tab-content { min-height: 0; }
.pi4at-app .sidebar-content { width: 100%; min-width: 0; background: var(--p-bg); }
.pi4at-app .sidebar-group .p-screen { height: 100%; min-height: 0; overflow: hidden; background: var(--p-bg); color: var(--p-text); padding-inline-start: env(safe-area-inset-left, 0px); padding-inline-end: env(safe-area-inset-right, 0px); }
.pi4at-app .p-screen-header { flex: 0 0 auto; background: var(--p-bg); }
.pi4at-app .p-screen-header-content { width: 100%; max-width: var(--p-screen-width, none); margin-inline: auto; padding: var(--p-screen-top, var(--p-space-5)) var(--p-screen-padding, var(--p-space-4)) 0; }
.pi4at-app #chats, .pi4at-app #invites-menu .sidebar-content { background: var(--p-bg); }
.pi4at-app .p-sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: var(--p-space-3); min-height: var(--p-target); margin-bottom: var(--p-space-4); }
.pi4at-app .p-sidebar-header .p-screen-title { margin: 0; font-size: var(--p-title); }
.pi4at-app .p-invite-button { display: inline-grid; place-items: center; flex: 0 0 var(--p-target); width: var(--p-target); height: var(--p-target); padding: 0; border-radius: var(--p-radius-control); font-size: 16px; line-height: 1; }
.pi4at-app .sidebar-body { padding: var(--p-space-4); }
.pi4at-app :is(#chat-list-items, #invite-list) .p-conversation-row { background: var(--p-surface); border-color: var(--p-border); border-radius: var(--p-radius-card); }
.pi4at-app :is(#chat-list-items, #invite-list) .p-conversation-row:hover { background: var(--p-hover); border-color: var(--p-outline-border); }
.pi4at-app :is(#chat-list-items, #invite-list) .p-conversation-row:active { background: var(--p-pressed); border-color: var(--p-outline-border); }
.pi4at-app :is(#chat-list-items, #invite-list) .chat-user-msg h6 { color: var(--p-text); }
/* Waiting is a subtitle, independent of the selected conversation's purple surface. */
.pi4at-app .p-waiting-status { display: flex; align-items: center; gap: var(--p-space-2); color: var(--p-success); font-size: var(--p-caption); line-height: 1.4; white-space: nowrap; }
.pi4at-app .p-waiting-status[hidden] { display: none; }
.pi4at-app .p-waiting-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; }
/* Selected chat persists independently of pointer hover and keyboard focus. */
.pi4at-app #chat-list-items .p-conversation-row.is-chat-active {
    background: var(--p-pressed);
    border-color: var(--p-list-focus);
}
.pi4at-app #chat-list-items .p-conversation-row.is-chat-active:hover {
    background: color-mix(in srgb, var(--p-pressed) 88%, var(--p-accent));
}
.pi4at-app #chat-list-items .p-conversation-row.is-chat-active:active {
    background: color-mix(in srgb, var(--p-pressed) 80%, var(--p-accent));
}
.pi4at-app #chat-list-items .p-conversation-row.is-chat-active .chat-user-msg h6 {
    color: var(--p-accent-text);
    font-weight: 700;
}
/* Keep a visible focus ring on either button, including in the selected row. */
.pi4at-app #chat-list-items .p-conversation-row button:focus-visible {
    outline: 2px solid var(--p-focus);
    outline-offset: -3px;
}
.pi4at-app .chat-actions-toggle { color: var(--p-muted); }
.pi4at-app :is(#chats, #setting-menu, #middle) .form-control:not(#input-send-chat-message) { background: var(--p-bg); color: var(--p-text); border: 1px solid var(--p-control-border); border-radius: var(--p-radius-control); }
.pi4at-app :is(#chats, #setting-menu, #middle) .form-control:not(#input-send-chat-message):focus { border-color: var(--p-focus); }
.pi4at-app .chat-options .btn { min-width: var(--p-target); min-height: var(--p-target); }
.pi4at.pi4at-app .sidebar-menu { position: absolute; inset: auto 0 0; display: flex; width: 100%; height: calc(var(--p-nav) + env(safe-area-inset-bottom, 0px)); padding: 0 max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-left, 0px)); border: 0; border-top: 1px solid var(--p-border); background: var(--p-surface); box-shadow: none; overflow: hidden; }
.pi4at-app .sidebar-menu .logo { display: none; }
.pi4at-app .sidebar-menu .menu-wrap, .pi4at-app .sidebar-menu .main-menu { width: 100%; height: var(--p-nav); margin: 0; padding: 0; }
.pi4at-app .sidebar-menu .main-menu .nav { display: flex; flex-direction: row; width: 100%; height: var(--p-nav); gap: 4px; margin: 0; }
.pi4at-app .sidebar-menu .menu-wrap .main-menu .nav li { flex: 1; margin: 0; }
.pi4at-app .sidebar-menu .menu-wrap .main-menu .nav li a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; height: 60px; margin: 2px 0; border-radius: var(--p-radius-control); background: transparent; color: var(--p-muted) !important; }
.pi4at-app .sidebar-menu .menu-wrap .main-menu .nav li a.active { background: var(--p-pressed); color: var(--p-accent-text) !important; }
/* Touch hover/focus must not look selected after browser Back. Keyboard focus
   keeps the shared :focus-visible outline, independently of the active screen. */
@media (hover: hover) and (pointer: fine) {
    .pi4at-app .sidebar-menu .menu-wrap .main-menu .nav li a:not(.active):hover { background: var(--p-hover); }
}
.pi4at-app .mobile-nav-label { display: block; font-size: 11px; }
.pi4at.pi4at-app #middle.chat { grid-row: 1; grid-column: 1; position: relative; inset: auto; width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); display: none !important; transform: none; visibility: visible; background: var(--p-bg); transition: none; overflow: hidden; }
.pi4at.pi4at-app #middle.chat.show { display: flex !important; }
.pi4at.pi4at-app #middle .chat-header { flex: 0 0 auto; min-height: 64px; gap: 12px; padding: 10px max(12px, env(safe-area-inset-right, 0px)) 10px max(12px, env(safe-area-inset-left, 0px)); border: 0; border-bottom: 1px solid var(--p-border); background: var(--p-surface); }
.pi4at-app #middle .user-details { min-width: 0; flex: 1 1 auto; }
.pi4at-app #middle .chat-header { flex-wrap: nowrap; }
.pi4at-app #middle .p-chat-heading { min-width: 0; }
.pi4at-app #chat-username { overflow: hidden; text-overflow: ellipsis; }
.pi4at-app #middle .p-chat-state { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--p-muted); font-size: var(--p-caption); line-height: 1.4; }
.pi4at-app #connection-status { min-width: 0; overflow-wrap: anywhere; }
.pi4at-app #middle .p-chat-state-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: currentColor; }
.pi4at-app #middle .p-chat-state[data-state="ready"] { color: var(--p-success); }
.pi4at-app #middle .p-chat-state[data-state="lost"] { color: var(--p-error); }
.pi4at-app #middle .p-chat-state[data-state="connecting"] .p-chat-state-dot { animation: p-chat-pulse 1.5s ease-in-out infinite; }
@keyframes p-chat-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
    .pi4at-app #middle .p-chat-state[data-state="connecting"] .p-chat-state-dot { animation: none; }
}
.pi4at.pi4at-app #middle > .slimScrollDiv { flex: 1 1 0; width: 100% !important; height: auto !important; min-height: 0; }
.pi4at.pi4at-app #middle .chat-body { min-height: 0; height: 100% !important; padding: 16px; background: linear-gradient(150deg, var(--p-bg), var(--p-chat-gradient)); }
.pi4at.pi4at-app #middle .chat-footer { flex: 0 0 auto; }
.pi4at.pi4at-app #middle .chat-footer .footer-form { position: static; width: 100%; padding: 10px max(12px, env(safe-area-inset-right, 0px)) 10px max(12px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--p-border); background: var(--p-surface); }
.pi4at-app #middle .chat-footer-wrap { display: flex; align-items: center; width: 100%; min-width: 0; gap: 8px; padding: 4px; border: 1px solid var(--p-control-border); border-radius: var(--p-radius-control); background: var(--p-bg); }
.pi4at-app #middle .chat-footer-wrap:focus-within { border-color: var(--p-focus); box-shadow: 0 0 0 1px var(--p-focus); }
.pi4at-app #middle .chat-footer-wrap .form-wrap { flex: 1 1 auto; min-width: 0; }
.pi4at-app #middle .chat-footer-wrap .form-wrap .form-control { width: 100%; height: 44px; min-height: 44px; padding: 0 8px; border: 0; border-radius: var(--p-radius-control); background: transparent; color: var(--p-text); box-shadow: none; outline: none; }
.pi4at-app #middle .chat-footer-wrap .form-wrap .form-control:focus { border: 0; background: transparent; color: var(--p-text); box-shadow: none; outline: none; }
.pi4at-app #middle .chat-footer-wrap .form-wrap .form-control::placeholder { color: var(--p-muted); opacity: .85; }
.pi4at-app #middle .chat-footer-wrap .form-control:disabled { cursor: not-allowed; opacity: .75; }
.pi4at-app #middle .p-chat-notice { margin-top: 8px; color: var(--p-warning); font-size: var(--p-caption); line-height: 1.45; overflow-wrap: anywhere; }
.pi4at-app #middle .p-chat-notice:empty { display: none; }
.pi4at-app #retry-open-chat { margin-top: 8px; }
.pi4at-app #middle .chat-footer-wrap .form-btn { display: flex; flex: 0 0 auto; align-items: center; }
.pi4at-app #middle .chat-footer-wrap .form-btn .btn { width: 56px; height: 44px; min-height: 44px; align-items: center; justify-content: center; }
.pi4at-app #messages-container { min-width: 0; }
.pi4at-app #messages-container .chats { min-width: 0; max-width: 85%; margin-bottom: 0; }
.pi4at-app #messages-container .chats + .chats { margin-top: 10px; }
.pi4at-app #messages-container .chats:not(.chats-right) + .chats-right,
.pi4at-app #messages-container .chats-right + .chats:not(.chats-right) { margin-top: 20px; }
.pi4at-app #messages-container .chat-content, .pi4at-app #messages-container .chat-info { min-width: 0; max-width: 100%; }
.pi4at-app #messages-container .message-content { padding: 10px 14px; margin: 0; border-radius: 16px 16px 16px 4px; background: #302d3a; color: #f5f4fa; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.pi4at-app #messages-container .chats-right .message-content { background: #6338f6; color: #fff; border-radius: 16px 16px 4px 16px; }
.pi4at-app #messages-container .chat-profile-name { margin: 2px 0 0; }
.pi4at-app #messages-container .chat-profile-name h6 { flex-direction: row; gap: 2px; margin: 0; padding: 0 4px; font-size: 11px; line-height: 1.4; font-weight: 400; }
.pi4at-app #messages-container .chat-time { color: var(--p-muted); font-size: inherit; white-space: nowrap; }
.pi4at-app #messages-container .p-message-receipt { display: inline-grid; place-items: center; width: 32px; height: 28px; margin: -3px 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--p-muted); font-size: 16px; touch-action: manipulation; }
.pi4at-app #messages-container .p-message-receipt i { color: inherit; }
.pi4at-app #messages-container .p-message-receipt:hover, .pi4at-app #messages-container .p-message-receipt[aria-expanded="true"] { background: var(--p-hover); }
.pi4at-app #messages-container .p-receipt-note { display: block; max-width: 240px; margin-top: 4px; margin-left: auto; color: var(--p-muted); font-size: var(--p-caption); text-align: right; overflow-wrap: anywhere; }
.pi4at-app #messages-container .p-receipt-note[hidden] { display: none; }
.pi4at.pi4at-app[data-chat-open="true"] .sidebar-menu, .pi4at.pi4at-app[data-chat-open="true"] .sidebar-group { display: none; }
.p-empty-state { display: none; }
@media (max-width: 767.98px) {
    .pi4at-app #messages-container .chats { max-width: 92%; }
    .pi4at .modal-dialog { margin: 0 auto; max-width: none; }
    .pi4at.pi4at-app .modal { padding: max(12px, env(safe-area-inset-top, 0px)) 0 0; }
    .pi4at.pi4at-app .modal-dialog-centered { align-items: flex-end; }
    .pi4at .modal .modal-content, .pi4at .chat-actions { border-radius: var(--p-radius-dialog) var(--p-radius-dialog) 0 0; }
    .pi4at .modal .modal-header { padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
    .pi4at .modal .modal-body, .pi4at .modal .modal-footer { padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 768px) {
    .pi4at.pi4at-app .main_content { grid-template-columns: var(--p-rail) clamp(296px, 32vw, 384px) minmax(0, 1fr); }
    .pi4at.pi4at-app .sidebar-group, .pi4at.pi4at-app[data-chat-open="true"] .sidebar-group { display: flex; grid-column: 2; padding-bottom: env(safe-area-inset-bottom, 0px); border-right: 1px solid var(--p-border); }
    .pi4at.pi4at-app .sidebar-menu, .pi4at.pi4at-app[data-chat-open="true"] .sidebar-menu { display: flex; position: relative; grid-column: 1; grid-row: 1; inset: auto; flex-direction: column; align-items: center; height: 100%; padding: max(20px, env(safe-area-inset-top, 0px)) 6px max(16px, env(safe-area-inset-bottom, 0px)); border: 0; border-right: 1px solid var(--p-border); }
    .pi4at-app .sidebar-menu .logo { display: block; margin: 0 0 24px; }
    .pi4at-app .sidebar-menu .logo a { display: grid; place-items: center; width: 56px; height: 56px; padding: 6px; border-radius: var(--p-radius-card); background: var(--p-raised); }
    .pi4at-app .sidebar-menu .logo a:hover { background: var(--p-hover); }
    .pi4at-app .sidebar-menu .logo img { display: block; width: 44px; height: 44px; object-fit: contain; }
    .pi4at-app .sidebar-menu .main-menu .nav { flex-direction: column; height: auto; gap: 8px; }
    .pi4at-app .sidebar-menu .menu-wrap .main-menu .nav li { flex: 0 0 auto; }
    .pi4at-app .sidebar-menu .menu-wrap .main-menu .nav li a { height: 60px; margin: 0; }
    .pi4at.pi4at-app #middle.chat { grid-column: 3; padding-top: env(safe-area-inset-top, 0px); }
    .pi4at-app .p-empty-state { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 12px; padding: 32px; min-width: 0; }
    .pi4at-app .p-empty-state i { color: var(--p-accent-text); font-size: 40px; }
    .pi4at-app .p-empty-state h2 { font-size: var(--p-title); margin: 0; }
    .pi4at-app .p-empty-state p { color: var(--p-muted); max-width: 32ch; margin: 0; }
    .pi4at-app[data-chat-open="true"] .p-empty-state { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pi4at *, .pi4at *::before, .pi4at *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* Keep touch scrolling native while leaving no persistent scrollbar strip on mobile/PWA. */
@media (hover: none) and (pointer: coarse) {
    html, .pi4at, .pi4at * { scrollbar-width: none; }
    html::-webkit-scrollbar, .pi4at::-webkit-scrollbar, .pi4at *::-webkit-scrollbar { display: none; width: 0; height: 0; }
    .pi4at .slimScrollBar, .pi4at .slimScrollRail { display: none !important; }
}

/* Settings: one native scroll region, shared panels and disclosure rows. */
.pi4at-app #setting-menu { overflow: hidden; background: var(--p-bg); color: var(--p-text); }
/* Override the legacy .darkmode .sidebar-group .sidebar-content background,
   including the space around/between cards, in every appearance mode. */
.pi4at-app #setting-menu .settings-scroll, .pi4at-app #setting-menu .settings-content { background: var(--p-bg); color: var(--p-text); }
.pi4at-app .settings-screen { --p-screen-width: 720px; }
.pi4at-app #setting-menu .settings-scroll { scroll-padding-block: var(--p-space-4); }
.pi4at-app #setting-menu :is(input, select, textarea) { scroll-margin-block: var(--p-space-4); }
.pi4at-app #setting-menu :is(h1, h2, h3, h4, h5, h6, .settings-login-value, .settings-form .form-label) { color: var(--p-text); }
.pi4at-app #setting-menu .settings-disclosure-body { background: var(--p-surface); color: var(--p-text); }
.pi4at-app .settings-content { flex: none; width: 100%; max-width: 720px; min-width: 0; margin-inline: auto; padding: var(--p-space-5) var(--p-space-4); }
.pi4at-app .settings-intro { margin: 0 0 var(--p-space-5); color: var(--p-muted); font-size: var(--p-small); }
.pi4at-app .settings-section { display: grid; gap: var(--p-space-3); margin-bottom: var(--p-space-5); }
.pi4at-app .settings-section:last-child { margin-bottom: 0; }
.pi4at-app .settings-section > h2 { margin: 0; font-size: var(--p-section); }
.pi4at-app .settings-panel, .pi4at-app .settings-account-action { min-width: 0; margin: 0; }
.pi4at-app .settings-description { display: block; margin: 0; color: var(--p-muted); font-size: var(--p-small); line-height: 1.5; }
.pi4at-app .settings-profile-summary { display: flex; align-items: flex-start; gap: var(--p-space-3); padding: var(--p-space-4); }
.pi4at-app .settings-profile-identity { flex: 1; min-width: 0; }
.pi4at-app .settings-login-value { margin: var(--p-space-1) 0 var(--p-space-2); font-size: var(--p-section); font-weight: 600; overflow-wrap: anywhere; user-select: all; }
.pi4at-app .settings-copy { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: var(--p-space-2); min-width: var(--p-target); min-height: var(--p-target); }
.pi4at-app .settings-action { display: grid; grid-template-columns: var(--p-target) minmax(0, 1fr) 20px; align-items: center; gap: var(--p-space-3); width: 100%; min-height: var(--p-row); padding: var(--p-space-3) var(--p-space-4); border: 0; border-radius: var(--p-radius-card); background: transparent; color: var(--p-text); font: inherit; text-align: start; cursor: pointer; transition: background-color var(--p-fast); }
.pi4at-app .settings-action:hover { background: var(--p-hover); }
.pi4at-app .settings-action:active { background: var(--p-pressed); }
.pi4at-app .settings-action-icon { display: grid; place-items: center; width: var(--p-target); height: var(--p-target); border-radius: var(--p-radius-control); background: var(--p-raised); color: var(--p-accent-text); font-size: var(--p-section); }
.pi4at-app .settings-action-copy { display: grid; gap: var(--p-space-1); min-width: 0; }
.pi4at-app .settings-action-title { font-size: var(--p-small); font-weight: 600; overflow-wrap: anywhere; }
.pi4at-app .settings-action-end, .pi4at-app .settings-chevron { color: var(--p-muted); font-size: 20px; }
.pi4at-app .settings-chevron { transition: transform var(--p-fast); }
.pi4at-app .settings-action[aria-expanded="true"] .settings-chevron { transform: rotate(180deg); }
.pi4at-app .settings-profile-edit { grid-template-columns: 20px minmax(0, 1fr) 20px; min-height: var(--p-target); border-top: 1px solid var(--p-border); border-radius: 0 0 var(--p-radius-card) var(--p-radius-card); color: var(--p-accent-text); }
.pi4at-app .settings-form { display: grid; gap: var(--p-space-4); margin: 0; }
.pi4at-app .settings-disclosure-body { padding: var(--p-space-4); border-top: 1px solid var(--p-border); }
.pi4at-app .settings-field { display: grid; gap: var(--p-space-2); min-width: 0; }
.pi4at-app .settings-field .form-label { margin: 0; }
.pi4at-app .settings-password-control { position: relative; min-width: 0; }
.pi4at-app .settings-password-control .form-control { padding-inline-end: calc(var(--p-target) + var(--p-space-3)); background-image: none; }
.pi4at-app .settings-password-control .p-icon-button { position: absolute; inset-inline-end: 2px; top: 2px; }
.pi4at-app #setting-menu .settings-form .form-control.is-invalid:not(#input-send-chat-message) { border-color: var(--p-error); }
.pi4at-app #setting-menu .settings-form .form-control.is-invalid:not(#input-send-chat-message):focus { border-color: var(--p-focus); }
.pi4at-app .settings-actions { display: flex; justify-content: flex-end; gap: var(--p-space-2); }
.pi4at-app .settings-actions .btn { width: 100%; }
.pi4at-app .settings-feedback, .pi4at-app .settings-field-error { margin: 0; font-size: var(--p-small); overflow-wrap: anywhere; }
.pi4at-app .settings-feedback { color: var(--p-muted); }
.pi4at-app .settings-panel > .settings-feedback { padding: 0 var(--p-space-4) var(--p-space-3); }
.pi4at-app .settings-field-error { color: var(--p-error); }
.pi4at-app .settings-field-error p { margin: 0; }
.pi4at-app .settings-actions[hidden], .pi4at-app .settings-feedback[hidden], .pi4at-app .settings-install[hidden] { display: none; }
.pi4at-app .settings-danger { border-inline-start: 3px solid var(--p-error); }
.pi4at-app .settings-danger .settings-action-title, .pi4at-app .settings-danger .settings-action-icon { color: var(--p-error); }
@media (min-width: 768px) {
    .pi4at.pi4at-app[data-settings-open="true"] .sidebar-group { grid-column: 2 / -1; border-right: 0; }
    .pi4at-app[data-settings-open="true"] .sidebar-group > .tab-content { width: 100%; }
    .pi4at-app[data-settings-open="true"] .p-empty-state { display: none; }
    .pi4at-app .settings-screen { --p-screen-padding: var(--p-space-5); --p-screen-top: var(--p-space-6); }
    .pi4at-app .settings-content { padding: var(--p-space-6) var(--p-space-5); }
    .pi4at-app .settings-actions .btn { width: auto; }
}

/* Incoming invitations stay visible in the shared navigation without changing its geometry. */
.pi4at-app .nav-invites-link { position: relative; }
.pi4at-app .invite-count-badge {
    position: absolute;
    top: 4px;
    right: 6px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid var(--p-surface);
    border-radius: var(--p-radius-pill);
    background: var(--p-accent);
    color: #fff;
    font: 700 10px/1 var(--p-font);
    pointer-events: none;
}
.pi4at-app .invite-count-badge[hidden] { display: none !important; }
.pi4at-app .chat-list-scroll { touch-action: pan-y; }
.pi4at-app .p-pull-refresh {
    position: sticky;
    top: 8px;
    z-index: 5;
    display: flex;
    justify-content: center;
    height: 0;
    margin: 0;
    overflow: visible;
    pointer-events: none;
}
.pi4at-app .p-pull-refresh__content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius-pill);
    background: var(--p-raised);
    color: var(--p-text);
    box-shadow: 0 6px 20px #0004;
    opacity: 0;
    transform: translateY(calc(-100% - 8px));
    transition: opacity var(--p-fast), transform var(--p-fast);
    white-space: nowrap;
    font-size: var(--p-caption);
}
.pi4at-app .p-pull-refresh.is-pulling .p-pull-refresh__content {
    opacity: 1;
    transform: translateY(calc(-100% + var(--pull-offset, 0px)));
}
.pi4at-app .p-pull-refresh.is-refreshing .p-pull-refresh__content {
    border-color: var(--p-refresh-border);
    opacity: 1;
    transform: translateY(8px);
}
.pi4at-app .p-pull-refresh__icon { color: var(--p-accent-text); font-size: 15px; }
.pi4at-app .p-pull-refresh.is-refreshing .p-pull-refresh__icon { animation: p-pull-spin .8s linear infinite; }
@keyframes p-pull-spin { to { transform: rotate(360deg); } }
@media (max-width: 767.98px) {
    .pi4at-app .sidebar-menu .nav-invites-link .invite-count-badge {
        top: 3px;
        right: calc(50% - 27px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .pi4at-app .p-pull-refresh__icon { animation: none; }
}

/* Appearance uses native radios: keyboard arrows and screen readers work without
   a separate form submission or any connection/session lifecycle changes. */
.pi4at-app .appearance-panel { display: grid; gap: var(--p-space-3); padding: var(--p-space-4); }
.pi4at-app .appearance-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; min-width: 0; margin: 0; padding: 4px; border: 1px solid var(--p-border); border-radius: var(--p-radius-control); background: var(--p-bg); }
.pi4at-app .appearance-option { position: relative; min-width: 0; margin: 0; cursor: pointer; }
.pi4at-app .appearance-option span { display: grid; place-items: center; min-height: var(--p-target); padding: 8px 4px; border-radius: 7px; color: var(--p-muted); font-size: var(--p-small); font-weight: 600; }
.pi4at-app .appearance-option:hover span { background: var(--p-hover); }
.pi4at-app .appearance-option input:checked + span { background: var(--p-pressed); color: var(--p-accent-text); }
.pi4at-app .appearance-option input:focus-visible + span { outline: 2px solid var(--p-focus); outline-offset: -2px; }
.p-brand .p-brand-light { display: none; }
html[data-theme="light"] .p-brand .p-brand-dark { display: none; }
html[data-theme="light"] .p-brand .p-brand-light { display: block; }

/* Color overrides for the legacy template's .darkmode selectors. Keep that
   class for existing layout rules; data-theme and tokens own the palette. */
html[data-theme="light"] .pi4at :is(h1, h2, h3, h4, h5, h6) { color: var(--p-text) !important; }
html[data-theme="light"] .pi4at :is(.input-group-text, .input-icon-addon) { background: var(--p-bg) !important; border-color: var(--p-control-border) !important; color: var(--p-muted) !important; }
html[data-theme="light"] .pi4at .form-check .form-check-input { background-color: var(--p-surface); border-color: var(--p-control-border); }
html[data-theme="light"] .pi4at .form-check .form-check-input:checked { background-color: var(--p-accent); border-color: var(--p-accent); }
html[data-theme="light"] .pi4at :is(.form-check-label, .form-label, .text-default) { color: var(--p-text) !important; }
html[data-theme="light"] .pi4at .form-control.is-invalid { border-color: var(--p-error); }
html[data-theme="light"] .pi4at .form-control.is-invalid:focus { border-color: var(--p-focus); }
html[data-theme="light"] .pi4at :is(.form-control, .form-select, .form-check-input):focus { box-shadow: 0 0 0 1px var(--p-focus); }
html[data-theme="light"] .pi4at .form-control::placeholder { opacity: 1; }
html[data-theme="light"] .pi4at .modal .modal-content .modal-body { color: var(--p-text); }
html[data-theme="light"] .pi4at .modal .modal-content .modal-body p { color: inherit; }
html[data-theme="light"] .pi4at .modal .modal-content .modal-body .block-wrap span { background: var(--p-raised); }
html[data-theme="light"] .pi4at .modal-footer { border-color: var(--p-border); }
html[data-theme="light"] .pi4at .dropdown-menu { background: var(--p-surface) !important; border-color: var(--p-border) !important; color: var(--p-text); }
html[data-theme="light"] .pi4at .dropdown-menu :is(a, button) { background: transparent !important; color: var(--p-text) !important; }
html[data-theme="light"] .pi4at .dropdown-menu :is(a, button):hover { background: var(--p-hover) !important; }
html[data-theme="light"] .pi4at :is(.bg-light, .bg-transparent-danger) { background: var(--p-raised) !important; }
html[data-theme="light"] .pi4at #last-seen { color: var(--p-muted); }
html[data-theme="light"] .pi4at #messages-container .chats .message-content { background: var(--p-surface) !important; color: var(--p-text) !important; }
html[data-theme="light"] .pi4at #messages-container .chats-right .message-content { background: var(--p-pressed) !important; }
html[data-theme="light"] .pi4at #messages-container :is(.chat-time, .msg-read, .chat-content > small) { color: var(--p-muted); }
html[data-theme="light"] .pi4at #messages-container .msg-read i { color: var(--p-muted); }
html[data-theme="light"] .pi4at #messages-container .msg-read.success i { color: var(--p-success); }
html[data-theme="light"] .pi4at .p-toast { box-shadow: 0 8px 24px #1E20301F; }
html[data-theme="light"] .pi4at .btn-primary { --bs-btn-disabled-bg: var(--p-accent); --bs-btn-disabled-border-color: var(--p-accent); }