#seafix-demo { --sf-chat-text-size:13px; } /* Chat shares Settings chrome, with independently scrolling contacts and messages. */ #seafix-demo { --sf-chat-paper:light-dark(#fff,#1c1c1e); --sf-chat-field:light-dark(#f4f4f6,#29292d); } #seafix-demo.sf-chat-view .sf-crew-nav { display:none; } #seafix-demo.sf-chat-view .sf-main { display:block; min-height:0; height:100%; padding:0; overflow:hidden; background:var(--sf-canvas); } #seafix-demo.sf-chat-view .sf-main > .sf-chat-page { width:100%; max-width:none; height:100%; min-height:0; margin:0; padding:0; overflow:hidden; } #seafix-demo .sf-chat-layout { --sf-chat-column-gap:14px; display:grid; grid-template-columns:84px minmax(240px,268px) minmax(0,1fr); gap:var(--sf-chat-column-gap); height:100%; min-height:0; width:calc(100% - 2 * var(--sf-page-gutter,16px)); margin-inline:var(--sf-page-gutter,16px); } #seafix-demo .sf-chat-sections { display:flex; flex-direction:column; align-items:stretch; gap:8px; min-width:0; min-height:0; padding:6px 0 20px; overflow-y:auto; } #seafix-demo .sf-chat-sections button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; flex:none; width:100%; min-height:64px; padding:10px 4px; border:1px solid var(--sf-line); border-radius:11px; background:transparent; color:var(--sf-muted); font-size:11px; line-height:1.3; font-weight:500; text-align:center; } #seafix-demo .sf-chat-sections button svg { width:21px!important; height:21px!important; stroke-width:1.7; } #seafix-demo .sf-chat-sections button[aria-pressed=true] { background:var(--sf-heading); color:var(--sf-canvas); border-color:var(--sf-heading); } #seafix-demo .sf-chat-roster { display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; padding:6px 0 0; border:0; } #seafix-demo .sf-chat-search-wrap { position:relative; margin-bottom:10px; } #seafix-demo .sf-chat-search-wrap[hidden], #seafix-demo .sf-chat-sections .sf-chat-search-toggle { display:none; } #seafix-demo #sf-chat-search-close { display:none; position:absolute; top:0; right:0; place-items:center; width:42px; height:100%; margin:0; padding:0; border:0; border-radius:10px; background:transparent; color:var(--sf-muted); } #seafix-demo #sf-chat-search-close svg { width:16px!important; height:16px!important; } #seafix-demo .sf-chat-search-wrap>svg { position:absolute; top:12px; left:11px; width:15px!important; height:15px!important; color:var(--sf-muted); pointer-events:none; } #seafix-demo .sf-chat-page #sf-chat-search { min-height:40px; padding:10px 10px 10px 33px; border:1px solid var(--sf-line); background:var(--sf-surface); border-radius:10px; font-size:12px; line-height:1.4; } #seafix-demo #sf-chat-roster-note { margin:0 0 10px; font-size:12px; } #seafix-demo #sf-chat-people { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:1px 2px 20px; } #seafix-demo .sf-chat-group { margin:0 0 9px; } #seafix-demo .sf-chat-group>summary { display:flex; align-items:center; gap:6px; list-style:none; min-height:35px; padding:5px 1px; cursor:pointer; color:var(--sf-muted); font-size:11px; font-weight:600; } #seafix-demo .sf-chat-group>summary::-webkit-details-marker { display:none; } #seafix-demo .sf-chat-group>summary>svg { flex:none; width:13px!important; height:13px!important; transition:transform .15s; } #seafix-demo .sf-chat-group[open]>summary>svg:first-child { transform:rotate(90deg); } #seafix-demo .sf-chat-group>summary>span { min-width:0; } #seafix-demo .sf-chat-group>summary>small { margin-left:auto; font-size:10px; font-weight:400; } #seafix-demo .sf-chat-contact { display:flex; align-items:center; gap:0; margin:2px 0; padding:0; border:1px solid transparent; border-radius:11px; background:transparent; } #seafix-demo .sf-chat-contact.is-selected { border-color:var(--sf-line); background:var(--sf-surface); } #seafix-demo .sf-chat-person { display:flex; align-items:center; flex:1; min-width:0; gap:10px; margin:0; padding:6px 4px 6px 6px; border:0; border-radius:10px; background:transparent; color:var(--sf-text); text-align:left; } #seafix-demo .sf-chat-avatar { position:relative; display:grid; place-items:center; flex:0 0 46px; width:46px; height:46px; border-radius:50%; background:var(--sf-surface-raised); border:1px solid var(--sf-line); color:var(--sf-heading); font-size:14px; font-weight:600; } #seafix-demo .sf-chat-dot { position:absolute; width:12px; height:12px; right:-1px; bottom:0; border:2px solid var(--sf-canvas); border-radius:50%; background:#96989e; } #seafix-demo .sf-chat-dot[data-state=online] { background:#259454; } #seafix-demo .sf-chat-dot[data-state=offline] { background:#c43b4b; } #seafix-demo .sf-chat-person-copy { display:flex; flex-direction:column; justify-content:space-between; flex:1; height:44px; min-width:0; gap:1px; } #seafix-demo .sf-chat-person-copy>:is(strong,span,small) { display:block; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #seafix-demo .sf-chat-person-copy strong { color:var(--sf-heading); font-size:12.5px; line-height:15px; font-weight:600; } #seafix-demo .sf-chat-person-copy>span { font-size:11px; line-height:13px; color:var(--sf-muted); } #seafix-demo .sf-chat-person-copy small { font-size:10px; line-height:12px; color:var(--sf-muted); } #seafix-demo .sf-chat-contact-actions { display:flex; flex-direction:column; align-items:center; flex:none; width:28px; padding-right:2px; gap:1px; } #seafix-demo .sf-chat-favorite { display:grid; place-items:center; width:27px; height:28px; margin:0; padding:0; border:0; border-radius:7px; color:var(--sf-muted); background:transparent; } #seafix-demo .sf-chat-favorite>svg { width:14px!important; height:14px!important; stroke-width:1.6; } #seafix-demo .sf-chat-favorite[aria-pressed=true] { color:var(--sf-heading); } #seafix-demo .sf-chat-favorite[aria-pressed=true]>svg { fill:currentColor; } #seafix-demo .sf-chat-contact .sf-chat-count { min-width:17px; height:17px; padding:0 4px; font-size:10px; } #seafix-demo .sf-chat-conversation { position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; padding:0 18px 16px; border:0; border-radius:18px 18px 0 0; background:transparent; } #seafix-demo .sf-chat-thread-header { display:flex; align-items:center; gap:12px; flex:none; min-height:73px; margin:0; padding:12px 0; border-bottom:1px solid var(--sf-line); } #seafix-demo #sf-chat-person { display:flex; align-items:center; flex:1; gap:12px; min-width:0; } #seafix-demo #sf-chat-person .sf-chat-avatar { width:48px; height:48px; flex-basis:48px; } #seafix-demo .sf-chat-thread-copy { display:flex; flex-direction:column; justify-content:center; gap:7px; min-width:0; flex:1; } #seafix-demo .sf-chat-thread-copy strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; line-height:18px; color:var(--sf-heading); font-weight:600; } #seafix-demo .sf-chat-thread-copy strong>span { font-weight:400; color:var(--sf-muted); } #seafix-demo .sf-chat-thread-state { display:flex; align-items:center; gap:8px; min-width:0; font-size:11px; line-height:15px; color:var(--sf-muted); } #seafix-demo .sf-chat-thread-state>span { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } #seafix-demo .sf-chat-duty { flex:none; margin:0; padding:2px 6px; border:1px solid var(--sf-line); border-radius:6px; background:var(--sf-chat-field); color:var(--sf-muted); font-size:10px; line-height:13px; font-style:normal; } #seafix-demo .sf-chat-duty[data-duty=on-leave] { background:transparent; } #seafix-demo #sf-chat-person>.sf-chat-favorite { flex:none; width:32px; height:36px; } #seafix-demo #sf-chat-list-back { display:none; place-items:center; flex:none; width:32px; height:36px; padding:0; border:0; border-radius:10px; background:transparent; color:var(--sf-muted); } #seafix-demo #sf-chat-list-back svg { width:17px!important; height:17px!important; } #seafix-demo #sf-chat-messages { display:flex; flex-direction:column; flex:1; gap:9px; min-height:0; height:auto; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:20px 2px; } #seafix-demo .sf-chat-empty { margin:auto; max-width:260px; padding:24px 12px; text-align:center; color:var(--sf-muted); } #seafix-demo .sf-chat-empty .sf-empty-work-symbol { margin:12px auto 32px; } #seafix-demo .sf-chat-empty h3 { margin:0 0 8px; color:var(--sf-heading); font-size:17px; font-weight:600; } #seafix-demo .sf-chat-empty p { margin:0; font-size:13px; line-height:1.6; } #seafix-demo .sf-chat-bubble { max-width:82%; flex:none; align-self:flex-start; padding:10px 13px; border-radius:14px 14px 14px 4px; background:var(--sf-chat-field); color:var(--sf-text); } #seafix-demo .sf-chat-bubble.is-mine { align-self:flex-end; border-radius:14px 14px 4px 14px; background:var(--sf-heading); color:var(--sf-canvas); } #seafix-demo .sf-chat-bubble p { margin:0; font-size:var(--sf-chat-text-size); line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; } #seafix-demo .sf-chat-bubble small { display:block; margin-top:5px; font-size:10px; line-height:1.3; opacity:.7; text-align:right; } #seafix-demo #sf-chat-older { align-self:center; flex:none; min-height:30px; margin:10px 0 0; padding:6px 11px; font-size:11px; } #seafix-demo #sf-chat-message { flex:none; margin:0 0 9px; font-size:12px; } #seafix-demo #sf-chat-compose { display:flex; align-items:flex-end; gap:8px; flex:none; min-width:0; margin:0; padding:7px; border:1px solid var(--sf-line); border-radius:16px; background:var(--sf-chat-field); color:var(--sf-heading); } #seafix-demo #sf-chat-compose:focus-within { border-color:var(--sf-muted); } #seafix-demo .sf-chat-page #sf-chat-body { flex:1; width:0; min-width:0; min-height:42px; max-height:132px; margin:0; padding:10px 7px; resize:none; border:0; border-radius:10px; box-shadow:none; outline:0; background:transparent; color:var(--sf-heading); font-size:14px; line-height:22px; overflow-y:auto; } #seafix-demo .sf-chat-page #sf-chat-body::placeholder { color:var(--sf-muted); opacity:.65; } #seafix-demo .sf-chat-page .sf-chat-send { display:flex; align-items:center; justify-content:center; gap:7px; flex:none; min-width:42px; height:42px; padding:0 12px; border:0; border-radius:12px; background:var(--sf-heading); color:var(--sf-canvas); font-size:12px; font-weight:600; } #seafix-demo .sf-chat-send>svg { width:19px!important; height:19px!important; } #seafix-demo #sf-chat-compose[hidden], #seafix-demo #sf-chat-older[hidden], #seafix-demo #sf-chat-message[hidden], #seafix-demo #sf-chat-roster-note[hidden] { display:none; } #seafix-demo .sf-chat-group>summary:focus-visible { outline:2px solid var(--sf-heading); outline-offset:2px; border-radius:5px; } #seafix-demo #sf-shortcut-chat .sf-shortcut-icon { position:relative; } #seafix-demo :is(.sf-shortcut-icon,.sf-nav-icon)>.sf-chat-icon-badge { position:absolute; top:-5px; right:-6px; display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 4px; border-radius:99px; background:#cc2942; color:white; box-shadow:0 0 0 2px var(--sf-surface); font-size:10px; line-height:1; font-weight:650; } #seafix-demo .sf-nav-icon>.sf-chat-icon-badge { right:-1px; box-shadow:0 0 0 2px var(--sf-nav-surface); } #seafix-demo .sf-chat-icon-badge[hidden] { display:none!important; } @media (min-width:760px) and (max-width:1100px) { #seafix-demo .sf-chat-layout { --sf-chat-column-gap:12px; grid-template-columns:74px 232px minmax(0,1fr); } #seafix-demo .sf-chat-conversation { padding-inline:17px; } #seafix-demo .sf-chat-send span { display:none; } } @media (max-width:999px) { html:has(#seafix-demo.sf-chat-view),html:has(#seafix-demo.sf-chat-view)>body { height:100%; overflow:hidden; overscroll-behavior:none; } #seafix-demo.sf-chat-view { position:fixed; inset:var(--sf-viewport-top,0px) 0 auto; height:var(--sf-viewport-height,100dvh); min-height:0; overflow:hidden; } #seafix-demo.sf-chat-view .sf-phone { display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100%; min-height:0; max-height:100%; } #seafix-demo.sf-chat-view .sf-bottom-nav { position:static; inset:auto; grid-row:3; margin:0 auto; } #seafix-demo.sf-chat-view .sf-main { padding:0; } #seafix-demo.sf-chat-view .sf-top-actions { margin-left:auto; } } @media (max-width:759px) { #seafix-demo #sf-observer-banner { display:none!important; } #seafix-demo .sf-chat-layout { --sf-chat-column-gap:0px; width:calc(100% - 20px); margin-inline:10px; grid-template-columns:75px minmax(0,1fr); } #seafix-demo .sf-chat-sections { padding:6px 8px 12px 0; gap:7px; } #seafix-demo .sf-chat-sections button { min-height:72px; padding:10px 3px; font-size:10px; } #seafix-demo .sf-chat-roster { padding:6px 0 0 9px; } #seafix-demo .sf-chat-page #sf-chat-search { font-size:16px; padding-left:30px; } #seafix-demo .sf-chat-person { gap:8px; padding-left:4px; } #seafix-demo .sf-chat-contact-actions { width:28px; } #seafix-demo .sf-chat-conversation { display:none; border-radius:16px 16px 0 0; padding:0 12px 3px; } #seafix-demo.sf-chat-peer-open .sf-chat-layout { grid-template-columns:minmax(0,1fr); } #seafix-demo.sf-chat-peer-open :is(.sf-chat-sections,.sf-chat-roster) { display:none; } #seafix-demo.sf-chat-peer-open .sf-chat-conversation { display:flex; } #seafix-demo .sf-chat-thread-header { gap:8px; min-height:78px; padding-block:15px; } #seafix-demo #sf-chat-list-back { display:grid; width:28px; border:0; } #seafix-demo #sf-chat-person { gap:8px; } #seafix-demo #sf-chat-person .sf-chat-avatar { width:42px; height:42px; flex-basis:42px; } #seafix-demo #sf-chat-person>.sf-chat-favorite { display:none; } #seafix-demo .sf-chat-thread-copy { gap:5px; } #seafix-demo .sf-chat-thread-copy strong { font-size:12px; line-height:16px; } #seafix-demo .sf-chat-thread-state { font-size:10px; gap:5px; } #seafix-demo .sf-chat-duty { font-size:9px; padding-inline:4px; } #seafix-demo .sf-chat-page #sf-chat-body { font-size:16px; } #seafix-demo .sf-chat-page .sf-chat-send { width:42px; padding:0; } #seafix-demo .sf-chat-send span { display:none; } #seafix-demo .sf-chat-bubble { max-width:90%; } } @media (hover:hover) { #seafix-demo .sf-chat-contact:hover, #seafix-demo .sf-chat-favorite:hover { background:var(--sf-surface-raised); } } @media (prefers-reduced-motion:reduce) { #seafix-demo .sf-chat-group>summary>svg { transition:none; } } /* CrewChat is a module label beside the existing brand. */ #seafix-demo .sf-brand-area { display:flex; align-items:center; gap:12px; min-width:0; } #seafix-demo .sf-crewchat-brand { display:inline-flex; align-items:center; padding:7px 10px; border-radius:7px; background:#151517; color:#fff; font-size:12px; font-weight:600; line-height:1.2; letter-spacing:-.15px; white-space:nowrap; } #seafix-demo .sf-crewchat-brand[hidden] { display:none; } #seafix-demo .sf-chat-minimize { display:grid; place-items:center; flex:none; width:32px; height:36px; padding:0; border:0; border-radius:9px; background:transparent; color:var(--sf-muted); cursor:pointer; } #seafix-demo .sf-chat-minimize svg { width:18px!important; height:18px!important; } #seafix-demo .sf-chat-minimize[hidden] { display:none; } @media (max-width:759px) { #seafix-demo .sf-brand-area { gap:8px; } #seafix-demo .sf-crewchat-brand { font-size:15px; padding:6px 7px; font-weight:600; } } @media (max-width:380px) { #seafix-demo.sf-chat-view .sf-crewchat-brand { font-size:13px; padding-inline:5px; } } /* Floating conversations stay inside the app's right content margin. */ #seafix-demo .sf-chat-dock { --sf-mini-nav:0px; position:fixed; right:max(var(--sf-page-gutter,16px),calc((100vw - var(--sf-shell-width,1240px)) / 2 + var(--sf-page-gutter,16px))); bottom:0; z-index:40; display:flex; align-items:flex-end; gap:12px; width:min(calc(var(--sf-mini-count,1) * 310px + (var(--sf-mini-count,1) - 1) * 12px),calc(100% - 2 * var(--sf-page-gutter,16px))); max-width:956px; padding:0; pointer-events:none; } #seafix-demo .sf-chat-dock[hidden], #seafix-demo.is-logged-out .sf-chat-dock, #seafix-demo.is-starting .sf-chat-dock { display:none!important; } #seafix-demo .sf-mini-chat { display:flex; flex-direction:column; flex:1; min-width:0; max-height:calc(var(--sf-viewport-height,100dvh) - var(--sf-mini-nav) - 20px); border:1px solid var(--sf-line); border-bottom:0; border-radius:13px 13px 0 0; background:var(--sf-chat-paper); color:var(--sf-text); box-shadow:0 -3px 24px rgb(0 0 0 / .10); overflow:hidden; pointer-events:auto; } #seafix-demo .sf-mini-chat.is-expanded { height:min(410px,calc(var(--sf-viewport-height,100dvh) - var(--sf-header-height,80px) - var(--sf-mini-nav) - 20px)); } #seafix-demo .sf-mini-header { display:flex; align-items:center; gap:8px; flex:none; min-height:52px; padding:6px 8px 6px 10px; border-bottom:1px solid transparent; background:var(--sf-chat-field); } #seafix-demo .sf-mini-chat.is-expanded .sf-mini-header { border-bottom-color:var(--sf-line); } #seafix-demo .sf-mini-header button { display:flex; align-items:center; justify-content:center; flex:none; width:26px; height:30px; padding:0; border:0; border-radius:7px; background:transparent; color:var(--sf-muted); cursor:pointer; } #seafix-demo .sf-mini-header button>svg { width:14px!important; height:14px!important; } #seafix-demo .sf-mini-header .sf-mini-toggle { flex:1; justify-content:flex-start; gap:8px; width:auto; height:38px; min-width:0; text-align:left; } #seafix-demo .sf-mini-controls { display:flex; flex:none; align-items:center; gap:2px; padding:2px; border:1px solid var(--sf-line); border-radius:9px; background:var(--sf-chat-paper); } #seafix-demo .sf-mini-controls button { width:26px; height:28px; border-radius:6px; } #seafix-demo .sf-mini-avatar { position:relative; display:grid; place-items:center; flex:none; width:30px; height:30px; border:1px solid var(--sf-line); border-radius:50%; background:var(--sf-surface-raised); color:var(--sf-heading); font-size:10px; font-weight:600; } #seafix-demo .sf-mini-avatar .sf-chat-dot { width:10px; height:10px; border-color:var(--sf-chat-field); } #seafix-demo .sf-mini-person { display:flex; flex-direction:column; gap:3px; min-width:0; } #seafix-demo .sf-mini-person strong, #seafix-demo .sf-mini-person small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #seafix-demo .sf-mini-person strong { color:var(--sf-heading); font-size:12px; font-weight:600; line-height:15px; } #seafix-demo .sf-mini-person small { color:var(--sf-muted); font-size:10px; line-height:12px; } #seafix-demo .sf-mini-toggle .sf-chat-count { min-width:17px; height:17px; padding:0 4px; margin-left:auto; font-size:10px; } #seafix-demo .sf-mini-body { display:flex; flex-direction:column; flex:1; min-height:0; padding:0 10px 10px; } #seafix-demo .sf-mini-body[hidden], #seafix-demo .sf-mini-note[hidden], #seafix-demo .sf-mini-older[hidden] { display:none; } #seafix-demo .sf-mini-messages { display:flex; flex-direction:column; flex:1; min-height:0; gap:7px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:12px 1px; } #seafix-demo .sf-mini-messages .sf-chat-bubble { max-width:90%; padding:8px 10px; } #seafix-demo .sf-mini-messages .sf-chat-bubble p { font-size:12px; } #seafix-demo .sf-mini-messages .sf-chat-bubble small { font-size:9px; } #seafix-demo .sf-mini-empty { margin:auto; padding:16px 6px; font-size:12px; line-height:1.5; color:var(--sf-muted); text-align:center; } #seafix-demo .sf-mini-older { align-self:center; flex:none; margin:8px 0 0; padding:3px 6px; border:0; background:transparent; color:var(--sf-muted); font-size:10px; cursor:pointer; } #seafix-demo .sf-mini-note { flex:none; margin:0 0 8px; color:var(--sf-muted); font-size:11px; line-height:1.4; overflow-wrap:anywhere; } #seafix-demo .sf-mini-compose { display:flex; align-items:flex-end; flex:none; gap:4px; margin:0; padding:4px; border:1px solid var(--sf-line); border-radius:12px; background:var(--sf-chat-field); } #seafix-demo .sf-mini-compose:focus-within { border-color:var(--sf-muted); } #seafix-demo .sf-mini-compose textarea { flex:1; min-width:0; width:0; min-height:38px; max-height:88px; padding:8px 6px; margin:0; border:0; border-radius:8px; outline:0; box-shadow:none; background:transparent; color:var(--sf-text); font:inherit; font-size:12px; line-height:20px; resize:none; } #seafix-demo .sf-mini-compose button { display:grid; place-items:center; flex:none; width:34px; height:38px; padding:0; border:0; border-radius:9px; background:var(--sf-heading); color:var(--sf-canvas); cursor:pointer; } #seafix-demo .sf-mini-compose button svg { width:17px!important; height:17px!important; } #seafix-demo .sf-chat-dock button:focus-visible, #seafix-demo .sf-mini-messages:focus-visible { outline:2px solid var(--sf-heading); outline-offset:-2px; } #seafix-demo .sf-chat-dock button:disabled { opacity:.5; cursor:default; } @media (max-width:999px) { #seafix-demo .sf-chat-dock { --sf-mini-nav:var(--sf-nav-height,72px); right:var(--sf-page-gutter,16px); top:calc(var(--sf-viewport-top,0px) + var(--sf-viewport-height,100dvh) - var(--sf-mini-nav) - 8px); bottom:auto; transform:translateY(-100%); } #seafix-demo .sf-mini-chat { border-bottom:1px solid var(--sf-line); border-radius:13px; } } @media (max-width:759px) { #seafix-demo .sf-chat-dock { display:grid; grid-template-columns:repeat(var(--sf-mini-count,1),minmax(0,1fr)); gap:6px; width:calc(100% - 20px); right:10px; } #seafix-demo .sf-mini-chat { grid-row:2; } #seafix-demo .sf-mini-chat.is-expanded { grid-row:1; grid-column:1/-1; height:min(340px,max(130px,calc(var(--sf-viewport-height,100dvh) - var(--sf-mini-nav) - 126px))); } #seafix-demo .sf-mini-chat:not(.is-expanded) .sf-mini-header { min-height:44px; padding:5px; } #seafix-demo .sf-mini-chat:not(.is-expanded) .sf-mini-header { gap:3px; } #seafix-demo .sf-mini-chat:not(.is-expanded) .sf-mini-controls { gap:0; padding:1px; border-radius:7px; } #seafix-demo .sf-mini-chat:not(.is-expanded) .sf-mini-controls button { width:20px; height:26px; } #seafix-demo .sf-mini-chat:not(.is-expanded) :is(.sf-mini-avatar,.sf-mini-full,.sf-mini-person small) { display:none; } #seafix-demo .sf-mini-chat:not(.is-expanded) .sf-mini-toggle { height:32px; gap:3px; } #seafix-demo .sf-mini-chat:not(.is-expanded) .sf-mini-person strong { font-size:10px; } #seafix-demo .sf-mini-chat:not(.is-expanded) .sf-mini-close { width:20px; } #seafix-demo .sf-mini-compose textarea { font-size:16px; } } @media (hover:hover) { #seafix-demo .sf-chat-minimize:hover, #seafix-demo .sf-mini-header button:hover { background:var(--sf-surface-raised); color:var(--sf-heading); } } @media print { #seafix-demo .sf-chat-dock { display:none!important; } } /* New messages enter gently; existing bubbles and the reading position stay put. */ #seafix-demo .sf-chat-messages, #seafix-demo .sf-mini-messages { overflow-anchor: none; } #seafix-demo .sf-chat-bubble.is-arriving { animation: sf-chat-arrival 180ms ease-out; } @keyframes sf-chat-arrival { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { #seafix-demo .sf-chat-bubble.is-arriving { animation: none; } } /* Update 51: neutral contacts, hover feedback and three rows within the avatar. */ #seafix-demo .sf-chat-contact { transition:background-color .15s,border-color .15s; } #seafix-demo .sf-chat-contact.is-unread { background:light-dark(#edeef0,#29292d); border-color:light-dark(#e0e1e4,#39393e); } #seafix-demo .sf-chat-person-copy { height:46px; justify-content:center; gap:2px; } #seafix-demo .sf-chat-person-copy strong { font-size:12px; line-height:14px; } #seafix-demo .sf-chat-person-copy > span { font-size:10.5px; line-height:14px; } #seafix-demo .sf-chat-person-copy small { font-size:10px; line-height:14px; } #seafix-demo .sf-chat-contact.is-unread .sf-chat-person-copy strong { font-weight:700; } #seafix-demo .sf-chat-contact .sf-chat-count { display:grid; place-items:center; width:24px; min-width:24px; height:24px; box-sizing:border-box; padding:0; border-radius:50%; background:var(--sf-heading); color:var(--sf-canvas); font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; } #seafix-demo #sf-chat-person .sf-chat-avatar { width:46px; height:46px; flex-basis:46px; } #seafix-demo .sf-chat-thread-copy { height:46px; gap:2px; } #seafix-demo .sf-chat-thread-copy strong { margin:0; font-size:13px; line-height:14px; } #seafix-demo .sf-chat-thread-position { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--sf-muted); font-size:11px; line-height:14px; } #seafix-demo .sf-chat-thread-state { height:14px; font-size:10px; line-height:14px; } #seafix-demo .sf-chat-thread-header .sf-chat-duty { height:14px; box-sizing:border-box; padding:0 4px; font-size:9px; line-height:12px; } #seafix-demo .sf-chat-contact:has(:focus-visible) { outline:2px solid var(--sf-heading); outline-offset:2px; } @media(hover:hover) { #seafix-demo .sf-chat-contact:hover { border-color:light-dark(#d2d3d7,#4a4a50); background:light-dark(#e3e4e7,#333338); } } @media(prefers-reduced-motion:reduce) { #seafix-demo .sf-chat-contact { transition:none; } } /* Incoming CrewChat messages stay white and legible in both appearance modes. */ #seafix-demo .sf-chat-bubble:not(.is-mine) { background:var(--sf-chat-field); color:var(--sf-heading); } @media(max-width:999px){ /* The chat takes the space vacated by the dock while the composer has focus. */ #seafix-demo.sf-chat-view.sf-chat-keyboard-open .sf-chat-conversation { padding-bottom:7px; } #seafix-demo.sf-chat-view:has(#sf-chat-body:focus) .sf-main { background:var(--sf-canvas); } } @media(max-width:999px){ #seafix-demo.sf-chat-view.sf-chat-keyboard-open .sf-chat-conversation::after { content:""; position:absolute; left:0; right:0; bottom:0; height:66px; z-index:0; pointer-events:none; background:rgb(245 245 247 / .35); backdrop-filter:blur(14px) saturate(135%); -webkit-backdrop-filter:blur(14px) saturate(135%); } #seafix-demo.sf-chat-view #sf-chat-compose { position:relative; z-index:1; } #seafix-demo.sf-chat-view #sf-chat-body { color-scheme:inherit; } } /* Keep the minimized conversation palette consistent with the full chat. */ #seafix-demo .sf-mini-chat { background:var(--sf-canvas); } #seafix-demo .sf-mini-messages .sf-chat-bubble:not(.is-mine) { background:#fff; color:#17191d; } #seafix-demo .sf-mini-messages .sf-chat-bubble.is-mine { background:#101113; color:#fff; } #seafix-demo .sf-mini-compose { background:var(--sf-chat-field); color:var(--sf-heading); } #seafix-demo .sf-mini-compose textarea { color:var(--sf-heading); } #seafix-demo .sf-mini-compose button { background:#101113; color:#fff; } /* Quiet encryption notice, with room for the first messages. */ #seafix-demo #sf-chat-encryption-notice { box-sizing:border-box; position:absolute; z-index:2; display:flex; align-items:center; gap:16px; margin:0; padding:10px 42px 10px 19px; min-width:0; max-width:100%; border:1px solid light-dark(#454545,#4d4d4d); border-radius:14px; background:light-dark(#292929,#262626); color:light-dark(#f0f0f0,#e6e6e6); box-shadow:none; font-size:var(--sf-chat-text-size); line-height:1.5; overflow-wrap:anywhere; } #seafix-demo #sf-chat-encryption-notice[hidden] { display:none; } #seafix-demo #sf-chat-encryption-notice p { flex:1; min-width:0; margin:0; } #seafix-demo #sf-chat-encryption-notice p { font-weight:400; } #seafix-demo #sf-chat-encryption-notice a { display:inline; margin:0; padding:0; min-height:0; color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px; touch-action:manipulation; } #seafix-demo .sf-chat-encryption-icon { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border-radius:8px; background:light-dark(#3d3d3d,#404040); } #seafix-demo .sf-chat-encryption-icon svg { width:19px!important; height:19px!important; stroke-width:1.8; } #seafix-demo #sf-chat-encryption-dismiss { position:absolute; top:6px; right:6px; display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:8px; background:transparent; color:inherit; cursor:pointer; touch-action:manipulation; } #seafix-demo #sf-chat-encryption-dismiss svg { width:15px!important; height:15px!important; } #seafix-demo #sf-chat-encryption-notice :is(a,button):focus-visible { outline:2px solid var(--sf-muted); outline-offset:3px; } #seafix-demo #sf-chat-encryption-dismiss:hover { background:light-dark(#3d3d3d,#404040); } #seafix-demo #sf-chat-messages.has-encryption-notice::before { content:""; display:block; flex:0 0 var(--sf-chat-notice-space,0px); } @media(max-width:759px) { #seafix-demo #sf-chat-encryption-notice { align-items:center; gap:8px; padding:8px 36px 8px 12px; font-size:var(--sf-chat-text-size); } #seafix-demo .sf-chat-encryption-icon { flex-basis:24px; width:24px; height:24px; } #seafix-demo .sf-chat-encryption-icon svg { width:17px!important; height:17px!important; } } @media(pointer:coarse) { #seafix-demo #sf-chat-encryption-dismiss { top:0; right:0; width:44px; height:44px; } } #seafix-demo .sf-chat-security-page { max-width:840px; margin:0 auto; padding:20px; color:var(--sf-text); line-height:1.65; } #seafix-demo .sf-chat-security-page>button { display:flex; align-items:center; gap:8px; border:1px solid var(--sf-line); border-radius:10px; background:var(--sf-surface); color:var(--sf-text); padding:10px 14px; } #seafix-demo .sf-chat-security-page section { margin:24px 0; } #seafix-demo .sf-chat-security-page h3 { font-size:17px; margin:0 0 8px; } #seafix-demo .sf-chat-security-page p { margin:0; } #seafix-demo .sf-chat-contact-actions { flex-wrap:wrap; } @media(max-width:759px) { /* Keep the four existing phone controls readable; archive gets its own compact row. */ #seafix-demo .sf-chat-sections [data-chat-filter="archived"] { grid-column:1 / -1; order:1; min-height:34px; } } /* A promoted conversation header must never enlarge the phone grid track. */ @media(max-width:759px) { #seafix-demo.sf-chat-view .sf-phone { grid-template-columns:minmax(0,1fr); width:100%; min-width:0; } #seafix-demo.sf-chat-view :is(.sf-topbar,.sf-main,.sf-chat-page,.sf-chat-thread-header,#sf-chat-messages,#sf-chat-compose) { min-width:0; max-width:100%; box-sizing:border-box; } #seafix-demo.sf-chat-view .sf-topbar { width:100%; } #seafix-demo.sf-chat-header-promoted .sf-chat-thread-header { gap:5px; } #seafix-demo.sf-chat-header-promoted #sf-chat-person { flex:1 1 0; min-width:0; gap:8px; } #seafix-demo.sf-chat-header-promoted .sf-chat-thread-state { flex-wrap:wrap; gap:3px 6px; } #seafix-demo.sf-chat-view #sf-chat-messages { overflow-x:hidden; } } #seafix-demo #sf-chat-encryption-notice { opacity:1; transition:opacity 220ms ease; } #seafix-demo #sf-chat-encryption-notice.is-history-reading { opacity:0; pointer-events:none; } @media(prefers-reduced-motion:reduce) { #seafix-demo #sf-chat-encryption-notice { transition:none; } } /* Explanation opens over the current conversation, with platform-sized presentation. */ #seafix-demo #sf-chat-security-dialog { box-sizing:border-box; width:min(780px,calc(100vw - 40px)); max-height:calc(100dvh - 64px); padding:0; border:1px solid var(--sf-line); border-radius:20px; background:var(--sf-canvas); color:var(--sf-text); box-shadow:0 20px 80px rgb(0 0 0 / .2); overflow:auto; } #seafix-demo #sf-chat-security-dialog[open] { animation:sf-security-open 180ms ease-out; } #seafix-demo #sf-chat-security-dialog::backdrop { background:rgb(0 0 0 / .32); backdrop-filter:blur(5px); } #seafix-demo #sf-chat-security-dialog .sf-chat-security-page { padding:0 22px 22px; } #seafix-demo .sf-chat-security-heading { display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:1; padding:20px 0; background:var(--sf-canvas); } #seafix-demo .sf-chat-security-heading>svg { flex:none; width:28px; height:28px; } #seafix-demo .sf-chat-security-heading h2 { flex:1; min-width:0; margin:0; font-size:calc(var(--sf-chat-text-size) + 4px); line-height:1.3; } #seafix-demo #sf-chat-security-close { display:grid; place-items:center; flex:none; width:40px; height:40px; padding:0; border:1px solid var(--sf-line); border-radius:50%; color:var(--sf-text); background:var(--sf-surface); cursor:pointer; } #seafix-demo #sf-chat-security-close svg { width:20px; height:20px; } #seafix-demo #sf-chat-security-dialog section { margin:0 0 12px; padding:16px; border:1px solid var(--sf-line); border-radius:14px; background:var(--sf-surface); } #seafix-demo #sf-chat-security-dialog h3 { display:flex; align-items:center; gap:9px; margin-bottom:8px; font-size:calc(var(--sf-chat-text-size) + 2px); } #seafix-demo #sf-chat-security-dialog h3 svg { width:20px; height:20px; flex:none; } #seafix-demo #sf-chat-security-dialog p { font-size:var(--sf-chat-text-size); line-height:1.5; } @keyframes sf-security-open { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } } @media(max-width:759px) { #seafix-demo #sf-chat-security-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - env(safe-area-inset-top,0px) - 24px); margin:calc(env(safe-area-inset-top,0px) + 8px) auto 0; border-radius:0 0 20px 20px; } #seafix-demo #sf-chat-security-dialog[open] { animation:sf-security-sheet 240ms ease-out; } #seafix-demo #sf-chat-security-dialog .sf-chat-security-page { padding:0 14px 14px; } #seafix-demo .sf-chat-security-heading { padding:14px 0; gap:8px; } #seafix-demo .sf-chat-security-heading h2 { font-size:calc(var(--sf-chat-text-size) + 3px); } } @keyframes sf-security-sheet { from { opacity:0; transform:translateY(-100%); } to { opacity:1; transform:translateY(0); } } @media(prefers-reduced-motion:reduce) { #seafix-demo #sf-chat-security-dialog[open] { animation:none; } } /* Phone CrewChat polish: compact notice, matching controls and frosted composer. */ @media(max-width:759px) { #seafix-demo.sf-chat-peer-open .sf-chat-layout { width:calc(100% - 2 * max(8px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))); margin-inline:max(8px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)); } #seafix-demo.sf-chat-view .sf-chat-conversation { padding-inline:0; } #seafix-demo #sf-chat-encryption-notice { z-index:26; } #seafix-demo #sf-chat-encryption-notice p>span { display:block; } #seafix-demo #sf-chat-encryption-notice p>a { display:block; width:fit-content; } #seafix-demo.sf-chat-view #sf-chat-older, #seafix-demo.sf-phone-header.sf-chat-view #sf-chat-older { background:light-dark(#e2e3e7,#42444b); color:light-dark(#34363d,#f4f4f6); border:1px solid var(--sf-line); border-radius:12px; } #seafix-demo.sf-chat-view #sf-chat-compose { align-items:flex-end; gap:4px; padding:6px; border-radius:24px; background:rgb(255 255 255 / .82); box-shadow:0 2px 12px rgb(0 0 0 / .04); } @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { #seafix-demo.sf-chat-view #sf-chat-compose { background:rgb(255 255 255 / .72); backdrop-filter:blur(22px) saturate(130%); -webkit-backdrop-filter:blur(22px) saturate(130%); } } #seafix-demo.sf-chat-view #sf-chat-compose :is(#sf-chat-emoji,.sf-chat-sticker-toggle) { display:grid; place-items:center; flex:0 0 32px; width:32px; height:42px; padding:0; border:0; border-radius:10px; color:#55585f; background:transparent; } #seafix-demo.sf-chat-view #sf-chat-compose :is(#sf-chat-emoji,.sf-chat-sticker-toggle) svg { width:22px!important; height:22px!important; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } #seafix-demo.sf-chat-view #sf-chat-compose :is(#sf-chat-emoji,.sf-chat-sticker-toggle):is(:hover,[aria-expanded=true]) { background:#edf0f4; color:#17191d; } #seafix-demo.sf-chat-view #sf-chat-compose .sf-chat-send { flex:0 0 38px; width:38px; min-width:38px; height:38px; margin:2px 0; padding:0; border-radius:50%; background:#23262c; color:#fff; } #seafix-demo.sf-chat-view #sf-chat-compose .sf-chat-send svg { width:19px!important; height:19px!important; stroke-width:2; } #seafix-demo.sf-chat-view.sf-chat-keyboard-open .sf-chat-conversation::after { background:var(--sf-canvas); backdrop-filter:none; -webkit-backdrop-filter:none; } html:has(#seafix-demo.sf-chat-view),html:has(#seafix-demo.sf-chat-view)>body { background:light-dark(#f5f5f7,#111113)!important; } } @media(max-width:759px) and (prefers-reduced-transparency:reduce) { #seafix-demo.sf-chat-view #sf-chat-compose { background:#f8f8fa; backdrop-filter:none; -webkit-backdrop-filter:none; } } /* CrewChat security sheet: phone artwork and one continuous reading surface. */ #seafix-demo .sf-chat-security-flow { display:none; } @media(max-width:759px) { #seafix-demo #sf-chat-security-dialog { --sf-security-surface:light-dark(#e9eaee,#27292e); max-width:calc(100vw - 16px); border-radius:20px; background:var(--sf-security-surface); } #seafix-demo #sf-chat-security-dialog .sf-chat-security-heading { align-items:flex-start; background:var(--sf-security-surface); } #seafix-demo .sf-chat-security-heading>svg { display:none; } #seafix-demo .sf-chat-security-heading h2 { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } #seafix-demo .sf-chat-security-flow { display:block; flex:1; min-width:0; color:var(--sf-text); } #seafix-demo .sf-chat-security-flow>svg { display:block; width:100%; max-width:320px; height:76px; margin-inline:auto; } #seafix-demo .sf-security-data { color:light-dark(#7d879d,#a2acc2); } #seafix-demo .sf-security-stream { animation:sf-security-data-flow 3.5s linear infinite; animation-play-state:paused; } #seafix-demo .sf-security-stream--return { opacity:.5; animation-direction:reverse; } #seafix-demo #sf-chat-security-dialog[open] .sf-security-stream { animation-play-state:running; } #seafix-demo #sf-chat-security-close { background:var(--sf-security-surface); } #seafix-demo #sf-chat-security-dialog section { margin:0; padding:16px; border:0; border-radius:0; background:transparent; } #seafix-demo #sf-chat-security-dialog section+section { border-top:1px solid var(--sf-line); } } @keyframes sf-security-data-flow { to { stroke-dashoffset:-36; } } @media(max-width:759px) and (prefers-reduced-motion:reduce) { #seafix-demo #sf-chat-security-dialog .sf-security-stream { animation:none; } } /* Phone CrewChat: conversations and the crew directory have separate purposes. */ #seafix-demo :is(.sf-chat-mobile-toolbar,.sf-chat-mobile-filters,.sf-chat-mobile-archive-heading) { display:none; } #seafix-demo #sf-chat-contact-dialog { width:min(380px,calc(100vw - 32px)); max-width:calc(100vw - 32px); padding:24px; border:1px solid var(--sf-line); border-radius:20px; background:var(--sf-canvas); color:var(--sf-text); } #seafix-demo #sf-chat-contact-dialog::backdrop { background:rgb(0 0 0 / .32); backdrop-filter:blur(5px); } #seafix-demo #sf-chat-contact-title { padding-right:24px; margin:0 0 8px; font-size:17px; } #seafix-demo #sf-chat-contact-description { color:var(--sf-muted); font-size:13px; line-height:1.5; } #seafix-demo #sf-chat-contact-close { position:absolute; top:4px; right:4px; display:grid; place-items:center; width:44px; height:44px; border:0; background:transparent; color:var(--sf-text); } #seafix-demo #sf-chat-contact-close svg { width:16px; height:16px; } #seafix-demo #sf-chat-contact-options button { display:flex; align-items:center; gap:10px; width:100%; height:auto; min-height:44px; padding:12px 0; border:0; border-top:1px solid var(--sf-line); border-radius:0; background:transparent; color:var(--sf-text); text-align:left; font-size:14px; } #seafix-demo #sf-chat-contact-options svg { flex:none; width:20px; height:20px; } @media(max-width:759px) { #seafix-demo .sf-chat-layout { display:block; width:calc(100% - 16px); margin-inline:8px; } #seafix-demo #sf-chat-roster-scroll { display:block; min-width:0; width:100%; height:100%; overflow-y:auto; overscroll-behavior:contain; padding:0 0 16px; } #seafix-demo.sf-chat-peer-open #sf-chat-roster-scroll { display:none; } #seafix-demo .sf-chat-sections { display:none!important; } #seafix-demo .sf-chat-roster { display:block; height:auto; padding:0; } #seafix-demo #sf-chat-people { overflow:visible; padding:0 0 16px; } #seafix-demo .sf-chat-mobile-toolbar { position:relative; display:flex; align-items:center; gap:4px; min-height:48px; border-bottom:1px solid var(--sf-line); } #seafix-demo .sf-chat-mobile-toolbar>button { display:grid; place-items:center; flex:none; min-height:44px; padding:10px 12px; margin:0; border:0; border-radius:0; background:transparent; color:var(--sf-muted); font-size:15px; line-height:1.4; } #seafix-demo .sf-chat-mobile-toolbar>[data-chat-view] { position:relative; } #seafix-demo .sf-chat-mobile-toolbar>[data-chat-view][aria-pressed=true] { color:var(--sf-text); font-weight:650; } #seafix-demo .sf-chat-mobile-toolbar>[data-chat-view][aria-pressed=true]::after { content:""; position:absolute; bottom:0; left:12px; right:12px; height:2px; border-radius:2px; background:currentColor; } #seafix-demo .sf-chat-mobile-toolbar>#sf-chat-search-toggle { margin-left:auto; } #seafix-demo .sf-chat-mobile-toolbar>:is(#sf-chat-search-toggle,#sf-chat-more-toggle) { width:44px; padding:0; color:var(--sf-text); } #seafix-demo .sf-chat-mobile-toolbar svg { width:20px; height:20px; stroke-width:1.7; } #seafix-demo #sf-chat-more-panel { position:absolute; right:0; top:calc(100% + 4px); z-index:28; padding:6px; border:1px solid var(--sf-line); border-radius:12px; background:var(--sf-surface); box-shadow:0 8px 30px rgb(0 0 0 / .1); } #seafix-demo #sf-chat-more-panel[hidden] { display:none; } #seafix-demo #sf-chat-more-panel button { display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 12px; border:0; background:transparent; color:var(--sf-text); font-size:14px; } #seafix-demo #sf-chat-search-panel { margin:8px 4px 0; animation:sf-chat-search-open 160ms ease-out; } #seafix-demo #sf-chat-search-panel[hidden] { display:none; } #seafix-demo #sf-chat-search-close { display:grid; } #seafix-demo .sf-chat-page #sf-chat-search { width:100%; min-height:44px; padding:10px 44px 10px 34px; font-size:16px; } #seafix-demo .sf-chat-mobile-filters { display:flex; align-items:center; gap:6px; padding:10px 4px; overflow-x:auto; scrollbar-width:none; } #seafix-demo .sf-chat-mobile-filters[hidden] { display:none; } #seafix-demo .sf-chat-mobile-filters button { display:flex; align-items:center; justify-content:center; gap:4px; flex:none; min-height:36px; padding:7px 10px; margin:0; border:1px solid var(--sf-line); border-radius:20px; background:transparent; color:var(--sf-muted); font-size:12px; white-space:nowrap; } #seafix-demo .sf-chat-mobile-filters button[aria-pressed=true] { background:light-dark(#303239,#e3e4e8); border-color:transparent; color:light-dark(#fff,#17191d); } #seafix-demo #sf-chat-filter-unread { font-size:11px; font-weight:650; } #seafix-demo .sf-chat-mobile-archive-heading { display:block; margin:4px 10px 10px; color:var(--sf-muted); font-size:13px; } #seafix-demo .sf-chat-mobile-archive-heading[hidden] { display:none; } #seafix-demo #sf-chat-roster-note { margin:0 10px 8px; } #seafix-demo .sf-chat-mobile-contact { margin:0; border:0; border-bottom:1px solid var(--sf-line); border-radius:0; background:transparent; } #seafix-demo .sf-chat-mobile-contact:is(.is-selected,.is-unread) { border-color:var(--sf-line); background:transparent; } #seafix-demo .sf-chat-mobile-contact .sf-chat-person { min-height:80px; gap:12px; padding:10px 8px; border-radius:0; } #seafix-demo .sf-chat-mobile-contact.is-directory .sf-chat-person { min-height:68px; } #seafix-demo .sf-chat-mobile-contact .sf-chat-avatar { width:44px; height:44px; flex-basis:44px; font-size:16px; } #seafix-demo .sf-chat-mobile-contact .sf-chat-dot[data-state=offline] { background:#c43b4b; } #seafix-demo .sf-chat-mobile-contact .sf-chat-person-copy { height:auto; justify-content:center; gap:3px; } #seafix-demo .sf-chat-contact-title { display:flex!important; align-items:baseline; gap:8px; } #seafix-demo .sf-chat-contact-title strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; line-height:18px; } #seafix-demo .sf-chat-contact-title time { flex:none; margin-left:auto; color:var(--sf-muted); font-size:11px; font-weight:400; } #seafix-demo .sf-chat-mobile-contact .sf-chat-person-copy>span:not(.sf-chat-contact-title) { font-size:12px; line-height:16px; } #seafix-demo .sf-chat-mobile-contact .sf-chat-preview { font-size:13px; line-height:17px; } #seafix-demo .sf-chat-mobile-contact.is-unread .sf-chat-preview { color:var(--sf-text); font-weight:600; } #seafix-demo .sf-chat-mobile-contact .sf-chat-contact-actions { width:24px; padding-right:6px; } #seafix-demo .sf-chat-mobile-contact.is-directory .sf-chat-contact-actions { width:0; padding:0; } #seafix-demo .sf-chat-mobile-contact .sf-chat-favorite { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); } #seafix-demo .sf-chat-mobile-contact .sf-chat-favorite:focus-visible { position:static; width:24px; height:32px; margin:0; clip-path:none; } #seafix-demo .sf-chat-mobile-contact .sf-chat-count { color:light-dark(#fff,#17191d); background:light-dark(#23262c,#e3e4e8); } #seafix-demo .sf-chat-group { margin:0; } #seafix-demo .sf-chat-group>summary { min-height:48px; padding:10px 8px; font-size:13px; border-bottom:1px solid var(--sf-line); } #seafix-demo .sf-chat-group>summary>small { font-size:12px; } #seafix-demo .sf-chat-group>summary>svg { width:16px!important; height:16px!important; } #seafix-demo #sf-chat-security-dialog .sf-chat-security-heading { display:block; } #seafix-demo .sf-chat-security-flow { width:100%; } #seafix-demo #sf-chat-security-close { position:absolute; top:0; right:-8px; width:44px; height:44px; padding:0; border:0; border-radius:0; background:transparent; } #seafix-demo #sf-chat-security-close svg { width:14px!important; height:14px!important; } } @keyframes sf-chat-search-open { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } } @media(max-width:759px) and (prefers-reduced-motion:reduce) { #seafix-demo #sf-chat-search-panel { animation:none; } } /* Mobile filters use a compact selector rather than a row of pills. */ #seafix-demo .sf-chat-mobile-filter-select { display:none; } #seafix-demo #sf-chat-security-dialog:focus { outline:none!important; } @media(max-width:759px) { #seafix-demo .sf-chat-mobile-filter-select { position:relative; display:block; padding:12px 4px 0; } #seafix-demo .sf-chat-mobile-filter-select[hidden] { display:none; } #seafix-demo #sf-chat-filter-toggle { display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 6px; border:0; border-radius:8px; background:transparent; color:var(--sf-muted); font-size:13px; line-height:18px; font-weight:500; white-space:nowrap; } #seafix-demo #sf-chat-filter-toggle svg { width:15px!important; height:15px!important; stroke-width:1.7; transition:transform 160ms ease; } #seafix-demo #sf-chat-filter-toggle[aria-expanded=true] svg { transform:rotate(180deg); } #seafix-demo #sf-chat-filter-panel { position:absolute; top:calc(100% - 4px); left:4px; z-index:29; width:min(260px,calc(100vw - 32px)); padding:6px; border:1px solid var(--sf-line); border-radius:14px; background:var(--sf-chat-paper); box-shadow:0 6px 22px rgb(0 0 0 / .07); } #seafix-demo #sf-chat-filter-panel[hidden] { display:none; } #seafix-demo #sf-chat-filter-panel button { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:10px; border:0; border-radius:8px; background:transparent; color:var(--sf-muted); font-size:13px; text-align:left; } #seafix-demo #sf-chat-filter-panel button[aria-pressed=true] { color:var(--sf-text); font-weight:600; background:var(--sf-chat-field); } #seafix-demo #sf-chat-filter-panel button:focus-visible { outline:1px solid var(--sf-line); outline-offset:-1px; background:var(--sf-chat-field); } #seafix-demo #sf-chat-filter-panel svg { flex:none; width:17px!important; height:17px!important; stroke-width:1.7; } #seafix-demo #sf-chat-filter-panel .sf-chat-filter-check { margin-left:auto; visibility:hidden; } #seafix-demo #sf-chat-filter-panel [aria-pressed=true] .sf-chat-filter-check { visibility:visible; } #seafix-demo #sf-chat-search:is(:focus,:focus-visible) { outline:none!important; box-shadow:none!important; border-color:var(--sf-line); } #seafix-demo #sf-chat-search-panel:focus-within { outline:none!important; box-shadow:none!important; } #seafix-demo #sf-chat-security-close:is(:focus,:focus-visible) { outline:none!important; box-shadow:none!important; background:transparent!important; } #seafix-demo #sf-chat-security-close:focus-visible svg { opacity:.65; } } @media(prefers-reduced-motion:reduce) { #seafix-demo #sf-chat-filter-toggle svg { transition:none; } } /* The phone contact list paints behind the dock and keeps its final row reachable. */ @media(max-width:759px) { #seafix-demo.sf-phone-header.sf-chat-view:not(.sf-chat-peer-open) .sf-main { grid-row:1 / -1; } #seafix-demo.sf-phone-header.sf-chat-view:not(.sf-chat-peer-open) .sf-dock-frame { grid-column:1; } #seafix-demo.sf-phone-header.sf-chat-view:not(.sf-chat-peer-open) #sf-chat-roster-scroll { box-sizing:border-box; height:calc(100% + var(--sf-header-underlap,0px)); padding-bottom:calc(var(--sf-nav-height,82px) + 12px); scroll-padding-bottom:calc(var(--sf-nav-height,82px) + 12px); } #seafix-demo.sf-phone-header.sf-chat-view #sf-chat-people { padding-top:0; } } /* Filled control stays readable over the conversation and header underlap. */ #seafix-demo .sf-chat-page #sf-chat-older, #seafix-demo.sf-phone-header.sf-chat-view .sf-chat-page #sf-chat-older { background:light-dark(#dfe2e7,#41464f); color:light-dark(#3d424c,#edf0f5); border:1px solid light-dark(#c5c9d0,#5b626e); border-radius:12px; box-shadow:none; } /* History controls must not resize the scrollport when visibility changes. */ #seafix-demo .sf-chat-conversation{position:relative;} #seafix-demo #sf-chat-messages{overflow-anchor:none;scroll-behavior:auto;scrollbar-gutter:stable;} #seafix-demo #sf-chat-older{position:absolute;z-index:3;left:50%;transform:translateX(-50%);margin:0;} /* The office directory is the third peer of Conversations and Crew. */ #seafix-demo [data-chat-view="office"][hidden] { display:none!important; } @media(max-width:759px) { #seafix-demo .sf-chat-mobile-toolbar:is([data-fleet-chat="true"],:has([data-chat-view="office"]:not([hidden]))) { gap:0; } #seafix-demo .sf-chat-mobile-toolbar:is([data-fleet-chat="true"],:has([data-chat-view="office"]:not([hidden])))>[data-chat-view] { flex:0 1 auto; min-width:0; padding:8px 6px; font-size:13px; line-height:1.25; } #seafix-demo .sf-chat-mobile-toolbar>[data-chat-view="office"] span { max-width:112px; } } #seafix-demo [data-chat-activity] { flex:none; margin:8px 12px; font-size:12px; line-height:1.5; } #seafix-demo .sf-chat-activity-roster { display:none; } @media(max-width:759px) { #seafix-demo .sf-chat-activity-roster:not([hidden]) { display:block; } } /* Keep browser links readable in incoming, outgoing, dock and archive messages. */ #seafix-demo a.sf-chat-web-link{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;overflow-wrap:anywhere;word-break:break-word;cursor:pointer} #seafix-demo a.sf-chat-web-link:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px} /* CrewChat reference: the timestamp and receipt sit outside the painted body. Keep the article mounted for selection, read updates and scroll anchoring. */ #seafix-demo .sf-chat-bubble.sf-chat-bubble.sf-chat-bubble.sf-chat-bubble, #seafix-demo .sc-bubble.sc-bubble.sc-bubble.sc-bubble { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--sf-text); } /* Own messages and their metadata share the right edge, even for short text. */ #seafix-demo .sf-chat-bubble.sf-chat-bubble.sf-chat-bubble.sf-chat-bubble.is-mine, #seafix-demo .sc-bubble.sc-bubble.sc-bubble.sc-bubble.sc-own { align-self:flex-end; align-items:flex-end; margin-left:auto; margin-right:0; } #seafix-demo .sf-chat-bubble.sf-chat-bubble:not(.is-sticker), #seafix-demo .sc-bubble.sc-bubble:not(.is-sticker) { width:fit-content; } #seafix-demo .sf-chat-bubble.sf-chat-bubble:not(.is-sticker)>p, #seafix-demo .sc-bubble.sc-bubble:not(.is-sticker)>.sc-body { box-sizing:border-box; max-width:100%; min-width:0; margin:0; padding:10px 13px; border-radius:16px; font-size:var(--sf-chat-text-size,13px); line-height:1.5; background:light-dark(#fff,#292b30); color:light-dark(#17191d,#fff); } #seafix-demo .sf-chat-bubble.sf-chat-bubble.is-mine:not(.is-sticker)>p, #seafix-demo .sc-bubble.sc-bubble.sc-own:not(.is-sticker)>.sc-body { background:#101113; color:#fff; } #seafix-demo .sf-chat-bubble.sf-chat-bubble>small, #seafix-demo .sc-bubble.sc-bubble>time { box-sizing:border-box; max-width:100%; margin:5px 8px 0; color:var(--sf-muted); opacity:1; text-align:left; font-size:10px; white-space:normal; overflow-wrap:anywhere; line-height:1.35; } #seafix-demo .sc-bubble.sc-bubble.sc-own>time, #seafix-demo .sf-chat-bubble.sf-chat-bubble.is-mine>small { margin-right:0; padding-right:0; text-align:right; } #seafix-demo .sf-mini-messages .sf-chat-bubble.sf-chat-bubble:not(.is-sticker)>p, #seafix-demo .sc-floating .sc-bubble.sc-bubble:not(.is-sticker)>.sc-body { padding:8px 10px; border-radius:14px; font-size:12px; } #seafix-demo .sc-bubble.sc-bubble{align-self:flex-start;max-width:82%;font-size:var(--sf-chat-text-size,13px)} #seafix-demo .sc-floating .sc-bubble.sc-bubble{max-width:90%} #seafix-demo .sc-floating .sc-bubble.sc-bubble>.sc-body{font-size:12px} #seafix-demo .sf-mini-messages .sf-chat-bubble.sf-chat-bubble>small, #seafix-demo .sc-floating .sc-bubble.sc-bubble>time{font-size:9px} @media(max-width:759px){#seafix-demo .sc-bubble.sc-bubble{max-width:90%}} @media(min-width:1000px){#seafix-demo .sc-bubble.sc-bubble{max-width:85%}} /* Leave a separate lane for classic and overlay scrollbars. */ #seafix-demo .sf-chat-conversation #sf-chat-messages, #seafix-demo .sf-mini-chat .sf-mini-messages, #seafix-demo .sc-panel .sc-messages.sc-messages { box-sizing:border-box; padding-right:16px; scrollbar-gutter:stable; } #seafix-demo .sc-panel .sc-messages.sc-messages{scrollbar-width:thin;overflow-x:hidden}