/* Conversation work area. Owns layout only; accepted brand/navigation remain in style.css. */
body[data-role=staff] main{max-width:1480px;grid-template-columns:minmax(230px,290px) minmax(0,1fr);gap:clamp(36px,5vw,80px);margin-top:24px;align-items:start}
body[data-role=staff] aside{padding-top:0;min-width:0}
body[data-role=staff] #list-title{font-size:17px;letter-spacing:0;color:var(--ink);margin:0 0 16px}
body[data-role=staff] #conversations{display:grid;max-height:calc(100dvh - 255px);overflow:auto;scrollbar-width:thin;gap:0}
body[data-role=staff] .conversation-item{max-width:none;width:100%;padding:17px 16px;display:grid;gap:5px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.55;text-align:left}
.conversation-preview{font-size:12px;line-height:1.55;color:var(--soft);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
body[data-role=staff] .conversation-item time{font-size:11px}
body[data-role=staff] .inbox-badge{margin:0;justify-self:start;font-size:11px}
body[data-role=staff] #desk{display:flex;flex-direction:column;min-width:0;height:calc(100dvh - 140px);min-height:520px}
.desk-head{flex:none;min-width:0}
body[data-role=staff] .desk-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;padding-bottom:14px;margin-bottom:10px}
body[data-role=staff] .desk-head h1{flex:1;min-width:0}
body[data-role=staff] .desk-head h1,body[data-role=guest][data-has-conversation=true] .desk-head h1{font-family:VopiText,Arial,sans-serif;font-size:20px;line-height:1.5;letter-spacing:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
#desk-recipient{font-size:12px;color:var(--soft);margin:8px 0}
#desk-initial-note{font-size:12px;line-height:1.7;color:var(--soft);max-width:620px;margin:22px 0 0}
#desk-processing{flex:none;font-size:12px;color:var(--soft);padding:0}
#desk-processing>summary{min-height:32px;display:inline-flex;align-items:center}
#desk-processing[open]{flex-basis:100%;max-height:38dvh;overflow:auto;border-bottom:1px solid var(--line);margin-bottom:12px}
#desk-processing #assignment{margin:8px 0}
#desk-processing #reception-tools:not([hidden]){display:flex;flex-wrap:wrap;gap:12px;align-items:center}
#desk-processing input{font:inherit;max-width:100%;padding:8px;background:transparent;border:1px solid var(--line)}
#desk-processing .exchange-decision{margin:8px 0}
#desk-back{display:none}
body[data-role=staff] .timeline-wrap{flex:1 1 0;min-height:130px;display:flex;flex-direction:column;padding-bottom:20px}
body[data-role=staff] #timeline,body[data-role=staff]:has(#quote-draft:not([hidden])) #timeline{flex:1;min-height:0;max-height:none;overflow:auto;padding:12px 16px 12px 0;overscroll-behavior:contain}
/* Message identity and surfaces. Role stays explicit; position/color do not imply a read receipt. */
#messages{padding:0 2px}
.message-day{display:flex;align-items:center;gap:16px;justify-content:center;margin:12px 0 24px;color:var(--soft);font-size:11px}
.message-day::before,.message-day::after{content:'';height:1px;background:var(--line);flex:1;max-width:90px}
.message-row,.message-row.firm{display:flex;align-items:flex-start;gap:12px;width:fit-content;max-width:88%;margin:0 auto 22px 0;padding:0;border:0}
.message-row[data-side=own]{flex-direction:row-reverse;margin-left:auto;margin-right:0}
.message-row.continues{margin-top:-10px}
.message-avatar{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:50%;overflow:hidden}
.message-avatar img{display:block;width:42px;height:42px;object-fit:contain}
.visitor-mark{display:block;position:relative;width:20px;height:20px;border:1.4px solid #687e89;border-radius:50%;transform:rotate(-12deg)}
.visitor-mark::after{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:#687e89;top:6px;right:4px}
.message-card{min-width:0;padding:10px 16px 14px;border-radius:2px 15px 15px 15px;background:#faf6eb;border:1px solid #e8dfca}
.message-row.visitor .message-card{background:#edf3f5;border-color:#d9e4e8}
.message-row[data-side=own] .message-card{border-radius:15px 2px 15px 15px}
.message-body{font-size:15px;line-height:1.75}
.message-meta{font-size:11px;gap:9px;display:flex;flex-wrap:wrap;align-items:center;margin-bottom:6px;min-height:28px}
.message-meta [data-author]{font-size:12px;font-weight:600;color:var(--ink)}
.message-meta time{font-variant-numeric:tabular-nums;white-space:nowrap}
.message-actions{margin-left:auto;text-align:right;max-width:100%}
.message-actions>summary{font-size:20px;line-height:28px;min-width:32px;min-height:28px;text-align:center;color:var(--soft);border-radius:4px}
.message-actions>summary::after{content:none}
.message-actions>summary:hover{background:#fff8;color:var(--ink)}
.message-meta .message-actions button{display:block;margin:0 0 0 auto;padding:7px 0;font-size:12px;min-height:34px;opacity:1}
.message-quote{font-size:13px;line-height:1.65;border-left:2px solid #a99c7b;background:#ffffff80;padding:9px 12px;margin:0 0 10px}
.message-quote span{font-size:11px}
.message-edited{font-size:10px;order:4}
.edition-history,.message-original{font-size:11px;margin-top:10px;color:var(--soft)}
body[data-role=staff] #compose{flex:none}
body[data-has-conversation=true] #compose{padding:12px 16px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
body[data-has-conversation=true] #desk-recipient{font-size:12px;color:var(--ink);margin:0 0 8px}
body[data-has-conversation=true] .compose-actions{margin-top:8px}
body[data-has-conversation=true] #quote-draft{margin:0 0 12px}
#rich-editor.ql-container{height:auto}
body[data-has-conversation=true] .ql-editor{min-height:80px;max-height:210px;overflow:auto;font-size:16px}
body[data-has-conversation=true] textarea#message{min-height:80px;max-height:210px}
body[data-role=staff] #status{flex:none;margin:8px 0 0;min-height:18px}
body[data-role=staff] #status:empty{margin:0;min-height:0}
body[data-role=staff] #desk>.details,body[data-role=staff] #return-tools{flex:none;margin-top:6px}
body[data-role=guest] main{max-width:980px}
body[data-role=guest][data-has-conversation=true] main{margin-top:38px}
body[data-role=guest] #timeline{max-height:clamp(200px,45dvh,500px)}
body[data-role=guest]:has(#quote-draft:not([hidden])) #timeline{max-height:clamp(160px,40dvh,450px)}
body[data-role=guest][data-has-conversation=true] .desk-head{margin-bottom:18px}
body[data-role=guest] .history-controls{color:var(--ink)}
body[data-role=guest] #status:empty{min-height:0;margin:0}
#send{min-height:44px;font-size:14px}
#conversation-options{flex:none;margin:0;border:0;font-size:12px;color:var(--soft)}
#conversation-options>summary{width:fit-content;margin-left:auto;min-height:32px;display:flex;align-items:center;padding:0 8px;cursor:pointer}
#conversation-options>summary::after{content:' ⋯';margin-left:6px;font-size:18px}
#conversation-options[open]{padding-bottom:8px}
#conversation-options>.details,#conversation-options>.return-tools{margin-top:8px;padding:12px 0;border-top:1px solid var(--line)}
#conversation-options p{max-width:62ch;font-size:12px;line-height:1.7}
#conversation-options #exit-session{margin-top:8px;min-height:40px;font-size:12px}
#conversation-options #exit-confirm{padding:12px 0;border-top:1px solid var(--line)}
#conversation-options #exit-confirm button{min-height:44px}
@media(max-width:850px){
 #conversation-options>summary{min-height:44px}
 body[data-role=staff] main{display:block;margin-top:28px}
 body[data-role=staff] aside{display:block}
 body[data-role=staff] #conversations{max-height:none;display:grid}
 body[data-role=staff] #desk{height:auto;min-height:0}
 body[data-role=staff][data-mobile-view=thread] aside{display:none}
 body[data-role=staff][data-mobile-view=list][data-has-conversation=true] #desk{display:none}
 body[data-role=staff][data-mobile-view=thread] #desk{min-height:calc(100dvh - 190px)}
 body[data-role=staff] #timeline{max-height:clamp(170px,calc(100dvh - 540px),380px);min-height:170px}
 body[data-role=staff] #desk-back:not([hidden]){display:block;font-size:12px;color:var(--gold);margin-bottom:10px;padding-left:0;min-height:44px}
 .message-row,.message-row.firm{max-width:94%;gap:8px}
 .message-avatar{width:34px;height:34px;flex-basis:34px}.message-avatar img{width:32px;height:32px}
 .message-card{padding:8px 12px 12px}.message-meta{gap:7px}.message-body{font-size:15px}
 .message-actions>summary{min-height:36px;line-height:36px;min-width:36px}
 .message-meta .message-actions button{min-height:44px}
 body[data-role=staff] .timeline-wrap{flex:auto}
 body[data-role=staff] #desk-processing[open]{max-height:none}
 body[data-role=staff] .desk-head{display:block}
}
@media(max-width:480px){
 body[data-role=guest] main{margin-top:36px}
 body[data-role=guest] #conversations{max-height:230px}
 .compose-actions{gap:12px}.send-actions{gap:12px}
 #desk-initial-note{font-size:12px}
 #desk-processing #reception-tools:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr)}
}