/* INNOS chat design v1: shared room directory and conversation, 200 MB policy unchanged. */
.room-directory:not(.customer-room-open) .shell{width:min(1600px,calc(100% - 32px));max-width:none;margin:auto;padding:14px 0}
.room-directory:not(.customer-room-open) .layout{display:grid!important;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:0;height:100%!important;min-height:0;overflow:hidden;margin-top:12px}
.room-directory:not(.customer-room-open) .layout>.rooms{width:auto!important;min-width:0;min-height:0;padding:0!important;border-radius:12px 0 0 12px!important;border-right:0!important;display:flex;flex-direction:column}
.room-directory:not(.customer-room-open) .layout>.chat{display:flex!important;position:relative;width:auto;min-width:0;min-height:0;height:100%!important;border-radius:0 12px 12px 0!important;overflow:hidden;background:var(--cs-surface,var(--v21-panel,#fff))}
.room-directory:not(.customer-room-open) .layout>.chat>:not(.inline-chat-container){display:none!important}
.room-directory:not(.customer-room-open) #resizer{display:none!important}
.inline-chat-container{position:absolute;inset:0;display:flex;min-width:0;min-height:0}
.inline-chat-container iframe{width:100%;height:100%;border:0;min-width:0;min-height:0;background:var(--cs-surface,var(--v21-panel,#fff))}
.customer-room-open .inline-chat-container{display:none!important}
.inline-chat-empty{display:grid;place-content:center;text-align:center;gap:8px;width:100%;color:var(--cs-muted,#6b7484);padding:20px}
.inline-chat-empty strong{font-size:18px;color:var(--cs-ink,#232c3c)}
.room-directory .rooms>.section-head{padding:16px 14px 10px!important;border-bottom:1px solid var(--cs-border,var(--v21-line,#e1e4e8));gap:6px!important}
.room-directory .rooms>.section-head h2{font-size:18px!important}
.room-directory #roomList{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;overscroll-behavior:contain}
.room-directory .rooms .room{position:relative;display:grid!important;grid-template-columns:40px minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:10px;row-gap:3px;width:100%;min-height:68px;margin:0!important;padding:10px 14px!important;border:0!important;border-bottom:1px solid var(--cs-border,var(--v21-line,#e1e4e8))!important;border-radius:0!important;box-shadow:none!important;text-align:left;background:transparent!important}
.room-directory .rooms .room:hover,.room-directory .rooms .room.active{background:var(--cs-hover,#eaf0fe)!important}
.room-directory #roomList .room.room-search-miss{display:none!important}
.room-directory .rooms .room.active{box-shadow:inset 3px 0 var(--cs-accent,#2463eb)!important}
.room-directory .room-avatar{grid-column:1;grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#dce3ed;color:#263247;font-size:13px;font-weight:700;flex-shrink:0}
.room-directory .room-avatar.group{border-radius:10px;background:#dce9ff;color:#17448c}
.room-directory .room-main{grid-column:2;grid-row:1;min-width:0;display:flex;align-items:baseline;gap:5px;font-size:14px!important;margin:0!important;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-directory .room-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.room-directory .room-main small{flex-shrink:0;color:var(--cs-muted,#6b7484)!important;font-size:11px!important;font-weight:400;white-space:nowrap}
.room-directory .room-pinned-mark{font-size:11px;flex:none}
.room-directory .room-preview{grid-column:2;grid-row:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cs-muted,#6b7484)!important;font-size:12px!important;margin:0!important}
.room-directory .room-time{grid-column:3;grid-row:1;align-self:center;white-space:nowrap;font-size:11px!important;font-variant-numeric:tabular-nums;color:var(--cs-muted,#6b7484)!important;margin:0!important}
.room-directory .rooms .unread-badge{position:static;grid-column:3;grid-row:2;justify-self:end;transform:none;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--cs-accent,#2463eb);color:#fff;line-height:20px;font-size:11px}
.room-directory .room-list-search-panel{display:flex!important;padding:0 12px 10px;margin:0!important;border-bottom:1px solid var(--cs-border,var(--v21-line,#e1e4e8))}
.room-directory .room-list-search-panel input{font-size:14px;min-height:40px}
.room-directory .room-list-search-panel[hidden]{display:none!important}
.room-directory .room-design-filters{display:flex;gap:6px;align-items:center;padding:7px 12px;border-bottom:1px solid var(--cs-border,var(--v21-line,#e1e4e8))}
.room-directory .room-design-filters button{border:1px solid var(--cs-border,var(--v21-line,#dce3ee));border-radius:999px;background:var(--cs-surface,var(--surface,#fff));color:var(--cs-ink,var(--ink,#263247));padding:5px 9px;font-size:12px;white-space:nowrap}
.room-directory .room-design-filters button[aria-pressed="true"]{border-color:var(--cs-accent,#2463eb);background:var(--cs-accent,#2463eb);color:#fff}
.room-directory #roomList .room.room-design-filter-miss{display:none!important}
.room-directory .room-list-search-toggle{min-width:36px;width:36px;height:36px}
.room-directory .rooms #newConversation{background:var(--cs-accent,#2463eb);color:#fff;border-color:var(--cs-accent,#2463eb)}
.room-directory .rooms #refresh{width:36px;min-width:36px;height:36px;padding:6px!important;overflow:hidden;font-size:0!important}
.room-directory .rooms #refresh::before{content:'↻';font-size:21px;line-height:1}
.room-directory .rooms .section-actions button[hidden]{display:none!important}
.room-directory .room-pin-trigger{white-space:nowrap}
.room-pin-dialog{width:min(440px,calc(100vw - 24px));max-height:80dvh;box-sizing:border-box;border:1px solid var(--cs-border,var(--line,#dce3ee));border-radius:14px;padding:16px;background:var(--cs-surface,var(--surface,#fff));color:var(--cs-ink,var(--ink,#263247))}
.room-pin-dialog::backdrop{background:#111c30a8}
.room-pin-head{display:flex;align-items:center;gap:8px}
.room-pin-head h2{flex:1;margin:0;font-size:18px}
.room-pin-head button{min-width:34px;min-height:34px;font-size:22px}
.room-pin-dialog p{font-size:13px;line-height:1.45;color:var(--cs-muted,var(--muted,#6b7484))}
.room-pin-list{max-height:54dvh;overflow-y:auto;border-block:1px solid var(--cs-border,var(--line,#dce3ee))}
.room-pin-list label{display:flex;align-items:center;gap:10px;min-height:42px;padding:5px 2px;border-bottom:1px solid var(--cs-border,var(--line,#dce3ee));font-size:14px}
.room-pin-list input{width:18px;height:18px;flex:none;accent-color:var(--cs-accent,#2463eb)}
.room-pin-save{margin-top:8px;background:var(--cs-accent,#2463eb);color:#fff;border-color:var(--cs-accent,#2463eb)}
.room-directory .rooms .self-chat-button{margin:0!important;border:0!important;border-bottom:1px solid var(--cs-border,var(--v21-line,#e1e4e8))!important;border-radius:0!important;padding:12px 14px!important}
.room-window .shell #composer{display:flex;flex-direction:column;gap:4px;padding:8px 12px max(8px,env(safe-area-inset-bottom))}
.room-window .shell #composer .composer-main{display:flex;align-items:center;width:100%;min-width:0;gap:6px;border:1px solid var(--line,#dce3ee);border-radius:10px;padding:3px 4px 3px 10px;background:var(--surface,#fff)}
.room-window .shell #composer .composer-toolbar{display:flex;align-items:center;gap:3px;padding-top:0}
.room-window .shell #composer .composer-hint{display:none}
.room-window .shell #composer #body{flex:1;width:100%;min-width:0;height:40px!important;min-height:40px!important;max-height:120px;padding:8px 0!important;resize:none}
.room-window .shell #composer #sendMessage{margin:0;min-height:36px}
.room-window .shell #composer #sendMessage:disabled{opacity:.48;cursor:not-allowed}
.room-window .shell .message-files{max-width:420px}
.room-window .shell .message-files>div{border:1px solid var(--cs-border,var(--v21-line,#e1e4e8));border-radius:10px;padding:10px;background:var(--cs-surface,var(--v21-panel,#fff))}
.room-directory .topbar h1{display:flex;align-items:center;gap:9px}
.room-directory .chat-design-own-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#dce9ff;color:#17448c;font-size:13px;font-weight:700;flex:none}
.room-directory #openChatPopup{display:inline-flex!important}
.room-directory #openChatPopup[hidden]{display:none!important}
.chat-design-mini{position:fixed;right:12px;top:64px;width:min(360px,calc(100vw - 24px));height:min(720px,calc(100dvh - 76px));min-width:300px;min-height:330px;resize:both;overflow:hidden;z-index:5000;display:flex;flex-direction:column;border:1px solid var(--cs-border,var(--v21-line,#cbd5e1));border-radius:12px;background:var(--cs-surface,var(--surface,#fff));box-shadow:0 18px 54px #15233a4d}
.chat-design-mini-head{display:flex;align-items:center;gap:5px;min-height:38px;padding:4px 7px;cursor:move;touch-action:none;background:var(--cs-surface,var(--surface,#fff));border-bottom:1px solid var(--cs-border,var(--v21-line,#dce3ee))}
.chat-design-mini-head strong{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px}
.chat-design-mini-head button{min-width:30px;min-height:30px;padding:2px 6px;font-size:15px}
.chat-design-mini iframe{flex:1;min-height:0;width:100%;border:0}
.room-directory.chat-design-compact .topbar,.room-directory.chat-design-compact #installHelp{display:none!important}
.room-directory.chat-design-compact .shell{height:100dvh!important;padding:0!important;width:100%!important}
.room-directory.chat-design-compact .layout{height:100%!important;margin:0!important}
.room-directory.chat-design-compact .rooms{border-radius:0!important}
@media(min-width:761px){body.room-window.clean-chat #backToRooms{display:none!important}}
.room-window .shell :is(button,input,textarea,a):focus-visible,.room-directory .shell :is(button,input,textarea,a):focus-visible{outline:2px solid var(--cs-accent,#2463eb);outline-offset:2px}
@media(max-width:859px) and (min-width:640px){.room-directory:not(.customer-room-open) .layout{grid-template-columns:minmax(0,260px) minmax(0,1fr)}.room-directory .room-avatar{width:32px;height:32px}.room-directory .rooms .room{grid-template-columns:32px minmax(0,1fr) auto;padding:8px!important}}
@media(max-width:760px){.room-directory:not(.customer-room-open) .shell{width:100%;padding:0}.room-directory:not(.customer-room-open) .layout{display:block!important;margin-top:0}.room-directory:not(.customer-room-open) .layout>.rooms{display:flex!important;width:100%!important;height:100%;border-radius:0!important}.room-directory:not(.customer-room-open) .layout>.chat{display:none!important;width:100%;border-radius:0!important}.room-directory.inline-chat-open:not(.customer-room-open) .layout>.rooms,.room-directory.inline-chat-open:not(.customer-room-open) .topbar{display:none!important}.room-directory.inline-chat-open:not(.customer-room-open) .layout>.chat{display:flex!important;height:100%!important;min-height:0}.room-directory .rooms .room{min-height:60px}.room-directory .rooms>.section-head{flex-wrap:nowrap!important}.room-directory .room-avatar{width:34px;height:34px}.room-directory .rooms .room{grid-template-columns:34px minmax(0,1fr) auto}}
/* Foldable/tablet touch screens use the same one-pane list → room flow as a phone.
   Keep desktop split view even when its browser window is similarly narrow. */
@media (min-width:761px) and (max-width:1300px) and (pointer:coarse){
 .room-directory:not(.customer-room-open) .shell{width:100%;padding:0}
 .room-directory:not(.customer-room-open) .layout{display:block!important;margin-top:0}
 .room-directory:not(.customer-room-open) .layout>.rooms{display:flex!important;width:100%!important;height:100%;border-radius:0!important}
 .room-directory:not(.customer-room-open) .layout>.chat{display:none!important;width:100%;border-radius:0!important}
 .room-directory.inline-chat-open:not(.customer-room-open) .layout>.rooms,.room-directory.inline-chat-open:not(.customer-room-open) .topbar{display:none!important}
 .room-directory.inline-chat-open:not(.customer-room-open) .layout>.chat{display:flex!important;height:100%!important;min-height:0}
 .room-directory .rooms>.section-head{flex-wrap:nowrap!important}
 body.room-window.clean-chat #backToRooms{display:block!important}
 .room-window .shell{width:100%!important;max-width:none!important;padding:0!important;height:100dvh!important}
 .room-window .shell .chat{height:100%!important;border-radius:0!important}
 .room-window .shell .message{max-width:min(90%,720px)}
}
@media(max-width:639px){.room-window .shell #composer #sendMessage{font-size:0;min-width:40px;padding:6px 9px}.room-window .shell #composer #sendMessage span{font-size:19px}.room-window .shell #composer .composer-main{padding-left:8px}.room-window .shell #composer .composer-toolbar{min-height:36px}}
@media(max-width:639px){.chat-design-mini{inset:0!important;width:100vw!important;height:100dvh!important;min-width:0;min-height:0;resize:none;border-radius:0}.chat-design-mini-head{cursor:default}.chat-design-mini-head .mini-popout{display:none}}