/* Chat layout uses the shared DeValery palette; both columns scroll independently. */
html[data-ui-surface=chat] main{grid-template-columns:clamp(290px,30%,380px) minmax(0,1fr);overflow:hidden;min-height:0}
html[data-ui-surface=chat] #sidebar{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:visible;background:var(--dv-surface)}
html[data-ui-surface=chat] #sidebar .sidebar-heading{min-height:76px;padding:16px;gap:8px;flex-shrink:0}
.chat-title{flex:1;min-width:0}.chat-title h1{display:flex;align-items:center;gap:8px;font-size:22px!important}
#unreadTotal{font-size:11px;font-weight:700;border-radius:20px;padding:3px 7px;background:var(--dv-primary);color:var(--dv-on-primary);letter-spacing:0}
#chatConnection.connection-warning{color:var(--dv-danger)}
html[data-ui-surface=chat] :is(.chat-icon,#chatListOptions>summary,#chatActions>summary){display:inline-flex;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:38px;min-height:38px;padding:8px;border:0;border-radius:10px;background:transparent;color:var(--dv-muted);font-size:25px;line-height:1;cursor:pointer;list-style:none}
html[data-ui-surface=chat] :is(.chat-icon,#chatListOptions>summary,#chatActions>summary):hover{background:var(--dv-soft);color:var(--dv-text)}
html[data-ui-surface=chat] #sidebar #newChat{background:var(--dv-tint);color:var(--dv-primary);border:0;border-radius:50%;font-size:26px}
.chat-icon svg,#findButton svg,#send svg{width:21px;height:21px;flex-shrink:0}
html[data-ui-surface=chat] #sidebar #findContact{padding:0 14px;flex-shrink:0}
html[data-ui-surface=chat] #sidebar #contactQuery{padding:12px 44px 12px 14px;background:var(--dv-soft);border:1px solid transparent;border-radius:12px;font-size:14px;height:44px}
html[data-ui-surface=chat] #sidebar #findButton{display:grid;place-items:center;top:3px;bottom:3px;height:38px;font-size:20px}
html[data-ui-surface=chat] .conversation-filters{padding:12px 14px;gap:6px;flex-shrink:0;border:0;scrollbar-width:none}
html[data-ui-surface=chat] .conversation-filters button{border-radius:18px;padding:7px 10px;font-size:13px;line-height:1.3}
.chat-list-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 8px 8px;scrollbar-width:thin}
html[data-ui-surface=chat] #conversationList button{min-height:78px;padding:13px 10px;gap:12px;margin:2px 0;border:0;border-radius:12px;background:transparent}
html[data-ui-surface=chat] #conversationList button.selected{background:var(--dv-tint);box-shadow:none}
html[data-ui-surface=chat] #conversationList button:hover{background:var(--dv-soft)}
html[data-ui-surface=chat] #conversationList button.selected:hover{background:var(--dv-tint)}
html[data-ui-surface=chat] #conversationList .contact-copy strong{font-size:14px;font-weight:600;line-height:1.4}
html[data-ui-surface=chat] #conversationList .preview{font-size:13px;margin-top:5px;color:var(--dv-muted);line-height:1.3}
html[data-ui-surface=chat] #conversationList .has-unread-messages .contact-copy strong{font-weight:750}
.conversation-meta{max-width:82px;min-width:32px;gap:6px}.conversation-meta time{font-size:11px;max-width:82px;overflow:hidden;text-overflow:ellipsis}
.conversation-markers{display:flex;align-items:center;gap:5px;min-height:19px}.favorite-marker{font-size:12px;color:var(--dv-muted)}
html[data-ui-surface=chat] .unread{background:var(--dv-primary);color:var(--dv-on-primary);font-weight:650;font-size:11px;min-width:20px;text-align:center}
.chat-list-empty{color:var(--dv-muted);font-size:13px;padding:22px 16px;line-height:1.6;text-align:center}
html[data-ui-surface=chat] #sidebar #findResult{padding:0 8px}
html[data-ui-surface=chat] #chatListOptions>.chat-list-options-body{top:64px;max-height:calc(100% - 80px);box-shadow:0 12px 32px #0002;background:var(--dv-surface);border-color:var(--dv-border)}
html[data-ui-surface=chat] #thread{height:100%;min-width:0;overflow:hidden}
html[data-ui-surface=chat] #active{position:relative;min-width:0;overflow:hidden}
html[data-ui-surface=chat] .thread-heading{height:72px;min-height:72px;padding:12px 18px;gap:10px;flex-shrink:0;background:var(--dv-surface)}
.peer-copy{min-width:0;flex:1}.peer-copy strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px}.peer-copy small{margin-top:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#peerPhoto{flex-shrink:0}#back{display:none}
html[data-ui-surface=chat] #chatActions{padding:0;position:relative;flex-shrink:0}
#chatActions>summary::-webkit-details-marker{display:none}
html[data-ui-surface=chat] #chatActions .thread-tools{position:absolute;right:0;top:44px;z-index:15;display:grid;min-width:225px;gap:2px;padding:7px;background:var(--dv-surface);border:1px solid var(--dv-border);border-radius:12px;box-shadow:0 12px 28px #0002;max-height:calc(100dvh - 110px);overflow:auto}
html[data-ui-surface=chat] .thread-tools button{text-align:left;padding:11px 12px;border:0;background:transparent;color:var(--dv-text);border-radius:7px;font-size:13px}
html[data-ui-surface=chat] .thread-tools button:hover{background:var(--dv-soft)}
html[data-ui-surface=chat] #firstContact{margin:0;padding:9px 20px;background:var(--dv-soft);color:var(--dv-muted);font-size:12px;flex-shrink:0}
html[data-ui-surface=chat] #older{font-size:12px;padding:6px 12px;flex-shrink:0}
html[data-ui-surface=chat] #messages{padding:16px clamp(16px,4vw,70px) 24px;gap:7px;overscroll-behavior:contain;scrollbar-width:thin;background:var(--dv-bg);background-image:none}
html[data-ui-surface=chat] .bubble{max-width:min(78%,620px);min-width:90px;padding:10px 13px 7px;border-radius:14px;border:1px solid var(--dv-border);white-space:normal;box-shadow:0 1px 2px #172d3c06;font-size:15px;line-height:1.5}
html[data-ui-surface=chat] .bubble.mine{padding-right:25px;background:var(--dv-tint);border-color:transparent}
.message-text{white-space:pre-wrap;overflow-wrap:anywhere}.deleted-message .message-text{font-style:italic;color:var(--dv-muted)}
html[data-ui-surface=chat] .bubble>small{font-size:10px;line-height:1.3;margin-top:5px;color:var(--dv-muted)}
html[data-ui-surface=chat] .bubble>small.seen{color:var(--dv-primary)}
.chat-day{align-self:center;font-size:11px;line-height:1.3;color:var(--dv-muted);padding:6px 12px;border:1px solid var(--dv-border);background:var(--dv-surface);border-radius:20px;margin:12px 0}
.message-menu{position:absolute;right:3px;top:3px;z-index:2}.message-menu[open]{z-index:9}.message-menu>summary{list-style:none;cursor:pointer;width:20px;height:24px;text-align:center;font-size:19px;line-height:20px;color:var(--dv-muted)}.message-menu>summary::-webkit-details-marker{display:none}
.message-menu-options{position:absolute;right:0;top:24px;background:var(--dv-surface);border:1px solid var(--dv-border);border-radius:8px;box-shadow:0 6px 20px #0002;padding:4px;min-width:110px;display:grid;gap:2px}
.message-menu-options button{border:0;padding:8px;text-align:left;font-size:12px;background:transparent}
.message-menu-options button:hover{background:var(--dv-soft)}
html[data-ui-surface=chat] #compose{position:relative;flex-shrink:0;margin:0;padding:12px 16px;gap:6px;background:var(--dv-surface);border-top:1px solid var(--dv-border);align-items:flex-end}
html[data-ui-surface=chat] #compose .chat-icon{background:transparent;color:var(--dv-muted);height:44px;flex-basis:38px;border:0;border-radius:10px}
html[data-ui-surface=chat] #draft{flex:1;min-width:0;min-height:44px;max-height:132px;margin:0;padding:11px 14px;background:var(--dv-soft);border:1px solid transparent;border-radius:12px;line-height:20px;font-size:14px;scrollbar-width:thin}
html[data-ui-surface=chat] #compose #send{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:10px;border-radius:12px;background:var(--dv-primary);color:var(--dv-on-primary);border:0}
#emojiPanel{position:absolute;left:16px;bottom:calc(100% + 6px);display:grid;grid-template-columns:repeat(6,1fr);gap:3px;padding:10px;max-width:calc(100% - 32px);border:1px solid var(--dv-border);border-radius:14px;background:var(--dv-surface);box-shadow:0 8px 24px #0002;z-index:10}
#emojiPanel button{font-size:23px;padding:7px;border:0;background:transparent}
#emojiPanel button:hover{background:var(--dv-soft)}
html[data-ui-surface=chat] #empty{padding:24px;color:var(--dv-muted);background:var(--dv-bg)}
html[data-ui-surface=chat] #empty h2{font-size:25px;font-weight:650;margin:18px 0 6px;color:var(--dv-text)}
html[data-ui-surface=chat] #empty p{font-size:14px;max-width:340px;margin:4px 0}
html[data-ui-surface=chat] #notice:not(:empty){bottom:80px;background:var(--dv-surface);color:var(--dv-text);font-size:13px;max-width:520px;border-color:var(--dv-border);z-index:40}
#threadSearch{position:absolute;inset:72px 0 0;z-index:11;display:flex;flex-direction:column;background:var(--dv-bg);padding:16px;min-height:0}
#threadSearchForm{display:flex;align-items:center;gap:6px}#threadQuery{min-width:0;font-size:14px}#threadSearchState{color:var(--dv-muted);font-size:13px;margin:12px 2px}
#threadSearchResults{overflow:auto;min-height:0;flex:1;overscroll-behavior:contain}
#threadSearchResults article{padding:14px;margin-bottom:10px;background:var(--dv-surface);border:1px solid var(--dv-border);border-radius:12px;font-size:14px}
#threadSearchResults strong{font-size:12px;color:var(--dv-primary)}#threadSearchResults p{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0}#threadSearchResults time{font-size:11px;color:var(--dv-muted)}#moreThreadResults{align-self:center;margin-top:8px;font-size:13px}
@media(max-width:700px){
  html[data-ui-surface=chat] main{grid-template-columns:minmax(0,1fr)}
  html[data-ui-surface=chat] body.thread-open #sidebar{display:none}
  html[data-ui-surface=chat] #sidebar .sidebar-heading{min-height:68px;padding:12px 14px}
  html[data-ui-surface=chat] .thread-heading{height:64px;min-height:64px;gap:5px;padding:8px}
  #back{display:block;flex:0 0 30px;width:30px;padding:6px;border:0;font-size:22px;background:transparent}
  .peer-copy strong{font-size:14px}.peer-copy small{font-size:11px}
  html[data-ui-surface=chat] .thread-heading .avatar{width:34px;height:34px;font-size:12px}
  html[data-ui-surface=chat] .thread-heading :is(.chat-icon,#chatActions>summary){width:30px;height:36px;flex-basis:30px;min-height:36px;padding:6px}
  .chat-icon svg{width:19px;height:19px}
  html[data-ui-surface=chat] #messages{padding:8px 12px 16px}
  html[data-ui-surface=chat] .bubble{max-width:88%;font-size:14px}
  html[data-ui-surface=chat] #compose{padding:9px 8px;gap:2px}
  html[data-ui-surface=chat] #compose .chat-icon{width:32px;flex-basis:32px;padding:6px}
  html[data-ui-surface=chat] #draft,html[data-ui-surface=chat] #threadQuery{font-size:16px}
  #threadSearch{inset-block-start:64px;padding:10px}
}
.chat-attachment audio{display:block;width:280px;max-width:100%;height:40px}
#voiceNotePreview{display:block;width:100%;margin:18px 0}
#voiceNotePreview[hidden]{display:none}
.voice-note-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
#voiceNoteSend,#voiceNoteStop{background:var(--dv-primary);color:var(--dv-on-primary);border-color:var(--dv-primary)}
#voiceNoteState{font-size:14px;color:var(--dv-muted);line-height:1.6}
/* Per-conversation actions: swipe reveals, a separate tap confirms. */
html[data-ui-surface=chat] #conversationList .conversation-row{position:relative;overflow:hidden;border-radius:12px;margin:3px 0;isolation:isolate}
html[data-ui-surface=chat] #conversationList .conversation-front{position:relative;z-index:1;display:flex;align-items:stretch;width:100%;background:var(--dv-surface);transition:transform .18s ease;touch-action:pan-y;user-select:none}
html[data-ui-surface=chat] #conversationList .conversation-front img{-webkit-user-drag:none;user-select:none}
html[data-ui-surface=chat] #conversationList .conversation-open{flex:1;min-width:0;width:auto;border-radius:12px 0 0 12px;margin:0;gap:10px;padding:13px 8px}
html[data-ui-surface=chat] #conversationList .conversation-more{flex:0 0 32px;width:32px;min-height:44px;margin:0;padding:0;border-radius:0 12px 12px 0;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--dv-muted)}
html[data-ui-surface=chat] #conversationList .conversation-open.selected+.conversation-more{background:var(--dv-tint)}
html[data-ui-surface=chat] #conversationList .conversation-front .avatar{flex:0 0 42px;width:42px;height:42px;font-size:14px}
html[data-ui-surface=chat] #conversationList .conversation-swipe-action{position:absolute;inset-block:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:0;margin:0;padding:7px 3px;border:0;border-radius:0;font-size:11px;line-height:1.3;visibility:hidden}
html[data-ui-surface=chat] #conversationList .conversation-swipe-action{width:84px;font-size:12px;font-weight:600}
html[data-ui-surface=chat] #conversationList .swipe-pay{left:0;background:var(--dv-primary);color:var(--dv-on-primary)}
html[data-ui-surface=chat] #conversationList .swipe-request{left:84px;background:var(--dv-tint);color:var(--dv-primary)}
html[data-ui-surface=chat] #conversationList .swipe-archive{right:84px;background:var(--dv-primary);color:var(--dv-on-primary)}
html[data-ui-surface=chat] #conversationList .swipe-favorite{right:0;background:var(--dv-tint);color:var(--dv-primary)}
html[data-ui-surface=chat] #conversationList .reveal-money :is(.swipe-pay,.swipe-request),html[data-ui-surface=chat] #conversationList .reveal-organize :is(.swipe-archive,.swipe-favorite){visibility:visible}
html[data-ui-surface=chat] #conversationList .conversation-swipe-action:disabled{opacity:.5}
@media(max-width:700px){html[data-ui-surface=chat] #conversationList .conversation-more{display:none}html[data-ui-surface=chat] #conversationList .conversation-open{border-radius:12px;padding-right:12px}.chat-swipe-hint{font-size:12px;line-height:1.5}}
html[data-ui-surface=chat] #conversationList .conversation-swipe-action svg{width:22px;height:22px}
html[data-ui-surface=chat] #conversationList .swiping .conversation-front{transition:none;cursor:grabbing}
html[data-ui-surface=chat] #conversationList button:focus-visible{outline:2px solid var(--dv-primary);outline-offset:-3px}
.chat-swipe-hint{font-size:11px;color:var(--dv-muted);margin:2px 10px 9px}
#chatListFeedback{flex-shrink:0;font-size:12px;line-height:1.5;padding:12px 14px;border-top:1px solid var(--dv-border);background:var(--dv-soft);color:var(--dv-text);display:flex;gap:10px;align-items:center}
#chatListFeedback:empty{display:none}#chatListFeedback span{flex:1;min-width:0}#chatListFeedback button{padding:6px 8px;border:0;background:transparent;color:var(--dv-primary);font-size:12px;font-weight:650}
html[data-ui-surface=chat] #conversationActionDialog{width:min(390px,calc(100vw - 32px));padding:20px;border:1px solid var(--dv-border);border-radius:20px;background:var(--dv-surface);color:var(--dv-text);box-shadow:0 20px 80px #0003;max-height:80dvh;overflow:auto}
#conversationActionDialog::backdrop{background:#0b182a66}
.conversation-action-heading{display:flex;gap:16px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--dv-border)}
.conversation-action-heading div{flex:1;min-width:0}.conversation-action-heading small{font-size:12px;color:var(--dv-muted)}
#conversationActionName{font-size:18px;margin:5px 0 0;overflow-wrap:anywhere;line-height:1.35}
.conversation-action-heading button{border:0;background:var(--dv-soft);color:var(--dv-text);border-radius:50%;width:36px;height:36px;padding:0;flex-shrink:0}
#conversationActionOptions{display:grid;gap:5px;padding-top:10px}
#conversationActionOptions button{display:flex;gap:14px;align-items:center;width:100%;border:0;border-radius:10px;background:transparent;color:var(--dv-text);text-align:left;font-size:14px;padding:14px 10px;min-height:50px}
#conversationActionOptions button:hover{background:var(--dv-soft)}#conversationActionOptions button:disabled{opacity:.5}#conversationActionOptions svg{width:22px;height:22px;color:var(--dv-primary);flex-shrink:0}
#conversationActionError:empty{display:none}#conversationActionError{font-size:13px;color:var(--dv-danger);line-height:1.5}
/* These actions now live with the conversation instead of cluttering its header. */
html[data-ui-surface=chat] #chatActions :is(#favoriteChat,#archiveChat){display:none}
@media(max-width:700px){html[data-ui-surface=chat] #conversationActionDialog{margin:auto 0 0;width:100%;max-width:none;border-radius:22px 22px 0 0;padding:20px 18px max(22px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){html[data-ui-surface=chat] #conversationList .conversation-front{transition:none}}
html[data-ui-surface=chat]:not([data-embedded=true]) body>header{height:56px;min-height:56px;flex-wrap:nowrap;padding:8px 14px}
html[data-ui-surface=chat]:not([data-embedded=true]) main{height:calc(100dvh - 56px)}
html[data-ui-surface=chat] #notificationsPanelButton{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;min-height:36px;padding:8px;border:1px solid #ffffff24;background:transparent;color:white}
html[data-ui-surface=chat] #notificationsPanelButton svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
html[data-ui-surface=chat] #notificationsPanelButton .notification-badge{position:absolute;right:-5px;top:-5px;min-width:17px;margin:0;background:var(--dv-danger);color:white;border-radius:10px;text-align:center;padding:1px 4px;font-size:10px}