/* INNOS Chat rounded UI, 2026-10-06.
   Visual-only layer: existing room routing, auth, personal themes and policies stay intact. */
:root{--chat-rounded-brand:#1D4ED8;--chat-rounded-line:var(--cs-border,var(--v21-line,#dbe3ee));--chat-rounded-surface:var(--cs-surface,var(--v21-panel,#fff));--chat-rounded-ink:var(--cs-ink,var(--v21-ink,#172238));--chat-rounded-muted:var(--cs-muted,var(--muted,#64748b))}

/* App shell: leave layout sizing and mobile one-pane rules to chat-design-v1. */
body.room-directory:not(.customer-room-open) .topbar{border-radius:20px!important;min-height:64px;padding:10px 18px!important;box-shadow:0 6px 20px rgba(17,42,92,.13)!important}
body.room-directory:not(.customer-room-open) .layout{border:1px solid var(--chat-rounded-line);border-radius:22px;box-shadow:0 12px 32px rgba(17,42,92,.10);background:var(--chat-rounded-surface)}
body.room-directory:not(.customer-room-open) .layout>.rooms{border-radius:22px 0 0 22px!important;overflow:hidden;border-right:1px solid var(--chat-rounded-line)!important}
body.room-directory:not(.customer-room-open) .layout>.chat{border-radius:0 22px 22px 0!important}
body.room-directory .rooms>.section-head{min-height:48px;padding:7px 12px 5px!important;gap:4px!important;border-bottom:0!important;background:var(--chat-rounded-surface)}
body.room-directory .rooms>.section-head h2{font-size:17px!important;letter-spacing:-.02em}
body.room-directory .rooms>.section-head .section-actions{gap:4px!important;flex-wrap:nowrap!important}
body.room-directory .room-list-search-panel{padding:2px 12px 6px!important;border-bottom:0!important;background:var(--chat-rounded-surface)}
body.room-directory .room-list-search-panel input{border:1px solid var(--chat-rounded-line)!important;border-radius:11px!important;background:var(--cs-field,var(--chat-rounded-surface))!important;min-height:36px!important;padding-inline:10px!important}
body.room-directory .room-design-filters{padding:0 12px 7px!important;gap:5px!important;background:var(--chat-rounded-surface)}
body.room-directory .room-design-filters button{border-radius:999px!important;min-height:28px!important;padding:4px 8px!important}
body.room-directory .rooms .room{min-height:64px!important;padding:8px 12px!important;column-gap:9px!important;transition:background-color .15s ease}
body.room-directory .rooms .room:hover{background:var(--cs-hover,#edf3ff)!important}
body.room-directory .rooms .room.active{background:var(--cs-hover,#edf3ff)!important;box-shadow:inset 3px 0 var(--chat-rounded-brand)!important}
body.room-directory .room-avatar{border-radius:14px!important}
body.room-directory .room-avatar.group{border-radius:13px!important}
body.room-directory .room-title{font-weight:700}
body.room-directory .rooms :is(#newConversation,#refresh,.room-list-search-toggle,.room-pin-trigger,#customerConsultMenu){border-radius:10px!important;min-height:34px!important;padding:5px 8px!important}
body.room-directory .rooms .unread-badge{border-radius:999px!important}

/* Conversation header, timeline and message content. */
body.room-window.clean-chat .shell .chat,
body.room-directory:not(.customer-room-open) .layout>.chat{background:var(--conversation-bg,#f4f6fa)!important}
body.room-window.clean-chat .shell .chat .chat-head{background:var(--chat-rounded-surface)!important;border-bottom:1px solid var(--chat-rounded-line)!important;min-height:64px;padding:12px 18px!important}
body.room-window.clean-chat .shell #roomTitle{font-size:17px!important;letter-spacing:-.02em}
body.room-window.clean-chat .shell #messages{padding:20px 22px!important}
body.room-window.clean-chat .shell .message{margin-bottom:14px}
body.room-window.clean-chat .shell .message-bubble,
:root[data-theme][data-chat-style=default] body.room-window.clean-chat .shell #messages .message .message-bubble{border-radius:16px 16px 16px 5px!important;box-shadow:0 1px 3px rgba(17,42,92,.06)!important}
body.room-window.clean-chat .shell .message.mine .message-bubble,
:root[data-theme][data-chat-style=default] body.room-window.clean-chat .shell #messages .message.mine .message-bubble{border-radius:16px 16px 5px 16px!important}
:root:not([data-chat-style]) body.room-window.clean-chat .shell #messages .message.mine .message-bubble,
:root[data-chat-style=default] body.room-window.clean-chat .shell #messages .message.mine .message-bubble{background:#1D4ED8!important;color:#fff!important;border-color:#1D4ED8!important}
:root:not([data-chat-style]) body.room-window.clean-chat .shell #messages .message.mine .message-bubble > time,
:root[data-chat-style=default] body.room-window.clean-chat .shell #messages .message.mine .message-bubble > time,
:root:not([data-chat-style]) body.room-window.clean-chat .shell #messages .message.mine .message-bubble > p :is(a,small),
:root[data-chat-style=default] body.room-window.clean-chat .shell #messages .message.mine .message-bubble > p :is(a,small){color:#fff!important}
body.room-window.clean-chat .shell .message-bubble .message-files>div{border-radius:12px!important}
/* An attachment card sits inside the blue own-message bubble, but remains a separate light/dark surface. */
:root:not([data-chat-style]) body.room-window.clean-chat .shell #messages .message.mine .message-bubble .message-files>div,
:root[data-chat-style=default] body.room-window.clean-chat .shell #messages .message.mine .message-bubble .message-files>div{background:var(--vchat-panel,#fff)!important;color:var(--vchat-ink,#172238)!important}
:root:not([data-chat-style]) body.room-window.clean-chat .shell #messages .message.mine .message-bubble .message-files a,
:root[data-chat-style=default] body.room-window.clean-chat .shell #messages .message.mine .message-bubble .message-files a{color:var(--chat-rounded-file-link,#1D4ED8)!important}
:root:not([data-chat-style]) body.room-window.clean-chat .shell #messages .message.mine .message-bubble .message-files small,
:root[data-chat-style=default] body.room-window.clean-chat .shell #messages .message.mine .message-bubble .message-files small{color:var(--muted,var(--chat-rounded-muted))!important}
:root[data-theme=dark]{--chat-rounded-file-link:#a9c4ff}
body.room-window.clean-chat .shell .reply-bar,
body.room-window.clean-chat .shell .reply-preview{border-radius:9px!important}

/* Keep text at full width; tools remain below the input on narrow windows. */
body.room-window.clean-chat .shell #composer{padding:12px 16px max(12px,env(safe-area-inset-bottom))!important;background:var(--chat-rounded-surface)!important}
body.room-window.clean-chat .shell #composer .composer-main{border:1px solid var(--chat-rounded-line)!important;border-radius:17px!important;background:var(--chat-rounded-surface)!important;padding:5px 6px 5px 13px!important;gap:8px!important;min-width:0}
body.room-window.clean-chat .shell #composer #body{flex:1 1 auto!important;width:100%!important;min-width:0!important;border:0!important;background:transparent!important;box-shadow:none!important;font-size:16px!important}
body.room-window.clean-chat .shell #composer #sendMessage:not(:disabled){background:var(--chat-rounded-brand)!important;color:#fff!important;border-color:var(--chat-rounded-brand)!important}
body.room-window.clean-chat .shell #composer #sendMessage{border-radius:12px!important;min-height:38px!important;white-space:nowrap}
body.room-window.clean-chat .shell #composer .composer-toolbar{padding:7px 4px 0!important;min-height:38px}
body.room-window.clean-chat .shell #composer .tool-button{border-radius:10px!important;min-width:36px;min-height:36px}

/* Menus, popups and other shared room surfaces. */
body .chat-design-mini{border-radius:22px!important;box-shadow:0 18px 50px rgba(17,42,92,.22)!important}
body .chat-design-mini-head{border-radius:22px 22px 0 0!important;min-height:42px!important}
body .compact-chat-menu-panel,
body .room-pin-dialog,
body .new-conversation-panel{border-radius:18px!important}
body .chat-date-divider{color:var(--chat-rounded-muted)}

/* Preserve existing mobile navigation and fixed-height scroll regions. */
@media(max-width:760px){
 body.room-directory:not(.customer-room-open) .shell{padding:0 8px!important;width:100%!important}
 body.room-directory:not(.customer-room-open) .topbar{margin:6px 0 10px;border-radius:16px!important;padding:9px 12px!important}
 body.room-directory:not(.customer-room-open) .layout{border-radius:18px!important;margin-top:0!important;box-shadow:none}
 body.room-directory:not(.customer-room-open) .layout>.rooms,
 body.room-directory.inline-chat-open:not(.customer-room-open) .layout>.chat{border-radius:18px!important;border-right:0!important}
 body.room-directory .rooms .room{min-height:68px!important}
 body.room-window.clean-chat .shell .chat .chat-head{padding:8px 12px!important}
 body.room-window.clean-chat .shell #messages{padding:12px!important}
 body.room-window.clean-chat .shell #composer{padding:8px 10px max(8px,env(safe-area-inset-bottom))!important}
 body.room-window.clean-chat .shell #composer .composer-main{padding-left:10px!important}
 body .chat-design-mini{border-radius:0!important}
}
@media(min-width:761px) and (max-width:1300px) and (pointer:coarse){
 body.room-directory:not(.customer-room-open) .layout>.rooms,
 body.room-directory.inline-chat-open:not(.customer-room-open) .layout>.chat{border-radius:18px!important;border-right:0!important}
}
@media(prefers-reduced-motion:reduce){body.room-directory .rooms .room{transition:none}}

/* One header: room actions live beside the navigation, not in a second room title row. */
body.room-directory.chat-header-streamlined .topbar{display:grid!important;grid-template-columns:minmax(0,1fr) 38px 38px 38px;align-items:center;gap:3px 6px!important}
body.room-directory.chat-header-streamlined .topbar>div:first-child{grid-column:1;grid-row:1;min-width:0}
body.room-directory.chat-header-streamlined .topbar>.section-actions{grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:flex-start!important;flex-wrap:wrap;gap:3px 10px!important;min-width:0}
body.room-directory.chat-header-streamlined .topbar>#openChatPopup{grid-column:2;grid-row:1}
body.room-directory.chat-header-streamlined .topbar>#notificationToggle{grid-column:3;grid-row:1}
body.room-directory.chat-header-streamlined .topbar>#homeMoreMenu{grid-column:4;grid-row:1;margin-left:0}
body.room-directory.chat-header-streamlined .topbar .chat-topbar-tools{display:flex;align-items:center;gap:3px;margin-left:auto}
body.room-directory.chat-header-streamlined .topbar .chat-header-icon,
body.room-directory.chat-header-streamlined .topbar .room-list-search-toggle{display:inline-grid!important;place-items:center;width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;padding:5px!important;border-radius:8px!important;font-size:0!important;flex:none}
body.room-directory.chat-header-streamlined .topbar .chat-header-icon svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.room-directory.chat-header-streamlined .topbar .room-list-search{display:flex;align-items:center}
body.room-directory.chat-header-streamlined .rooms>.section-head{display:none!important}
body.room-directory.chat-header-streamlined .room-list-search-panel{padding-top:9px!important}
body.room-directory.chat-header-streamlined .room-design-filters{padding-top:8px!important}
body.room-directory.chat-header-streamlined .topbar>#openChatPopup[hidden]{display:none!important}
@media(max-width:600px){
 body.room-directory.chat-header-streamlined .topbar{grid-template-columns:minmax(0,1fr) 38px 38px 38px;gap:4px!important}
 body.room-directory.chat-header-streamlined .topbar>div:first-child{width:auto!important;padding-bottom:0!important;border-bottom:0!important}
 body.room-directory.chat-header-streamlined .topbar>.section-actions{border-top:1px solid rgba(255,255,255,.36);padding-top:5px}
}

/* Browser popout and in-page mini use the same edge-to-edge room list.
   Their OS/browser title bar already provides the outer chrome. */
body.room-directory.chat-design-compact .topbar,
body.room-directory.chat-design-compact #installHelp{display:none!important}
body.room-directory.chat-design-compact:not(.customer-room-open) .shell{width:100%!important;max-width:none!important;height:100dvh!important;margin:0!important;padding:0!important}
body.room-directory.chat-design-compact:not(.customer-room-open) .layout{height:100%!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
body.room-directory.chat-design-compact:not(.customer-room-open) .layout>.rooms{border:0!important;border-radius:0!important;min-width:0}
body.room-directory.chat-design-compact .rooms>.section-head{min-height:44px;padding:5px 11px 3px!important}
body.room-directory.chat-design-compact .rooms .room{min-height:62px!important}
body.room-directory.chat-design-compact .room-list-search-panel{padding:2px 11px 5px!important}
body.room-directory.chat-design-compact .room-list-search-panel input{width:100%!important;flex:1 1 auto!important;min-width:0!important}
body.room-directory.chat-design-compact .room-design-filters{padding:0 11px 6px!important}
body.room-directory.chat-design-compact.chat-header-streamlined .topbar{display:grid!important;border-radius:0!important;margin:0!important;box-shadow:none!important}
body.room-directory.chat-design-compact.chat-header-streamlined:not(.customer-room-open) .shell{display:flex;flex-direction:column}
body.room-directory.chat-design-compact.chat-header-streamlined:not(.customer-room-open) .layout{flex:1;min-height:0;height:auto!important}
@media(pointer:coarse){body.room-directory .rooms :is(#newConversation,#refresh,.room-list-search-toggle,.room-pin-trigger,#customerConsultMenu){min-height:40px!important}body.room-directory .room-design-filters button{min-height:36px!important}}

/* External guest space: retain invitation/PIN boundary and its separate room data. */
body.external-chat-ui{--ext-brand:#1D4ED8}
body.external-chat-ui main>header{border-radius:18px;background:var(--ext-brand);color:#fff;padding:14px 18px}
body.external-chat-ui main>header :is(h1,small,a){color:#fff}
body.external-chat-ui main>header a{border-radius:10px}
body.external-chat-ui :is(#gate,#staff,#conversation){border-radius:20px}
body.external-chat-ui #rooms button{border-radius:13px;min-height:56px}
body.external-chat-ui .bubble{border-radius:16px 16px 16px 5px;padding:10px 13px}
body.external-chat-ui .mine .bubble{border-radius:16px 16px 5px 16px;background:#1D4ED8;color:#fff;border-color:#1D4ED8}
body.external-chat-ui #send{border:1px solid #dbe3ee;border-radius:17px;padding:6px;background:#fff}
body.external-chat-ui #send #text{border:0;box-shadow:none;min-width:0}
body.external-chat-ui #send button{border-radius:12px;background:var(--ext-brand);color:#fff}
body.external-chat-ui #externalToolbar>button{color:var(--ext-brand);border-radius:10px;min-width:38px;min-height:38px}
:root[data-theme=dark] body.external-chat-ui .mine .bubble{background:#1D4ED8;color:#fff}
:root[data-theme=dark] body.external-chat-ui #send{background:#182235;border-color:#354056}
@media(max-width:600px){body.external-chat-ui main>header{border-radius:15px}body.external-chat-ui #conversation{border-radius:16px}}

/* Customer-facing CS conversation: style only; 100 MB/90 day policy untouched. */
body.customer-chat header{border-radius:16px 16px 0 0}
body.customer-chat article,
body.customer-chat article.mine{border-radius:16px 16px 16px 5px!important}
body.customer-chat article.mine{border-radius:16px 16px 5px 16px!important;background:#1D4ED8!important}
body.customer-chat #composer{gap:8px}
body.customer-chat #composer textarea{border-radius:15px!important;padding:10px 12px!important;min-width:0}
body.customer-chat button{border-radius:12px!important}
body.customer-chat #composer button{background:#1D4ED8;color:#fff}
body.customer-chat #attachments summary{color:#1D4ED8}
body.customer-chat :is(button,textarea,summary):focus-visible{outline-color:#1D4ED8}

/* Employee customer-support directory remains a separate, shared list. */
body.customer-room-open #customerConsultSidebar{border-radius:18px 0 0 18px!important;overflow:hidden}
body.customer-room-open #customerConsultSidebar>header{min-height:58px;padding:12px 14px!important}
body.customer-room-open #customerConsultFolder .customer-directory{padding:12px!important}
body.customer-room-open #customerConsultFolder .customer-directory :is(input,select,button){border-radius:11px!important}
body.customer-room-open #customerConsultFolder .customer-directory .cd-card{border-radius:12px!important;overflow:hidden}
body.customer-room-open #customerConsultFolder .customer-directory dialog{border-radius:18px!important}

/* Shipper consultation has its own isolated room and tenant permissions. */
body.shipper-chat-ui .brand{background:#1D4ED8;border-radius:0 0 16px 16px}
body.shipper-chat-ui .layout{gap:0}
body.shipper-chat-ui .directory{border-radius:20px 0 0 20px}
body.shipper-chat-ui .conversation{border-radius:0 20px 20px 0}
body.shipper-chat-ui .search input{border-radius:12px}
body.shipper-chat-ui .filters button{border-radius:999px}
body.shipper-chat-ui .room.selected{background:#eaf1ff}
body.shipper-chat-ui .room-head{min-height:64px}
body.shipper-chat-ui .bubble{border-radius:16px 16px 16px 5px}
body.shipper-chat-ui .bubble.self{border-radius:16px 16px 5px 16px;background:#1D4ED8;color:#fff;border-color:#1D4ED8}
body.shipper-chat-ui .bubble.self small{color:#fff}
body.shipper-chat-ui #composer textarea{border-radius:15px;min-width:0}
body.shipper-chat-ui #composer button{border-radius:12px}
body.shipper-chat-ui dialog{border-radius:18px}
@media(max-width:700px){body.shipper-chat-ui .directory,body.shipper-chat-ui .conversation{border-radius:0}}

/* INNOS unified conversation design — 2026-10-30. Display only; menus keep their own behavior. */
:root{--uc-font:Arial,"Malgun Gothic","맑은 고딕",system-ui,sans-serif;--uc-bg:#f3f5f8;--uc-surface:#fff;--uc-ink:#243347;--uc-muted:#667789;--uc-line:#e0e6ed;--uc-brand:#245479;--uc-onbrand:#fff;--uc-bot:#fff5d1;--uc-field:#f8fafc;--uc-focus:#245479}
:root[data-theme="dark"]{--uc-bg:#17212e;--uc-surface:#202e3d;--uc-ink:#edf3f8;--uc-muted:#a9bac9;--uc-line:#3b4d60;--uc-brand:#285d85;--uc-onbrand:#fff;--uc-bot:#493f25;--uc-field:#1b2938;--uc-focus:#91bedf}
/* Header and timeline: retain each screen's layout, buttons, status and permissions. */
:root body.clean-chat .shell .chat,:root body.external-chat-ui #conversation,:root .conversation:has(>#active-room),:root #conversation:has(>#active){background:var(--uc-bg)!important;color:var(--uc-ink)!important;font-family:var(--uc-font)!important}
:root body.clean-chat .shell .chat .chat-head,:root body.external-chat-ui #conversation>.room-heading,:root #active-room>.room-head,:root #active>.room-head,:root .customer-chat main>header{background:var(--uc-surface)!important;color:var(--uc-ink)!important;border-bottom:1px solid var(--uc-line)!important;box-shadow:none!important;gap:6px;padding:8px 12px!important}
:root :is(.chat-head,.room-heading,.room-head) h2{font-size:17px!important;line-height:1.3!important;font-weight:700!important;letter-spacing:-.3px}
:root body.clean-chat .shell #messages#messages,:root body.external-chat-ui #messages#messages,:root #active-room>#messages#messages,:root #active>#messages#messages,:root .customer-chat #messages#messages{background:var(--uc-bg)!important;color:var(--uc-ink)!important;padding:12px!important;scroll-padding:12px}
/* One set of readable bubbles; sender-name colors are intentionally preserved. */
:root body.clean-chat .shell #messages#messages>.message,:root body.external-chat-ui #messages#messages>.entry,:root #active>#messages#messages>.message{width:fit-content;max-width:min(92%,720px)!important;margin-bottom:9px!important}
:root body.clean-chat .shell #messages#messages>.message.mine,:root body.external-chat-ui #messages#messages>.entry.mine,:root #active>#messages#messages>.message.mine{margin-left:auto!important;margin-right:0!important}
:root body.clean-chat .shell #messages#messages>.message:not(.media-only)>.message-bubble,:root body.external-chat-ui #messages#messages>.entry>.bubble,:root #active>#messages#messages>.message>.bubble,:root #active-room>#messages#messages>.bubble,:root .customer-chat #messages#messages>article{background:var(--uc-surface)!important;color:var(--uc-ink)!important;border:1px solid var(--uc-line)!important;border-radius:14px 14px 14px 4px!important;box-shadow:0 1px 2px #18334f04!important;padding:10px 12px!important;font-size:16px!important;line-height:1.55!important;letter-spacing:-.15px;overflow-wrap:anywhere}
:root body.clean-chat .shell #messages#messages>.message:not(.media-only).mine>.message-bubble,:root body.external-chat-ui #messages#messages>.entry.mine>.bubble,:root #active>#messages#messages>.message.mine>.bubble,:root #active-room>#messages#messages>.bubble.self,:root .customer-chat #messages#messages>article.mine{background:var(--uc-brand)!important;color:var(--uc-onbrand)!important;border-color:var(--uc-brand)!important;border-radius:14px 14px 4px 14px!important}
:root body.clean-chat .shell #messages#messages>.message[data-cs-sender="bot"]:not(.media-only)>.message-bubble{background:var(--uc-bot)!important;color:var(--uc-ink)!important;border-color:var(--uc-line)!important}
:root body.clean-chat #messages#messages .message-bubble>p,:root body.external-chat-ui #messages#messages .bubble>p,:root #active>#messages#messages .bubble,:root #active-room>#messages#messages>.bubble>span{font-size:16px!important;line-height:1.55!important;margin:0!important}
:root #active-room>#messages#messages>.bubble{max-width:min(92%,720px)!important;align-self:flex-start;margin:0 0 9px!important}
:root #active-room>#messages#messages>.bubble.self{align-self:flex-end!important}
:root body.clean-chat #messages#messages .message-bubble time,:root body.external-chat-ui #messages#messages .bubble small,:root #active-room>#messages#messages>.bubble>small,:root #active>#messages#messages .time,:root .customer-chat #messages#messages article time{font-size:11px!important;line-height:1.4!important;opacity:.8}
:root body.clean-chat #messages#messages .message.mine .message-bubble :is(time,a),:root body.external-chat-ui #messages#messages .entry.mine .bubble :is(small,a),:root #active-room>#messages#messages>.bubble.self>small,:root #active>#messages#messages .message.mine .bubble a{color:var(--uc-onbrand)!important}
:root #active-room>#messages#messages>.bubble>small{font-size:12px!important;margin-bottom:4px!important}
/* The input area uses the same surface and focus treatment without changing tool order. */
:root body.clean-chat .shell .chat #composer,:root body.external-chat-ui #conversation>#send,:root #active-room>#composer,:root #active>#composer,:root .customer-chat #composer{background:var(--uc-surface)!important;color:var(--uc-ink)!important;border-top:1px solid var(--uc-line)!important;padding:8px 10px!important;gap:7px}
:root body.clean-chat .shell .chat #composer textarea,:root body.external-chat-ui #conversation>#send textarea,:root #active-room>#composer textarea,:root #active>#composer textarea,:root .customer-chat #composer textarea{background:var(--uc-field)!important;color:var(--uc-ink)!important;border:1px solid var(--uc-line)!important;border-radius:11px!important;box-shadow:none;font-size:16px!important;line-height:24px!important;padding:10px 12px!important;min-height:46px;box-sizing:border-box}
:root body.clean-chat .shell .chat #composer textarea:focus-visible,:root body.external-chat-ui #send textarea:focus-visible,:root #active-room>#composer textarea:focus-visible,:root #active>#composer textarea:focus-visible,:root .customer-chat #composer textarea:focus-visible{outline:2px solid var(--uc-focus)!important;outline-offset:2px!important}
:root body.clean-chat .shell .chat #composer :is(#send,#sendMessage),:root body.external-chat-ui #conversation>#send>button,:root #active-room>#composer>button,:root #active>#composer #send,:root .customer-chat #composer>#send{background:var(--uc-brand)!important;color:var(--uc-onbrand)!important;border:1px solid var(--uc-brand)!important;border-radius:11px!important;min-height:44px;padding:9px 15px!important;font-size:15px!important;line-height:1.4!important}
:root body.clean-chat .shell .chat #composer .composer-tools button,:root .customer-chat #composer .composer-tools button,:root body.external-chat-ui #externalToolbar>button,:root #active>#composer .file-button{background:var(--uc-surface)!important;color:var(--uc-brand)!important;border:1px solid var(--uc-line)!important;border-radius:9px!important}
:root body.clean-chat #messages#messages>.message.highlight-message>.message-bubble,:root body.external-chat-ui #messages#messages>.entry.highlight>.bubble{outline:2px solid #c8881c!important;outline-offset:2px}
@media(max-width:600px){:root body.clean-chat .shell #messages#messages,:root body.external-chat-ui #messages#messages,:root #active-room>#messages#messages,:root #active>#messages#messages{padding:10px 12px!important}:root :is(.chat-head,.room-heading,.room-head) h2{font-size:16px!important}}

:root body.shipper-chat-ui>.brand,:root body.external-chat-ui main>header,:root body:has(#conversation>#active)>header{background:var(--uc-surface)!important;color:var(--uc-ink)!important;border-bottom:1px solid var(--uc-line)!important;border-radius:0!important;box-shadow:none!important}
:root body.shipper-chat-ui>.brand a,:root body.external-chat-ui main>header a{color:var(--uc-brand)!important}
:root body.clean-chat .shell .chat :is(button,input,textarea),:root body.external-chat-ui #conversation :is(button,input,textarea),:root #active-room :is(button,input,textarea),:root #active :is(button,input,textarea),:root .customer-chat main{font-family:var(--uc-font)!important}
:root body.clean-chat #messages#messages .message-bubble,:root body.external-chat-ui #messages#messages .bubble,:root #active-room>#messages#messages>.bubble,:root #active>#messages#messages .bubble,:root .customer-chat #messages#messages article{font-family:var(--uc-font)!important}
:root body.shipper-chat-ui .room-head{flex-wrap:wrap}
:root body.shipper-chat-ui .room-head>div{flex:1 1 140px;min-width:0}
:root body.clean-chat .shell .chat #composer .composer-main{gap:7px;align-items:flex-end}
/* End INNOS unified conversation design. */

/* Company messages use one pale-yellow bubble on every side of a conversation. */
:root [data-bubble-party="company"]{--party-bg:#fff3c4;--party-border:#e3d7a5;--party-ink:#243347}
:root [data-bubble-party="other"]{--party-bg:#fff;--party-border:#e0e6ed;--party-ink:#243347}
:root [data-bubble-party="neutral"]{--party-bg:#eef1f5;--party-border:#dce2e8;--party-ink:#526273}
:root body.clean-chat .shell #messages#messages#messages>.message[data-bubble-party]>.message-bubble,
:root body.external-chat-ui #messages#messages#messages>.entry[data-bubble-party]>.bubble,
:root #active-room>#messages#messages#messages>.bubble[data-bubble-party],
:root #active>#messages#messages#messages>.message[data-bubble-party]>.bubble,
:root .customer-chat #messages#messages#messages>article[data-bubble-party],
:root #chat #messages#messages#messages>.message[data-bubble-party]{background:var(--party-bg)!important;color:var(--party-ink)!important;border:1px solid var(--party-border)!important}
:root body.clean-chat .shell #messages#messages#messages>.message[data-bubble-party]>.message-bubble :is(time,a,small,.sender),
:root body.external-chat-ui #messages#messages#messages>.entry[data-bubble-party]>.bubble :is(small,a),
:root #active-room>#messages#messages#messages>.bubble[data-bubble-party]>small,
:root #active>#messages#messages#messages>.message[data-bubble-party]>.bubble a,
:root .customer-chat #messages#messages#messages>article[data-bubble-party] :is(time,a,.sender),
:root #chat #messages#messages#messages>.message[data-bubble-party] :is(small,a){color:var(--party-ink)!important}

/* Match the reference messenger's compact employee chat text. */
:root body.clean-chat .shell .chat #messages#messages#messages .message-bubble,
:root body.clean-chat .shell .chat #messages#messages#messages .message-bubble>p{font-size:var(--chat-font,14px)!important;line-height:1.55!important;letter-spacing:-.15px!important}
:root body.clean-chat .shell .chat #composer#composer textarea{font-size:var(--chat-font,14px)!important;line-height:1.55!important}

:root[data-chat-density="compact"] body.clean-chat .shell .chat #messages#messages>.message{margin-bottom:6px!important}
:root[data-chat-density="compact"] body.clean-chat .shell .chat #messages#messages>.message>.message-bubble{padding:7px 10px!important}