@import "message-tools-S5JwmcT.css";
@import "conversation-compose-kNnMn2p.css";
@import "conversation-options-AqhpsEV.css";
@import "conversation-list-FdYMvGM.css";
.messaging-layout.page-frame { padding:0; }
.messaging-layout { display:grid; grid-template-columns:330px minmax(0,1fr); height:calc(100dvh - var(--header-height) - 48px); min-height:400px; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--paper, var(--surface)); position:relative; box-shadow:0 12px 40px color-mix(in srgb,var(--shadow-color) 3.1%,transparent); }
.messaging-sidebar { min-height:0; min-width:0; border-right:1px solid var(--line); padding:16px; background:var(--paper); }
.message-eyebrow { font:600 var(--text-small)/1.5 var(--font-ui); letter-spacing:.11em; text-transform:uppercase; color:var(--muted); }
.messaging-content { min-width:0; min-height:0; height:100%; background:var(--surface); }
.conversation { height:100%; display:flex; flex-direction:column; min-width:0; min-height:0; position:relative; }
.conversation-header { display:flex; align-items:center; gap:13px; padding:24px 30px 20px; border-bottom:1px solid var(--line); flex-shrink:0; }
.conversation-heading { min-width:0; flex:1; }
.conversation-header h2 { margin:0 0 5px; font-size:var(--text-section); overflow-wrap:anywhere; line-height:1.15; }
.realtime-status { font:400 var(--text-small)/1.4 var(--font-ui); color:var(--muted); }
.message-history { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; padding:15px 30px 20px; overflow-anchor:none; }
.message-history::-webkit-scrollbar { display:none; }
.message { display:flex; align-items:flex-end; gap:10px; margin:20px 0; max-width:82%; }
.message>.avatar { width:34px; height:34px; flex-shrink:0; margin-bottom:18px; }
.message-content { min-width:0; }
.message strong { display:block; font:500 var(--text-small)/1.5 var(--font-ui); color:var(--muted); margin:0 0 5px 3px; }
.message-bubble { padding:12px 16px; background:var(--surface-soft); color:var(--ink); border:1px solid var(--line); border-radius:16px 16px 16px 3px; font:400 var(--text-base)/1.55 var(--font-ui); overflow-wrap:anywhere; margin:0; }
.message time { display:block; font:400 var(--text-small)/1.5 var(--font-ui); color:var(--muted); margin-top:5px; }
.message--mine { margin-left:auto; flex-direction:row-reverse; }
.message--mine .message-bubble { background:var(--brand-soft); border-color:var(--line); border-radius:16px 16px 3px 16px; }
.message--mine strong, .message--mine time { text-align:right; }
.message-compose { padding:12px 26px 18px; border-top:1px solid var(--line); background:var(--surface); flex-shrink:0; }
.message-compose form { margin:0; }
.message-compose-row { display:flex; align-items:flex-end; gap:10px; width:100%; }
.message-field { flex:1; min-width:0; }
.message-compose textarea { min-height:52px; max-height:150px; resize:vertical; padding:12px 14px; border-radius:12px; background:var(--surface); font:400 var(--text-base)/1.5 var(--font-ui); }
.message-compose .button { margin:0; }
.message-compose .compose-extras { gap:8px; flex-wrap:wrap; }
.message-compose .compose-extras>button { min-height:44px; height:44px; min-width:44px; }
.compose-hint { display:block; font:400 var(--text-small)/1.5 var(--font-ui); margin-top:8px; color:var(--muted); }
.message-typing { font:400 var(--text-small)/1.4 var(--font-ui); color:var(--green); min-height:24px; padding:2px 30px 7px; margin:0; }
.message-jump { align-self:center; margin:-34px 0 5px; z-index:1; background:var(--primary); color:var(--primary-ink); border:0; padding:9px 14px; border-radius:20px; box-shadow:0 3px 12px color-mix(in srgb,var(--shadow-color) 12.5%,transparent); font-size:var(--text-small); }
.messages-older { display:block; margin:0 auto; padding:10px; font-size:var(--text-small); color:var(--green); }
.message-error { padding:8px 14px; margin:4px 12px; border-radius:8px; background:var(--error-bg); color:var(--error); font-size:var(--text-small); }
.workspace-error { position:absolute; z-index:10; top:0; left:20%; right:20%; }
.message-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:35px; }
.message-empty>.qoops-logo { object-fit:contain; margin-bottom:28px; }
.message-empty h2 { font-size:var(--text-section); font-weight:500; line-height:1.25; margin:12px 0; }
.message-empty p { color:var(--muted); font:400 var(--text-base)/1.7 var(--font-ui); margin:0 0 25px; }
.message-empty small { margin-top:35px; color:var(--muted); font:400 var(--text-small)/1.5 var(--font-ui); }
.message-empty small i { margin-right:5px; }
.message-new { height:100%; overflow:auto; padding:35px; }
.message-new>.text-button { display:block; margin-bottom:35px; font-size:var(--text-base); }
.message-new h2 { margin-top:8px; }
.message-new>p { color:var(--muted); font-size:var(--text-base); }
.message-new form { max-width:560px; margin-top:30px; }
.message-new label { font-size:var(--text-small); }
.messages-back { display:none; }
.rail-panel--right { overflow:hidden; }
.rail-panel--right>[data-social-rails-target=content] { height:100%; min-height:0; padding-top:24px; }
.rail-panel--right:has(.conversation-close) { padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right)); }
.rail-panel--right:has(.conversation-close)>.rail-close { display:none; }
.rail-panel--right:has(.conversation-close)>[data-social-rails-target=content] { padding-top:0; }
.rail-conversation .conversation-header { padding:0 0 16px; gap:8px; }
.rail-conversation .conversation-header .icon-button { width:44px; height:44px; min-width:44px; padding:0; }
.rail-conversation .conversation-header h2 { font-size:var(--text-section); }
.rail-conversation .message-history { height:auto; min-height:0; padding:10px 0; flex:1; }
.rail-conversation .message { max-width:93%; gap:7px; }
.rail-conversation .message-bubble { font-size:var(--text-base); padding:10px 12px; }
.rail-conversation .message-compose { padding:12px 0 0; }
.rail-conversation .message-compose textarea { min-height:50px; max-height:110px; font-size:var(--text-base); }
.rail-conversation .message-compose-row > .button { width:44px; padding:10px; }
.rail-conversation .message-compose button span:not(.pixel-emoji), .rail-conversation .compose-hint { display:none; }
.rail-conversation .message-typing { padding-inline:0; }
.rail-conversation .rail-all-messages { font-size:var(--text-base); margin-top:14px; }
.messaging-layout [hidden], .rail-panel [hidden], [data-inbox-badge][hidden] { display:none; }
@media(max-width:1540px) { .messaging-layout { height:calc(100dvh - var(--header-height) - 36px); } }
@media(max-width:1000px) { .messaging-layout { grid-template-columns:285px minmax(0,1fr); } .conversation-header { padding-inline:20px; } .message-history { padding-inline:18px; } .message { max-width:94%; } }
@media(max-width:760px) {
    .rail-panel--right:has(.conversation-close) { padding-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right)); }
    .messaging-layout { display:block; height:calc(100dvh - var(--header-height) - 72px - env(safe-area-inset-bottom)); min-height:0; border:0; border-radius:0; }
    .messaging-sidebar { height:100%; border:0; padding:16px 12px; }
    .messaging-content { display:none; }
    .messaging-layout.has-conversation .messaging-sidebar { display:none; }
    .messaging-layout.has-conversation .messaging-content { display:block; }
    .messages-back { display:grid; }
    .conversation-header { padding:14px 12px; gap:8px; }
    .conversation-header h2 { font-size:var(--text-section); }
    .message-history { padding:8px 14px; }
    .message { max-width:95%; gap:7px; }
    .message>.avatar { width:28px; height:28px; }
    .message-bubble { padding:10px 13px; font-size:var(--text-base); }
    .message-compose { padding:10px 12px max(10px,env(safe-area-inset-bottom)); }
    .message-compose textarea { font-size:var(--text-base); }
    .message-compose-row > .button { width:44px; padding:10px; }
    .message-compose button span:not(.pixel-emoji), .compose-hint { display:none; }
    .message-new { padding:22px; }
    .message-typing { padding-inline:14px; }
}