/* Chat messages and the conversation library, all viewports. Loaded after the older layers, before
   mc-mobile-chat.css; selectors are anchored on #page-conversation to win over them. */

/* ---- Messages: messaging-app bubbles. Yours: purple, right. The agent's: white card, left. ---- */
#page-conversation{--bubble-mine:linear-gradient(135deg,#7d5cf6,#5a3dd8);--chat-bg:color-mix(in srgb,var(--canvas) 70%,var(--surface))}
#page-conversation .chat-panel{background:var(--chat-bg)}
#page-conversation #chat{padding-inline:clamp(12px,3vw,32px)}
#page-conversation .msg{position:relative;display:flow-root;width:fit-content;margin-block:8px;padding:10px 14px;border:0;font-size:15px;box-shadow:none}
#page-conversation .msg .message-content{font-size:14.5px;line-height:1.6}
#page-conversation .msg .message-content > p{margin-block:0 .5em}
#page-conversation .msg .message-content > :last-child{margin-bottom:0}
#page-conversation .msg.user{max-width:min(70%,620px);margin-left:auto;border-radius:20px 20px 6px 20px;background:var(--bubble-mine);color:#fff}
#page-conversation .msg.user .message-content,#page-conversation .msg.user .message-content :is(p,li,strong,em,h2,h3,h4){color:#fff}
#page-conversation .msg.user .message-content a{color:#fff;text-decoration:underline}
#page-conversation .msg.user .message-content code{background:#ffffff26;color:#fff}
#page-conversation .msg.user .who{display:none}
#page-conversation .msg.nico{max-width:min(100%,780px);border-radius:20px 20px 20px 6px;background:var(--surface);border:1px solid var(--line)}
#page-conversation .msg.nico .who{margin-bottom:4px;font-size:10.5px;letter-spacing:.08em;color:var(--cyan)}
#page-conversation .msg time{display:block;margin-top:4px;font-size:10.5px;line-height:1.2;color:var(--muted)}
#page-conversation .msg.user time{text-align:right;color:#ffffffc0}
#page-conversation .msg.user.is-pending{opacity:.85}
#page-conversation .message-media{display:grid;gap:6px;margin-top:6px}
#page-conversation .message-media:first-of-type:not(:empty){margin-top:2px}
#page-conversation .message-media img{display:block;width:auto;height:auto;max-width:min(100%,360px);max-height:260px;object-fit:contain;border-radius:14px;cursor:zoom-in}
#page-conversation .message-media audio{width:min(100%,300px);height:40px}
#page-conversation .msg.user .attachment-name{color:#ffffffd0}

/* Attachments as cards: icon · name · TYPE · size · download. */
#page-conversation .file-card{display:flex;align-items:center;gap:12px;min-width:min(260px,100%);max-width:340px;padding:8px 10px 8px 8px;border-radius:14px;background:var(--surface-soft);color:var(--ink);text-decoration:none}
#page-conversation .file-card-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--cyan-soft);color:var(--cyan)}
#page-conversation .file-card-text{display:grid;flex:1;min-width:0}
#page-conversation .file-card-text strong{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-conversation .file-card-text small{font-size:11.5px;color:var(--muted)}
#page-conversation .file-card-download{flex:none;display:grid;place-items:center;width:30px;height:30px;color:var(--muted)}
#page-conversation .msg.user .file-card{background:#ffffff1f;color:#fff}
#page-conversation .msg.user .file-card-icon{background:#ffffff2e;color:#fff}
#page-conversation .msg.user .file-card-text small,#page-conversation .msg.user .file-card-download{color:#ffffffc0}
#page-conversation a.file-card:hover{filter:brightness(1.05)}

/* Copy / reply / favourite: small icons just under the bubble, never over the text. */
#page-conversation .msg{margin-bottom:32px}
#page-conversation .msg .message-actions{position:absolute;top:100%;left:2px;display:flex;gap:2px;margin:0;padding:3px 0 0;background:none;border:0;box-shadow:none;opacity:.8}
#page-conversation .msg.user .message-actions{left:auto;right:2px}
#page-conversation .msg .message-actions .message-action{display:inline-grid;place-items:center;width:28px;height:26px;min-height:26px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted)}
#page-conversation .msg .message-actions .message-action:hover{background:var(--surface);color:var(--ink)}
#page-conversation .msg .message-actions .is-favorite{color:#d99a00}
#page-conversation .msg .message-actions .is-favorite svg{fill:currentColor}
@media (hover:hover) and (pointer:fine){
  #page-conversation .msg .message-actions{opacity:0;transition:opacity .12s}
  #page-conversation .msg:hover .message-actions,#page-conversation .msg:focus-within .message-actions{opacity:1}
}

/* ---- Composer, WhatsApp/Telegram style: [ text … 📎 ] ( ● ) — mic while empty, send arrow with content ---- */
#page-conversation #messageForm{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"reply reply" "files files" "pill action";align-items:end;gap:0 8px;width:min(100% - 32px,900px);margin:0 auto 14px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;flex:none;min-height:0}
#page-conversation #replyComposer{grid-area:reply;margin:0 0 6px;padding:6px 10px;border-radius:14px;background:var(--surface)}
#page-conversation #composerAttachments{grid-area:files;margin:0 0 6px}
#page-conversation .composer-footer{display:contents}
#page-conversation .composer-pill{grid-area:pill;display:flex;align-items:flex-end;gap:2px;min-width:0;min-height:48px;padding:2px 4px 2px 16px;border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:0 2px 10px #2a1f520d}
#page-conversation .composer-pill:focus-within{border-color:color-mix(in srgb,var(--cyan) 55%,var(--line))}
#page-conversation #textIn{flex:1;min-width:0;min-height:44px;max-height:160px;margin:0;padding:12px 0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:15px;line-height:20px;resize:none;outline:none;overflow-y:hidden;scrollbar-width:thin}
#page-conversation #textIn::placeholder{color:var(--muted);opacity:1}
@media (pointer:coarse){#page-conversation #textIn{font-size:16px}} /* iOS zooms into smaller inputs */
#page-conversation .composer-tools{display:flex;flex:none;margin:0}
#page-conversation #attachmentButton{width:42px;height:42px;min-height:42px;margin:1px 0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted)}
#page-conversation #attachmentButton:hover{background:var(--surface-soft);color:var(--ink)}
#page-conversation #sendBtn,#page-conversation #voiceNoteBtn{grid-area:action;display:inline-flex;align-items:center;justify-content:center;width:48px;min-width:48px;height:48px;min-height:48px;padding:0;border:0;border-radius:50%;background:var(--cyan);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--cyan) 35%,transparent);gap:0}
#page-conversation #sendBtn{font-size:0}
#page-conversation #sendBtn > span{font-size:20px;line-height:1;color:#fff}
#page-conversation #voiceNoteBtn:hover,#page-conversation #sendBtn:hover{background:var(--cyan-hover,var(--cyan))}
#page-conversation #sendBtn:disabled{opacity:.6}
#page-conversation #messageForm:not(.has-content) #sendBtn,
#page-conversation #messageForm.has-content #voiceNoteBtn{display:none}
/* Status floats just above the composer and only when it says something useful. */
#page-conversation #status{position:absolute;left:18px;right:64px;bottom:calc(100% + 4px);min-height:0;margin:0;padding:0;font-size:11.5px;line-height:1.4;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
#page-conversation #status > i{display:none}
#page-conversation #status[data-idle=true]{display:none}
#page-conversation #composerAttachments{display:flex;flex-wrap:wrap;gap:6px}
#page-conversation #composerAttachments.hidden{display:none}
#page-conversation .composer-attachment{display:inline-flex;align-items:center;gap:8px;max-width:240px;padding:4px 4px 4px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:12.5px}
#page-conversation .composer-attachment img{width:28px;height:28px;object-fit:cover;border-radius:7px}
#page-conversation .composer-attachment span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-conversation .composer-attachment button{flex:none;width:26px;height:26px;min-height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted)}

/* Voice notes, WhatsApp style: hold the mic (it grows) and the pill becomes the recording bar —
   ● 0:07 ▁▃▅▂ ‹ Deslize para cancelar — with a lock above the mic; locked, the mic turns into ➤ and 🗑 shows. */
#page-conversation #voiceNoteBtn{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform .15s ease,background .15s ease}
#page-conversation #voiceNoteBtn .vn-send{display:none}
#page-conversation #messageForm.is-locked #voiceNoteBtn .vn-send{display:block}
#page-conversation #messageForm.is-locked #voiceNoteBtn .vn-mic{display:none}
#page-conversation #messageForm.is-recording #voiceNoteBtn{display:inline-flex}
#page-conversation #messageForm.is-holding #voiceNoteBtn{transform:scale(1.35);background:#e5484d;box-shadow:0 6px 18px #e5484d55}
#page-conversation .voice-note-state{display:none;flex:1;align-items:center;gap:10px;min-width:0;min-height:44px;padding-right:8px;font-size:14px;color:var(--ink);overflow:hidden}
#page-conversation #messageForm.is-recording .voice-note-state{display:flex}
#page-conversation #messageForm.is-recording #textIn,#page-conversation #messageForm.is-recording .composer-tools{display:none}
#page-conversation .voice-note-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#e5484d;animation:mc-pulse 1s ease-in-out infinite}
#page-conversation .voice-note-time{flex:none;font-variant-numeric:tabular-nums;color:var(--ink);min-width:34px}
#page-conversation .voice-note-levels{display:none;flex:1;align-items:center;gap:2px;height:24px;min-width:0;overflow:hidden}
#page-conversation .voice-note-levels i{flex:1;min-width:2px;max-width:4px;height:100%;border-radius:2px;background:color-mix(in srgb,var(--cyan) 70%,transparent);transform:scaleY(.08);transition:transform .09s linear}
#page-conversation #messageForm.is-locked .voice-note-levels{display:flex}
#page-conversation .voice-note-hint{flex:1;text-align:right;color:var(--muted);font-size:13px;white-space:nowrap;transform:translateX(var(--note-slide,0px))}
#page-conversation #messageForm.is-locked .voice-note-hint{display:none}
#page-conversation .voice-note-trash{display:none;flex:none;align-items:center;justify-content:center;width:36px;height:36px;min-height:36px;margin-left:-8px;padding:0;border:0;border-radius:50%;background:transparent;color:#e5484d}
#page-conversation #messageForm.is-locked .voice-note-trash{display:inline-flex}
#page-conversation #messageForm.is-locked .voice-note-dot{display:none}
#page-conversation .voice-note-lock{display:none;position:absolute;right:6px;bottom:calc(100% + 12px);flex-direction:column;align-items:center;gap:2px;padding:9px 8px 7px;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--muted);box-shadow:0 4px 14px #2a1f5222;animation:mc-lock-hint 1.2s ease-in-out infinite}
#page-conversation #messageForm.is-holding .voice-note-lock{display:flex}
@keyframes mc-lock-hint{50%{transform:translateY(-4px)}}
/* The message waiting for the server, with its own "A enviar…" */
#page-conversation .msg.pending-send time{display:block;margin-top:4px;font-size:11px;color:var(--muted);text-align:right}
#page-conversation .msg.user.pending-send time{color:#ffffffd9}
#page-conversation .msg.pending-send .cancel-send{margin-left:10px;padding:0;min-height:0;border:0;background:none;color:#fff;font-size:12px;font-weight:700;text-decoration:underline;cursor:pointer}
/* Voice note player, Telegram style: ▶ · waveform that fills as it plays (tap to seek) · time · speed · transcript */
#page-conversation .voice-note{display:flex;flex-direction:column;gap:6px;width:min(280px,100%)}
#page-conversation .voice-player{--vp-accent:var(--cyan);--vp-on-accent:#fff;--vp-muted:color-mix(in srgb,var(--cyan) 26%,transparent);display:flex;align-items:center;gap:10px}
#page-conversation .msg.user .voice-player{--vp-accent:#fff;--vp-on-accent:var(--cyan);--vp-muted:rgba(255,255,255,.42)}
#page-conversation .vp-play{flex:none;display:grid;place-items:center;width:42px;height:42px;min-height:42px;padding:0;border:0;border-radius:50%;background:var(--vp-accent);color:var(--vp-on-accent);box-shadow:none;cursor:pointer}
#page-conversation .voice-player:not(.is-playing) .vp-play svg{margin-left:2px}
#page-conversation .vp-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#page-conversation .vp-wave{display:flex;align-items:center;gap:2px;height:28px;cursor:pointer;touch-action:manipulation;outline-offset:3px}
#page-conversation .vp-wave i{flex:1;min-width:2px;max-width:4px;height:calc(var(--h,.3) * 100%);border-radius:2px;background:var(--vp-muted);transition:background .12s}
#page-conversation .vp-wave i.played{background:var(--vp-accent)}
#page-conversation .vp-meta{display:flex;align-items:center;gap:8px;font-size:12px;font-variant-numeric:tabular-nums;opacity:.9}
#page-conversation .vp-speed,#page-conversation .vp-transcript-toggle{min-height:22px;padding:1px 8px;border:0;border-radius:11px;background:var(--vp-muted);color:inherit;font:600 11px/20px inherit;cursor:pointer}
#page-conversation .vp-transcript{margin:0;font-size:13.5px;line-height:1.45;white-space:pre-wrap;opacity:.95}
#page-conversation .voice-player.is-broken .vp-wave{opacity:.4}
#page-conversation .msg.has-voice .message-media{margin-top:0}

/* ---- Live reply: the agent's current step, recent steps, then the streamed text ---- */
#page-conversation #currentExecution{display:none}
#page-conversation .live-progress{display:inline-flex;flex-direction:column;gap:6px;max-width:100%;margin:2px 0 6px;padding:8px 12px;border:1px solid var(--line);border-radius:14px 14px 14px 6px;background:var(--surface-soft)}
#page-conversation .msg.nico:not(.is-streaming) .live-progress{display:none}
#page-conversation .live-now{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;font-weight:600;color:var(--ink)}
#page-conversation .live-now-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#page-conversation .live-elapsed{margin-left:auto;padding-left:6px;font-size:11px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
#page-conversation .live-decision{min-height:28px;padding:2px 6px;font-size:12px}
#page-conversation .live-stop{min-height:28px;padding:2px 8px;border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:600;color:var(--ink)}
#page-conversation .live-stop:hover{border-color:var(--amber);color:var(--amber)}
#page-conversation .live-spinner{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid color-mix(in srgb,var(--cyan) 25%,transparent);border-top-color:var(--cyan);animation:mc-spin .8s linear infinite}
#page-conversation .needs-decision .live-spinner{border-color:var(--amber);animation:none}
#page-conversation .needs-decision .live-progress{border-color:var(--amber);background:var(--amber-soft)}
#page-conversation .live-steps{display:grid;gap:3px;margin:0;padding:0;list-style:none}
#page-conversation .live-steps[hidden]{display:none}
#page-conversation .live-step{display:flex;gap:7px;min-width:0;font-size:12px;line-height:1.45;color:var(--muted)}
#page-conversation .live-step::before{flex:none;width:12px;text-align:center;font-weight:700}
#page-conversation .live-step.is-done::before{content:'✓';color:var(--mint)}
#page-conversation .live-step.is-failed::before{content:'✕';color:#d4483b}
#page-conversation .live-step.is-active::before{content:'•';color:var(--cyan);animation:mc-pulse 1s ease-in-out infinite}
#page-conversation .live-step.is-active{color:var(--ink)}
#page-conversation .live-step.is-note{font-style:italic}
#page-conversation .live-step.is-note::before{content:'›';color:var(--muted)}
#page-conversation .live-step.is-wait::before{content:'!';color:var(--amber)}
#page-conversation .live-reply .message-content:empty{display:none}
#page-conversation .msg.nico.is-streaming .message-content > :is(p,h2,h3,h4,h5,h6,blockquote):last-child::after,
#page-conversation .msg.nico.is-streaming .message-content > :is(ul,ol):last-child > li:last-child::after{content:'';display:inline-block;width:.5em;height:1em;margin-left:2px;vertical-align:-2px;border-radius:2px;background:var(--cyan);animation:mc-caret 1s steps(2,start) infinite}
@keyframes mc-spin{to{transform:rotate(360deg)}}
@keyframes mc-pulse{50%{opacity:.3}}
@keyframes mc-caret{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){#page-conversation .live-spinner,#page-conversation .live-step.is-active::before,#page-conversation .msg.nico.is-streaming .message-content :is(p,h2,h3,h4,h5,h6,blockquote,li)::after{animation:none}}

/* ---- Agent avatars (list rows, chips, "Nova conversa" picker) ---- */
.agent-avatar{--avatar:#6c6981;display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;font:700 15px var(--font-display,inherit);color:var(--avatar);background:color-mix(in srgb,var(--avatar) 15%,var(--surface))}
.agent-avatar[data-color=violet]{--avatar:#7048ea}
.agent-avatar[data-color=green]{--avatar:#12936f}
.agent-avatar[data-color=blue]{--avatar:#2f6fdb}
.agent-avatar[data-color=orange]{--avatar:#d9741c}
.agent-avatar[data-color=pink]{--avatar:#d14f8a}
:root[data-theme=dark] .agent-avatar[data-color=violet]{--avatar:#b29aff}
:root[data-theme=dark] .agent-avatar[data-color=green]{--avatar:#4fd1a5}
:root[data-theme=dark] .agent-avatar[data-color=blue]{--avatar:#7fa8ff}
:root[data-theme=dark] .agent-avatar[data-color=orange]{--avatar:#f2a35e}
:root[data-theme=dark] .agent-avatar[data-color=pink]{--avatar:#f08cb9}

.agent-menu{position:fixed;z-index:1000;width:310px;max-width:calc(100vw - 16px);padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 36px #1d153a2e}
.agent-menu-heading{margin:4px 10px 6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.agent-menu-item{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:7px 10px;border:0;border-radius:12px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.agent-menu-item:hover,.agent-menu-item:focus-visible{background:var(--cyan-soft);outline:none}
.agent-menu-item > span:last-child{display:grid;gap:1px;min-width:0}
.agent-menu-item strong{font-size:14px}
.agent-menu-item small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){.agent-menu{top:auto;left:0;right:0;bottom:0;width:auto;max-width:none;padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px));border-radius:22px 22px 0 0;box-shadow:0 -10px 36px #1d153a33}}

/* ---- Conversation library: one "Nova conversa" (agent picker), search, one filter row, a plain list ---- */
#page-conversation .new-conversation-quick{display:none}
#page-conversation #newSess::after{content:'▾';margin-left:6px;font-size:11px}
#page-conversation.conversation-library .conversation-header{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:920px;margin:0 auto 14px;padding:0}
#page-conversation.conversation-library .conversation-header > div:first-child{flex:1 1 auto;width:auto;min-width:0}
#page-conversation.conversation-library .conversation-header > .conversation-tools{flex:none;width:auto}
#page-conversation.conversation-library .conversation-header .eyebrow,
#page-conversation.conversation-library #sessionDetail,
#page-conversation.conversation-library #conversationActionsButton{display:none}
#page-conversation.conversation-library #conversationTitle{margin:0;font-size:28px;line-height:1.2}
#page-conversation.conversation-library .conversation-tools{flex:none;margin:0}
#page-conversation.conversation-library #newSess{margin:0;position:static}
#page-conversation.conversation-library .chat-workspace{width:100%;max-width:920px;margin:0 auto}
#page-conversation.conversation-library .conversation-library-toolbar{margin:0 0 10px}
#page-conversation.conversation-library .conversation-library-toolbar .conversation-search{max-width:none}

#page-conversation .conversation-filter-bar{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding-bottom:2px;overflow-x:auto;scrollbar-width:none}
#page-conversation .conversation-filter-bar::-webkit-scrollbar{display:none}
#page-conversation .conversation-filter-bar .conversation-library-scopes{flex:none;display:flex;gap:2px;margin:0;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
#page-conversation .conversation-filter-bar .conversation-library-scopes button{min-height:32px;padding:5px 12px;border:0;border-radius:999px;background:transparent;font-size:12.5px}
#page-conversation .conversation-filter-bar .conversation-library-scopes [aria-pressed=true]{background:var(--cyan-soft);color:var(--cyan);font-weight:650}
#page-conversation .conversation-agent-chips{flex:none;display:flex;gap:6px}
#page-conversation .agent-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px 4px 4px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px;white-space:nowrap;cursor:pointer}
#page-conversation .agent-chip[data-agent-filter=""]{padding-left:12px}
#page-conversation .agent-chip[aria-pressed=true]{border-color:var(--cyan);background:var(--cyan-soft);color:var(--cyan);font-weight:650}
#page-conversation .agent-chip .agent-avatar{width:26px;height:26px;font-size:11px}
#page-conversation .conversation-list-controls .agent-control-group{display:none}

#page-conversation .conversation-session-list{gap:0;padding:0 0 24px}
#page-conversation .conv-group{margin:14px 12px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#page-conversation .conv-group:first-child{margin-top:4px}
#page-conversation .conv-row{display:flex;align-items:center;flex:none;min-width:0;border-radius:14px}
#page-conversation .conv-row:hover{background:var(--surface)}
#page-conversation .conv-row.active{background:var(--cyan-soft)}
#page-conversation .conv-open{display:flex;align-items:center;gap:12px;flex:1;min-width:0;min-height:60px;padding:8px 10px;border:0;border-radius:14px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
#page-conversation .conv-main{display:grid;gap:2px;flex:1;min-width:0}
#page-conversation .conv-line{display:flex;align-items:center;gap:8px;min-width:0}
#page-conversation .conv-title{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-conversation .conv-time{flex:none;font-size:12px;color:var(--muted)}
#page-conversation .conv-preview{flex:1;min-width:0;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-conversation .conv-row.unread .conv-title{font-weight:800}
#page-conversation .conv-row.unread .conv-time{color:var(--cyan);font-weight:650}
#page-conversation .conv-flag{flex:none}
#page-conversation .conv-pin{font-size:11px;opacity:.65}
#page-conversation .conv-unread{width:9px;height:9px;border-radius:50%;background:var(--cyan)}
#page-conversation .conv-row .conversation-menu-trigger{flex:none;width:36px;height:36px;min-height:36px;margin-right:4px;border-radius:50%;opacity:0}
#page-conversation .conv-row:hover .conversation-menu-trigger,#page-conversation .conv-row:focus-within .conversation-menu-trigger,#page-conversation .conv-row .conversation-menu-trigger[aria-expanded=true]{opacity:1}
@media (hover:none){#page-conversation .conv-row .conversation-menu-trigger{opacity:1}}
#page-conversation.conversation-in-session .conv-open{gap:10px;min-height:54px}
#page-conversation.conversation-in-session .conv-open .agent-avatar{width:34px;height:34px;font-size:13px}

@media (max-width:600px){
  #page-conversation.conversation-library .conversation-header{margin-bottom:10px}
  #page-conversation.conversation-library #conversationTitle{font-size:24px}
  #page-conversation.conversation-library #newSess{min-height:40px;padding:8px 14px;font-size:13px}
  #page-conversation .conv-open{padding:8px 6px}
  /* Scopes on one line, agent chips scroll sideways on the next. */
  #page-conversation .conversation-filter-bar{flex-wrap:wrap;overflow:visible}
  #page-conversation .conversation-agent-chips{width:100%;overflow-x:auto;scrollbar-width:none}
}

/* ---- Conversation list beside an open chat: docked column (≥1100px), drawer below ---- */
#page-conversation.conversation-in-session.history-docked .chat-workspace{gap:14px}
#page-conversation.conversation-in-session.history-docked .conversation-list-panel{display:flex!important;position:static;flex:0 0 300px;width:300px;max-width:300px;height:auto;z-index:auto;box-shadow:none} /* mc-layout.css hides it with !important */
#page-conversation.conversation-in-session.history-docked #newSess{display:none!important} /* the docked list has its own "+" */
#page-conversation.conversation-in-session.history-docked .history-scrim,
#page-conversation.conversation-in-session.history-docked .history-close{display:none!important}
#page-conversation.conversation-in-session .conversation-list-panel{gap:10px;padding:14px 10px 0;border:1px solid var(--line);border-radius:22px;background:var(--surface)}
#page-conversation.conversation-in-session.history-open .conversation-list-panel{width:340px;box-shadow:0 18px 50px #1d153a2e}
#page-conversation.conversation-in-session .history-scrim{background:#1d153a33;backdrop-filter:none}
#page-conversation.conversation-in-session .conversation-list-heading{min-height:36px;padding:0 4px 0 8px}
#page-conversation.conversation-in-session .conversation-list-heading .eyebrow{display:none}
#page-conversation.conversation-in-session .conversation-list-heading strong{font:700 17px var(--font-display,inherit);color:var(--ink)}
#page-conversation.conversation-in-session .conversation-list-heading .icon-button{width:34px;height:34px;min-height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:20px}
#page-conversation.conversation-in-session #conversationNew{background:var(--cyan);color:#fff;font-size:18px}
#page-conversation.conversation-in-session .conversation-list-heading .icon-button:hover{background:var(--surface-soft)}
#page-conversation.conversation-in-session #conversationNew:hover{background:var(--cyan-hover,var(--cyan))}
#page-conversation.conversation-in-session .conversation-library-toolbar{gap:6px;margin:0 2px}
#page-conversation.conversation-in-session .conversation-library-toolbar .conversation-search{min-height:38px;padding:0 12px 0 34px!important;border:1px solid transparent;border-radius:12px;background:var(--surface-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b7891' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 11px 50%/15px no-repeat;font-size:13px!important;box-shadow:none}
#page-conversation.conversation-in-session .conversation-library-toolbar .conversation-search:focus{border-color:color-mix(in srgb,var(--cyan) 50%,var(--line));outline:none;box-shadow:none}
#page-conversation.conversation-in-session .conversation-library-toolbar > .button{min-height:38px;padding:0 12px;border-radius:12px;font-size:12px}
#page-conversation.conversation-in-session .conversation-filter-bar{margin:0 2px;padding:0;overflow:visible;flex-wrap:wrap}
#page-conversation.conversation-in-session .conversation-filter-bar .conversation-library-scopes{padding:0;border:0;background:transparent;gap:2px}
#page-conversation.conversation-in-session .conversation-filter-bar .conversation-library-scopes button{min-height:30px;padding:4px 10px;font-size:12.5px}
#page-conversation.conversation-in-session .conversation-agent-chips{display:none;width:100%;flex-wrap:wrap}
#page-conversation.conversation-in-session .conversation-list-panel.advanced-open .conversation-agent-chips{display:flex}
#page-conversation.conversation-in-session .conversation-list-controls{margin:0 2px}
#page-conversation.conversation-in-session .conversation-session-list{margin:0 -2px;padding:0 2px 12px}
#page-conversation.conversation-in-session .conv-group{margin:12px 10px 4px}
#page-conversation.conversation-in-session .conv-row{border-radius:12px}
#page-conversation.conversation-in-session .conv-row:hover{background:var(--surface-soft)}
#page-conversation.conversation-in-session .conv-row.active{background:var(--cyan-soft)}
#page-conversation.conversation-in-session .conv-open{gap:10px;min-height:52px;padding:7px 8px;box-shadow:none;border:0}
#page-conversation.conversation-in-session .conv-open .agent-avatar{width:34px;height:34px;font-size:13px}
#page-conversation.conversation-in-session .conv-title{font-size:13.5px}
#page-conversation.conversation-in-session .conv-preview{font-size:12.5px}
#page-conversation.conversation-in-session .conv-time{font-size:11px}
#page-conversation .conv-open.sess,#page-conversation .conv-open.sess.active{box-shadow:none;background:transparent} /* old .sess.active inset bar */

/* Header toggle for the list: icon + label on wide screens. */
#page-conversation.conversation-in-session #toggleHistory{display:inline-flex;align-items:center;gap:8px}
#page-conversation.conversation-in-session.history-docked #toggleHistory{background:var(--cyan-soft);border-color:transparent;color:var(--cyan)}

/* ---- Slash command menu above the composer ---- */
#page-conversation .slash-menu{position:absolute;left:0;right:56px;bottom:calc(100% + 8px);z-index:20;display:grid;gap:1px;max-height:min(320px,45dvh);overflow-y:auto;padding:6px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 12px 32px #1d153a26}
#page-conversation .slash-option{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:2px 8px;width:100%;padding:8px 10px;border:0;border-radius:12px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
#page-conversation .slash-option strong{font-size:14px;color:var(--cyan)}
#page-conversation .slash-hint{min-width:0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-conversation .slash-option small{grid-column:1 / -1;font-size:12.5px;color:var(--muted)}
#page-conversation .slash-option:hover,#page-conversation .slash-option[aria-selected=true]{background:var(--cyan-soft)}
/* ---- Pictures in the chat, WhatsApp style: the image fills the top of the bubble, caption below ---- */
#page-conversation .msg.has-image{padding:5px}
#page-conversation .msg.has-image>.who{padding:4px 8px 0}
#page-conversation .msg.has-image>.message-content,#page-conversation .msg.has-image>time{padding:0 9px}
#page-conversation .msg.has-image>.message-content{margin-top:6px}
#page-conversation .msg.has-image .message-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:4px;margin:0}
#page-conversation .message-media .chat-image{display:block;width:100%;max-width:320px;height:auto;max-height:340px;object-fit:cover;border:0;border-radius:14px;background:var(--surface-soft);cursor:zoom-in}
#page-conversation .message-media .chat-image.is-broken{display:none}
#page-conversation .msg.has-image .message-media:has(.chat-image:only-child) .chat-image{width:auto;max-width:min(100%,320px)}
/* Full-screen viewer */
.image-viewer{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:rgba(10,8,18,.94);display:none;place-items:center}
.image-viewer[open]{display:grid}
.image-viewer::backdrop{background:transparent}
.image-viewer img{max-width:94vw;max-height:88dvh;object-fit:contain;border-radius:6px;box-shadow:0 10px 40px #0008}
.image-viewer-bar{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;display:flex;gap:8px}
.image-viewer-bar a,.image-viewer-bar button{display:grid;place-items:center;width:42px;height:42px;min-height:42px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.image-viewer-bar a:hover,.image-viewer-bar button:hover{background:rgba(255,255,255,.24)}
.image-viewer-bar a[hidden]{display:none}