/* Support shares the existing chat geometry and theme. Original FYV icons are inline SVG. */
#seafix-demo .sc-panel[hidden],#seafix-demo .sc-panel [hidden],#seafix-demo .sc-pinned[hidden]{display:none!important}
#seafix-demo.sc-chat-open .sf-chat-conversation{display:none!important}
#seafix-demo .sc-panel{min-width:0;min-height:0;display:flex;flex-direction:column;color:var(--sf-text,#202124);height:100%;overflow:hidden}
#seafix-demo .sc-panel button,#seafix-demo .sc-pinned{font:inherit;color:inherit;cursor:pointer}
#seafix-demo .sc-panel button:disabled{opacity:.45;cursor:wait}
#seafix-demo .sc-panel svg,#seafix-demo .sc-pinned svg{width:23px;height:23px;flex-shrink:0}
#seafix-demo .sc-pinned{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:15px 2px 15px 10px;border:0;border-bottom:1px solid var(--sf-border,#dddfe4);background:transparent;text-align:left}
#seafix-demo .sc-pinned .sc-count{position:static}
#seafix-demo .sc-count[hidden]{display:none}
#seafix-demo.sc-chat-open .sc-pinned{background:transparent}
#seafix-demo.sc-chat-open .sf-chat-contact.is-selected{background:transparent;border-color:var(--sf-line)}
@media(min-width:760px){#seafix-demo.sc-chat-open .sc-pinned{background:light-dark(#dce0e6,#30333b);border-radius:0}#seafix-demo .sc-pinned{padding-left:14px;padding-right:0}}
#seafix-demo .sc-pinned>span:nth-child(2){flex:1;min-width:0}
#seafix-demo .sc-pinned strong,#seafix-demo .sc-pinned small{display:block}
#seafix-demo .sc-pinned strong{font-size:14px;font-weight:600}
#seafix-demo .sc-pinned small{font-size:12px;color:var(--sf-muted,#676b75);margin-top:4px}


#seafix-demo .sc-avatar>svg{width:22px;height:22px;stroke-width:1.7;color:var(--sf-muted)}
#seafix-demo .sc-avatar{width:48px;height:48px;flex-shrink:0;border-radius:50%;border:1px solid var(--sf-border,#dfe1e6);display:grid;place-items:center;background:var(--sf-surface-raised,#f5f5f7)}
#seafix-demo .sc-header{display:flex;align-items:center;gap:12px;min-height:80px;padding:8px 14px;background:transparent}
#seafix-demo .sc-header>div{flex:1;min-width:0}
#seafix-demo .sc-header strong,#seafix-demo .sc-header small{display:block}
#seafix-demo .sc-header strong{font-size:16px;font-weight:600}
#seafix-demo .sc-header small{font-size:13px;color:var(--sf-muted,#676b75);margin-top:5px}
#seafix-demo .sc-header button{border:0;background:transparent;padding:8px;border-radius:9px}
#seafix-demo [data-sc-resolve]{font-size:12px;background:var(--sf-surface-raised,#e8e9ed)}
#seafix-demo .sc-privacy{font-size:11px;color:var(--sf-muted,#676b75);margin:0 15px 12px}
#seafix-demo .sc-messages{flex:1;min-height:100px;overflow:auto;display:flex;flex-direction:column;align-items:flex-start;padding:14px;gap:10px;overscroll-behavior:contain}
#seafix-demo .sc-day{align-self:stretch;text-align:center;font-size:11px;color:var(--sf-muted,#676b75);padding:10px;border-top:1px solid var(--sf-border,#dfe1e6)}
#seafix-demo .sc-bubble{max-width:80%;flex-shrink:0;background:var(--sf-surface,#fff);border-radius:17px 17px 17px 4px;padding:13px 15px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
#seafix-demo .sc-bubble.sc-own{align-self:flex-end;background:#202124;color:#fff;border-radius:17px 17px 4px 17px}
#seafix-demo .sc-body{white-space:pre-wrap}
#seafix-demo .sc-welcome-body{white-space:normal}
#seafix-demo .sc-welcome-body p{margin:0 0 12px}
#seafix-demo .sc-welcome-body p:last-child{margin-bottom:0}
#seafix-demo .sc-panel .sc-protect-history{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;max-width:100%;margin-top:14px;padding:9px 13px;border:0;border-radius:10px;background:#23262c;color:#fff;font-size:13px;font-weight:600;line-height:20px;text-align:left}
#seafix-demo .sc-panel .sc-protect-history svg{width:18px;height:18px;flex:0 0 18px;background:none;border:0}
#seafix-demo .sc-panel .sc-protect-history:hover{background:#363a42}
#seafix-demo .sc-panel .sc-protect-history:focus-visible{outline:2px solid var(--sf-muted,#676b75);outline-offset:3px}
#seafix-demo .sc-bubble time{display:block;text-align:right;font-size:11px;opacity:.7;margin-top:5px}
#seafix-demo .sc-media{display:flex;gap:6px;flex-wrap:wrap;max-width:320px}
#seafix-demo .sc-media button{border:0;padding:0;background:transparent;color:inherit}
#seafix-demo .sc-media img{display:block;max-width:100%;max-height:320px;border-radius:9px;object-fit:contain}
#seafix-demo .sc-bottom{position:relative;flex-shrink:0;padding:115px 14px 16px}
#seafix-demo .sc-compose{display:flex;align-items:center;gap:10px;min-height:64px;padding:9px 12px;border:1px solid var(--sf-border,#dfe1e6);border-radius:19px;background:var(--sf-surface,#ffffffd9);backdrop-filter:blur(14px);box-shadow:0 3px 14px #00000004}
#seafix-demo .sc-compose textarea{resize:none;flex:1;min-width:0;max-height:120px;border:0;background:transparent;color:inherit;padding:8px 0;font:inherit;font-size:14px;outline-offset:4px}
#seafix-demo .sc-compose button{display:grid;place-items:center;border:0;background:transparent;width:38px;height:40px;padding:7px;flex-shrink:0}
#seafix-demo .sc-compose .sc-send{width:42px;height:42px;border-radius:50%;background:#202124;color:white}
#seafix-demo .sc-attach-menu{position:absolute;left:60px;bottom:86px;z-index:3;background:var(--sf-surface,#fff);padding:8px;border:1px solid var(--sf-border,#dfe1e6);border-radius:12px;box-shadow:0 6px 20px #0001}
#seafix-demo .sc-attach-menu button{display:flex;align-items:center;gap:12px;border:0;background:transparent;padding:11px;text-align:left;width:100%;font-size:13px}
#seafix-demo .sc-status{font-size:12px;padding:0 15px;min-height:0}
#seafix-demo .sc-status.is-error{color:var(--sf-danger,#a12635)}
#seafix-demo .sc-previews{display:flex;gap:8px;padding:8px 15px;flex-shrink:0}
#seafix-demo .sc-previews:empty{display:none}
#seafix-demo .sc-previews>div{position:relative}
#seafix-demo .sc-previews img{width:70px;height:70px;object-fit:contain;border:1px solid var(--sf-border,#ddd);border-radius:9px}
#seafix-demo .sc-previews button{position:absolute;right:0;top:0;background:var(--sf-surface,#fff);border:0;border-radius:50%;padding:3px}
#seafix-demo .sc-previews svg{width:15px;height:15px}
#seafix-demo .sc-lightbox{max-width:96vw;max-height:96dvh;padding:12px;border:0;border-radius:16px;background:var(--sf-surface,#fff);color:var(--sf-text,#222)}
#seafix-demo .sc-lightbox::backdrop{background:#000a}
#seafix-demo .sc-lightbox img{display:block;max-width:90vw;max-height:80dvh;object-fit:contain}
#seafix-demo .sc-lightbox button{display:block;margin:0 0 10px auto;padding:8px 15px}
#seafix-demo .sc-support-screen>:not(.sc-inbox){display:none!important}
#seafix-demo .sc-filters{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
#seafix-demo .sc-filters input,#seafix-demo .sc-filters select,#seafix-demo .sc-filters button{border:1px solid var(--sf-border,#ddd);border-radius:9px;padding:10px;background:var(--sf-surface,#fff);color:inherit;font:inherit;font-size:13px}
#seafix-demo .sc-workspace{display:grid;grid-template-columns:minmax(230px,32%) 1fr;height:calc(100dvh - 260px);min-height:420px;gap:14px}
#seafix-demo .sc-workspace>aside{overflow:auto;background:var(--sf-surface-raised,#e9eaef);border-radius:24px 24px 0 0}
#seafix-demo .sc-thread{position:relative;display:block;width:100%;padding:18px;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--sf-border,#ddd);color:inherit;font:inherit;cursor:pointer}
#seafix-demo .sc-thread strong,#seafix-demo .sc-thread small{display:block;padding-right:20px}
#seafix-demo .sc-thread small{margin-top:5px;color:var(--sf-muted,#676b75)}
#seafix-demo .sc-count{position:absolute;top:18px;right:10px;border-radius:50%;padding:3px 7px;background:#202124;color:#fff;font-size:11px}
#seafix-demo .sc-panel [data-sc-older]{border:0;background:transparent;padding:6px;font-size:12px;text-decoration:underline}
@media(min-width:760px){#seafix-demo .sc-header [data-sc-back]{display:none}}
@media(max-width:759px){
 #seafix-demo.sc-chat-open .sf-chat-layout{grid-template-columns:minmax(0,1fr)}
 #seafix-demo.sc-chat-open #sf-chat-roster-scroll{display:none!important}
 #seafix-demo.sc-chat-open .sc-panel{display:flex;grid-column:1/-1;width:100%}
 #seafix-demo .sc-header{min-height:68px;padding:8px;gap:8px}
 #seafix-demo .sc-header strong{font-size:14px}
 #seafix-demo .sc-header small{font-size:11px}
 #seafix-demo .sc-avatar{width:40px;height:40px}
  #seafix-demo .sc-bottom{padding-left:8px;padding-right:8px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
 #seafix-demo .sc-bubble{max-width:91%}
 #seafix-demo .sc-workspace{display:block;height:calc(100dvh - 255px)}
 #seafix-demo .sc-thread-open .sc-workspace>aside{display:none}
 #seafix-demo .sc-workspace>aside{height:100%}
}

#seafix-demo .sc-emoji-picker{display:flex;flex-wrap:wrap;gap:4px;padding:8px;border:1px solid var(--sf-line);border-radius:12px;background:var(--sf-surface);margin-bottom:8px}
#seafix-demo .sc-emoji-picker button{border:0;background:transparent;padding:7px;font-size:22px;border-radius:8px}
#seafix-demo .sc-compose{gap:5px}
#seafix-demo .sc-compose>button:not(.sc-send){width:32px;padding:5px}
#seafix-demo .sc-compose>button svg{width:20px;height:20px;stroke-width:1.7}
#seafix-demo .sc-body .sf-chat-sticker-image{max-width:100%;height:auto}

/* Match the main conversation's grid, header and composer dimensions. */
#seafix-demo .sf-chat-layout>.sc-panel{grid-column:2;grid-row:1;align-self:stretch;width:100%;height:100%;max-width:none;box-sizing:border-box;padding:0 0 20px}
#seafix-demo .sc-header{flex:none;min-height:64px;padding:0 0 14px;gap:12px;box-sizing:border-box}
#seafix-demo .sc-header strong{font-size:16px;line-height:20px}
#seafix-demo .sc-privacy{margin:0 2px 8px}
#seafix-demo .sc-messages{padding:16px 2px;min-height:0}
#seafix-demo .sc-bottom{padding-left:0;padding-right:0;padding-bottom:0}
#seafix-demo .sc-compose{display:flex;align-items:flex-end;flex:none;min-width:0;min-height:0;margin:0;padding:7px 9px;gap:8px;border:1px solid var(--sf-line);border-radius:16px;background:light-dark(rgb(255 255 255 / .82),rgb(36 38 44 / .82));box-shadow:0 2px 12px rgb(0 0 0 / .04);backdrop-filter:blur(22px) saturate(130%)}
#seafix-demo .sc-compose textarea{flex:1;width:0;min-width:0;min-height:42px;max-height:132px;margin:0;padding:10px 12px;border:0;border-radius:10px;box-shadow:none;outline:0;background:transparent;color:var(--sf-text);font:inherit;font-size:14px;line-height:22px;overflow-y:auto;box-sizing:border-box;order:0}
#seafix-demo .sc-compose>button:not(.sc-send){display:grid;place-items:center;flex:0 0 32px;width:32px;height:42px;padding:0;border:0;border-radius:10px;color:var(--sf-muted);background:transparent}
#seafix-demo .sc-compose>[data-sc-attach]{order:-1}
#seafix-demo .sc-compose>[data-sc-emoji]{order:1}
#seafix-demo .sc-compose>.sf-chat-sticker-toggle{order:2}
#seafix-demo .sc-compose>.sc-send{order:3;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 .sc-compose>button svg{width:22px!important;height:22px!important;stroke-width:1.7}
#seafix-demo .sc-compose>.sc-send svg{width:19px!important;height:19px!important;stroke-width:2}
#seafix-demo .sc-compose>button:not(.sc-send):is(:hover,[aria-expanded=true]){background:var(--sf-chat-field);color:var(--sf-heading)}
#seafix-demo .sc-compose:focus-within{border-color:var(--sf-muted)}
#seafix-demo .sc-floating{position:fixed;z-index:80;right:20px;bottom:16px;width:min(390px,calc(100vw - 24px));height:min(560px,calc(100dvh - 100px));max-width:none;padding:12px;box-sizing:border-box;border:1px solid var(--sf-line);border-radius:16px;background:var(--sf-canvas);box-shadow:0 8px 30px #0002}
#seafix-demo .sc-floating.sc-folded{height:auto}
#seafix-demo .sc-floating.sc-folded>:not(.sc-header){display:none!important}
#seafix-demo .sc-floating .sc-header{padding:0;min-height:48px;gap:6px}
#seafix-demo .sc-floating .sc-header strong{font-size:13px}
#seafix-demo .sc-floating .sc-header small{font-size:11px}
#seafix-demo .sc-floating .sc-avatar{width:34px;height:34px}
#seafix-demo .sc-floating .sc-hint{display:none}
#seafix-demo .sc-floating .sc-bottom{padding-top:0}
#seafix-demo .sc-floating .sc-header [data-sc-back]{display:grid}
@media(max-width:759px){
 #seafix-demo .sf-chat-layout>.sc-panel{grid-column:1/-1;padding:0 0 3px}
 #seafix-demo .sc-header{min-height:68px;padding:8px 0;gap:8px}
 #seafix-demo .sc-header strong{font-size:14px}
 #seafix-demo .sc-compose{padding:6px;gap:4px;border-radius:24px}
 #seafix-demo .sc-compose textarea{font-size:16px;padding-left:7px}
 #seafix-demo .sc-compose>[data-sc-emoji],#seafix-demo .sc-compose>.sf-chat-sticker-toggle{order:-1}
 #seafix-demo .sc-bottom{padding-bottom:max(3px,env(safe-area-inset-bottom))}
 #seafix-demo .sc-floating{right:12px;bottom:calc(72px + env(safe-area-inset-bottom));height:min(480px,calc(100dvh - 160px))}
 #seafix-demo .sc-floating.sc-folded{height:auto}
}




/* Support uses the same 72px row as a regular conversation, without a pin. */
#seafix-demo .sc-pinned{box-sizing:border-box;height:72px;min-height:72px;max-height:72px;flex:0 0 72px;padding:6px 14px;gap:10px}
#seafix-demo .sc-pinned>.sc-avatar{box-sizing:border-box;flex:0 0 44px;width:44px;height:44px}
#seafix-demo .sc-pinned strong{font-size:13px;line-height:18px}
#seafix-demo .sc-pinned small{font-size:12px;line-height:16px;margin-top:4px}
#seafix-demo .sc-unread-slot{display:flex;align-items:center;justify-content:center;flex:0 0 26px;width:26px;margin-left:auto}
#seafix-demo .sc-unread-slot:empty{display:none}

/* The administrator uses the same full-height chat shell and conversation. */
#seafix-demo.sc-admin-view .sf-main>[data-screen="support"]{width:100%;max-width:none;height:100%;min-height:0;margin:0;padding:0;overflow:hidden}
#seafix-demo .sc-inbox{height:100%;min-height:0;overflow:hidden}
#seafix-demo .sc-inbox .sc-workspace{height:100%;min-height:0;width:100%;margin:0;grid-template-columns:var(--sf-chat-roster-width,290px) minmax(0,1fr);gap:14px}
#seafix-demo .sc-admin-roster{display:flex;flex-direction:column;height:100%;min-height:0;padding:6px 0 0;overflow:hidden;background:light-dark(#e9eaee,#202126);border-radius:24px 24px 0 0}
#seafix-demo .sc-admin-toolbar{flex:none;min-height:48px;display:flex;align-items:center;margin:0 12px;padding:10px 8px;box-sizing:border-box;border-bottom:1px solid var(--sf-line);font-size:16px;font-weight:600}
#seafix-demo .sc-admin-roster .sc-filters{display:block;flex:none;margin:8px 12px 0}
#seafix-demo .sc-admin-roster .sc-filters input{box-sizing:border-box;width:100%;min-width:0;height:44px;background:var(--sf-surface);border:1px solid var(--sf-line);border-radius:10px;font-size:14px}
#seafix-demo .sc-admin-filters{padding:8px 0;color:var(--sf-muted);font-size:13px}
#seafix-demo .sc-admin-filters summary{cursor:pointer;padding:6px}
#seafix-demo .sc-admin-filters>div{display:grid;gap:8px;padding:8px 0}
#seafix-demo .sc-admin-filters select{width:100%;min-width:0}
#seafix-demo .sc-admin-roster .sc-inbox-status{flex:none;margin:0 14px;font-size:12px;color:var(--sf-muted)}
#seafix-demo .sc-admin-roster .sc-inbox-status:empty{display:none}
#seafix-demo .sc-admin-roster .sc-threads{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
#seafix-demo .sc-admin-roster .sc-thread{display:flex;align-items:center;gap:10px;height:72px;box-sizing:border-box;padding:6px 14px;border-bottom:1px solid var(--sf-line)}
#seafix-demo .sc-admin-roster .sc-thread.is-selected{background:light-dark(#dce0e6,#30333b)}
#seafix-demo .sc-admin-roster .sc-thread:hover:not(.is-selected){background:light-dark(#dfe2e8,#2a2c33)}
#seafix-demo .sc-admin-roster .sf-chat-avatar{flex:0 0 44px;width:44px;height:44px;font-size:15px}
#seafix-demo .sc-thread-copy{flex:1;min-width:0}
#seafix-demo .sc-thread-copy strong,#seafix-demo .sc-thread-copy small{padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#seafix-demo .sc-thread-copy strong{font-size:13px;line-height:18px;font-weight:600}
#seafix-demo .sc-thread-copy small{font-size:12px;line-height:16px;margin-top:4px}
#seafix-demo .sc-thread-count{flex:none}
#seafix-demo .sc-thread-count .sc-count{position:static}
#seafix-demo .sc-admin-roster [data-sc-more]{flex:none;border:0;background:transparent;color:var(--sf-muted);padding:12px;font:inherit;font-size:12px}
#seafix-demo .sc-admin-empty{grid-column:2;grid-row:1;align-self:center;text-align:center;padding:24px;color:var(--sf-muted)}
#seafix-demo .sc-admin-empty[hidden]{display:none!important}
#seafix-demo .sc-empty-icon svg{width:32px;height:32px}
#seafix-demo .sc-admin-empty h3{font-size:16px;color:var(--sf-text)}
#seafix-demo .sc-admin-empty p{font-size:13px}
#seafix-demo .sc-inbox .sc-panel{grid-column:2;grid-row:1}
#seafix-demo .sc-inbox [data-sc-resolve]{font-size:12px}
@media(max-width:759px){
 #seafix-demo .sc-inbox .sc-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
 #seafix-demo .sc-inbox .sc-admin-empty{display:none}
 #seafix-demo .sc-inbox .sc-panel{grid-column:1;grid-row:1}
 #seafix-demo .sc-inbox.sc-thread-open .sc-admin-roster{display:none}
 #seafix-demo .sc-inbox .sc-header{flex-wrap:wrap}
 #seafix-demo .sc-inbox [data-sc-resolve]{order:4;margin-left:auto;padding:5px 8px}
}

#seafix-demo .sc-bottom{padding-top:0}

/* Keep support composition in step with the regular CrewChat/FleetChat controls. */
#seafix-demo .sc-panel .sc-compose textarea,
#seafix-demo .sc-panel .sc-compose textarea:focus{border:0;outline:0;box-shadow:none;background:transparent;resize:none}
#seafix-demo .sc-panel:not(.sc-floating) .sc-compose{background:rgb(255 255 255 / .72);-webkit-backdrop-filter:blur(22px) saturate(130%)}
#seafix-demo .sc-panel .sc-compose>[data-sc-attach]{order:-2}
#seafix-demo .sc-panel .sc-compose textarea::placeholder{color:#686a70}
#seafix-demo .sc-attach-menu{left:0;bottom:calc(100% + 8px);max-width:100%;box-sizing:border-box}
#seafix-demo .sc-status:empty,#seafix-demo .sc-previews:empty{display:none}
/* The compact support window follows the existing 310px / 410px chat dock. */
#seafix-demo .sc-panel.sc-floating{
 --sf-mini-nav:0px;right:max(var(--sf-page-gutter,16px),calc((100vw - var(--sf-shell-width,1240px)) / 2 + var(--sf-page-gutter,16px)));
 bottom:0;width:min(310px,calc(100% - 2 * var(--sf-page-gutter,16px)));height:min(410px,calc(var(--sf-viewport-height,100dvh) - var(--sf-header-height,80px) - var(--sf-mini-nav) - 20px));
 max-height:calc(var(--sf-viewport-height,100dvh) - var(--sf-mini-nav) - 20px);padding:0;border:1px solid var(--sf-line);border-bottom:0;border-radius:13px 13px 0 0;background:var(--sf-chat-paper);box-shadow:0 -3px 24px rgb(0 0 0 / .10)
}
#seafix-demo .sc-panel.sc-floating.sc-folded{height:auto}
#seafix-demo .sc-floating .sc-header{flex:none;min-height:52px;padding:6px 8px 6px 10px;gap:8px;border-bottom:1px solid var(--sf-line);background:var(--sf-chat-field)}
#seafix-demo .sc-floating.sc-folded .sc-header{border-bottom-color:transparent}
#seafix-demo .sc-floating .sc-header>div:not(.sc-mini-controls){display:flex;flex-direction:column;gap:3px}
#seafix-demo .sc-floating .sc-header strong{font-size:12px;line-height:15px;color:var(--sf-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#seafix-demo .sc-floating .sc-header small{margin:0;font-size:10px;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#seafix-demo .sc-floating .sc-avatar{flex:0 0 30px;width:30px;height:30px;font-size:10px}
#seafix-demo .sc-floating .sc-avatar svg{width:18px;height:18px}
#seafix-demo .sc-floating .sc-header button{flex:none;width:26px;height:30px;padding:0;border-radius:7px;color:var(--sf-muted)}
#seafix-demo .sc-floating .sc-header button svg{width:14px!important;height:14px!important}
#seafix-demo .sc-floating .sc-header [data-sc-back]{order:5}
#seafix-demo .sc-floating .sc-header [data-sc-resolve]{display:none}
#seafix-demo .sc-floating .sc-privacy{display:none}
#seafix-demo .sc-floating .sc-messages{gap:7px;padding:12px 11px;scrollbar-width:thin}
#seafix-demo .sc-floating .sc-bubble{max-width:90%;padding:8px 10px;border-radius:14px 14px 14px 4px;background:#fff;color:#17191d;font-size:12px}
#seafix-demo .sc-floating .sc-bubble.sc-own{border-radius:14px 14px 4px 14px;background:#101113;color:#fff}
#seafix-demo .sc-floating .sc-bubble time{font-size:9px}
#seafix-demo .sc-floating .sc-bottom{padding:0 10px 10px}
#seafix-demo .sc-floating .sc-compose{gap:4px;padding:4px;border-radius:12px;background:#fff;color:#17191d;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#seafix-demo .sc-floating .sc-compose textarea{min-height:38px;max-height:88px;padding:8px 6px;border-radius:8px;font-size:12px;line-height:20px;color:#17191d;order:0}
#seafix-demo .sc-floating .sc-compose>button{flex:0 0 26px;width:26px;min-width:26px;height:38px;padding:0;margin:0;border-radius:9px}
#seafix-demo .sc-floating .sc-compose>.sc-send{flex-basis:34px;width:34px;min-width:34px;background:#101113;color:#fff}
#seafix-demo .sc-floating .sc-compose>button svg{width:17px!important;height:17px!important}
#seafix-demo .sc-floating .sc-compose>[data-sc-emoji]{order:1}
#seafix-demo .sc-floating .sc-compose>.sf-chat-sticker-toggle{order:2}
#seafix-demo .sc-floating .sc-status{flex:none;padding:0 10px;font-size:11px}
#seafix-demo .sc-floating .sc-previews{flex:none;max-height:80px;overflow:auto;padding:0 10px}
#seafix-demo.is-logged-out .sc-floating,#seafix-demo.is-starting .sc-floating{display:none!important}
@media(max-width:759px){
 #seafix-demo .sc-panel:not(.sc-floating) .sc-compose{background:#f8f8fa;backdrop-filter:none;-webkit-backdrop-filter:none}
 #seafix-demo .sc-panel.sc-floating{--sf-mini-nav:var(--sf-nav-height,72px);right:10px;top:calc(var(--sf-viewport-top,0px) + var(--sf-viewport-height,100dvh) - var(--sf-mini-nav) - 8px);bottom:auto;transform:translateY(-100%);width:calc(100% - 20px);height:min(340px,max(130px,calc(var(--sf-viewport-height,100dvh) - var(--sf-mini-nav) - 126px)))}
 #seafix-demo .sc-panel.sc-floating.sc-folded{height:auto}
 #seafix-demo .sc-floating .sc-compose textarea{font-size:16px}
}
@media print{#seafix-demo .sc-floating{display:none!important}}

/* Support remains a familiar mini-chat, with only a quiet visual distinction. */
@media (min-width:760px){
  #seafix-demo .sc-panel.sc-floating.sc-folded .sc-header{
    background:color-mix(in srgb,var(--sf-chat-field) 95%,var(--sf-muted) 5%);
    box-shadow:inset 0 1px 0 color-mix(in srgb,var(--sf-line) 60%,transparent);
  }
  /* Reserve the rightmost mini-chat slot for Support. Shift the existing
     crew dock left without changing its controls, dimensions or palette. */
  #seafix-demo:has(.sc-panel.sc-floating:not([hidden])) .sf-chat-dock:not([hidden]){
    right:calc(max(var(--sf-page-gutter,16px), (100vw - var(--sf-shell-width,1240px)) / 2 + var(--sf-page-gutter,16px)) + 322px);
    max-width:calc(100vw - 322px - 2 * var(--sf-page-gutter,16px));
  }
}

/* Match CrewChat's compact control capsule, without altering its own dock. */
#seafix-demo .sc-panel .sc-header .sc-mini-controls{display:contents}
#seafix-demo .sc-panel.sc-floating .sc-header .sc-mini-controls{
  display:flex;flex-direction:row;flex:0 0 auto;align-items:center;gap:2px;padding:2px;
  border:1px solid var(--sf-line);border-radius:9px;background:var(--sf-chat-paper)
}
#seafix-demo .sc-panel.sc-floating .sc-header .sc-mini-controls>button{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:28px;padding:0;border:0;border-radius:6px;background:transparent
}
#seafix-demo .sc-panel.sc-floating .sc-header .sc-mini-controls>button[hidden]{display:none!important}
#seafix-demo .sc-panel.sc-floating .sc-header .sc-mini-controls [data-sc-back]{order:initial}
#seafix-demo .sc-panel.sc-floating .sc-header .sc-mini-controls button svg{width:14px!important;height:14px!important;stroke-width:1.7}
#seafix-demo .sc-panel.sc-floating .sc-header>div:not(.sc-mini-controls){flex:1;min-width:0}


#seafix-demo .sc-floating.sc-folded.sc-has-unread .sc-header{background:light-dark(#e9eaed,#33363d)}
#seafix-demo .sc-floating.sc-folded .sc-header{cursor:pointer}
#seafix-demo .sc-header .sc-avatar{position:relative}
#seafix-demo .sc-header .sc-incoming-count{position:absolute;top:-4px;right:-4px;display:grid;place-items:center;min-width:16px;height:16px;padding:0 4px;font-size:10px;box-sizing:border-box;pointer-events:none}
#seafix-demo .sc-header .sc-incoming-count[hidden]{display:none}
@media(max-width:999px){#seafix-demo:is(.fv-no-vessel,.fv-on-fleet) .sc-panel.sc-floating{--sf-mini-nav:env(safe-area-inset-bottom,0px)}}

#seafix-demo .sc-avatar { position:relative; }
#seafix-demo .sc-presence { position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border:2px solid var(--sf-canvas,#f5f5f7); border-radius:50%; background:#c7354d; }
#seafix-demo .sc-presence[data-online="true"] { background:#29965c; }
@media(max-width:759px){
 #seafix-demo .sc-header [data-sc-minimize],#seafix-demo .sc-header [data-sc-maximize] { display:none!important; }
 #seafix-demo .sf-topbar > .sc-header { display:flex; width:100%; min-height:68px; padding:0; gap:8px; }
 #seafix-demo .sc-header [data-sc-back] { order:-2; flex:0 0 30px; width:30px; padding:4px; }
 #seafix-demo.sc-chat-open .sc-panel > .sc-privacy { margin:0 2px 6px; font-size:10px; }
 #seafix-demo.sc-chat-open .sc-bottom { padding-bottom:3px; }
}
@media(max-width:759px){#seafix-demo .sf-topbar > .sc-header .sc-mini-controls { display:contents; }}

/* Match the peer roster and promoted conversation header. */
#seafix-demo .sc-pinned{height:auto;max-height:none;flex:0 0 auto;min-height:72px;padding:6px 14px;gap:10px;border-bottom-color:var(--sf-line);box-sizing:border-box}
#seafix-demo .sc-pinned .sc-avatar{box-sizing:border-box;width:44px;height:44px;flex:0 0 44px;border-color:var(--sf-line)}
#seafix-demo .sc-pinned>span:nth-child(2){display:flex;flex-direction:column;justify-content:center;gap:3px}
#seafix-demo .sc-pinned strong{font-size:13px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#seafix-demo .sc-pinned small{font-size:12px;line-height:16px;margin:0}
#seafix-demo .sc-presence{width:12px;height:12px;right:-1px;bottom:0;background:#c43b4b;box-sizing:border-box}
#seafix-demo .sc-presence[data-online=true]{background:#259454}
#seafix-demo .sc-search{flex:none;max-height:45%;overflow:auto;padding:8px;border-bottom:1px solid var(--sf-line)}
#seafix-demo .sc-search-form{display:flex;align-items:center;gap:8px}
#seafix-demo .sc-search-form input{flex:1;min-width:0;width:100%;padding:10px;border:1px solid var(--sf-line);border-radius:10px;background:var(--sf-surface);color:var(--sf-text);font:inherit}
#seafix-demo .sc-search-form button{flex:none;border:0;background:transparent;padding:8px}
#seafix-demo .sc-search-results article{padding:10px 0;border-bottom:1px solid var(--sf-line);overflow-wrap:anywhere}
#seafix-demo .sc-search-results p{white-space:pre-wrap;margin:4px 0}
#seafix-demo .sc-search-results small,#seafix-demo .sc-search-status{color:var(--sf-muted);font-size:12px}
@media(max-width:759px){
 #seafix-demo .sc-pinned{min-height:80px;padding:10px 8px;gap:12px}
 #seafix-demo .sc-pinned strong{font-size:14px}
 #seafix-demo.sf-phone-header.sf-chat-header-promoted .sf-topbar>.sc-header{width:100%;min-width:0;min-height:64px;gap:8px;margin:0;padding:4px 0;border:0;box-sizing:border-box}
 #seafix-demo .sf-topbar>.sc-header .sc-avatar{box-sizing:border-box;width:46px;height:46px;flex:0 0 46px}
 #seafix-demo .sf-topbar>.sc-header [data-sc-back]{display:grid;place-items:center;order:-2;flex:0 0 28px;width:28px;height:36px;padding:0;border-radius:10px;color:var(--sf-muted)}
 #seafix-demo .sf-topbar>.sc-header [data-sc-back] svg{width:17px!important;height:17px!important;stroke-width:2}
 #seafix-demo .sf-topbar>.sc-header [data-sc-search]{display:grid;place-items:center;width:32px;height:36px;padding:0;color:var(--sf-muted)}
 #seafix-demo .sf-topbar>.sc-header [data-sc-search] svg{width:18px!important;height:18px!important}
 #seafix-demo .sc-search-form input{font-size:16px}
}
@media(max-width:759px){
 #seafix-demo.sf-phone-header.sc-chat-open .sc-panel:not(.sc-floating){overflow:visible}
 #seafix-demo.sf-phone-header.sc-chat-open .sc-messages{margin-top:calc(-1 * var(--sf-header-underlap,0px));padding-top:var(--sf-header-underlap,0px);scroll-padding-top:calc(var(--sf-header-underlap,0px) + 12px)}
}
#seafix-demo .sc-header{position:relative;z-index:25}
#seafix-demo .sc-search,#seafix-demo .sc-privacy,#seafix-demo [data-sc-older]{position:relative;z-index:2}
#seafix-demo .sc-search{background:var(--sf-canvas)}
@media(max-width:759px){
 #seafix-demo .sf-topbar>.sc-header>div:not(.sc-mini-controls){display:flex;flex-direction:column;justify-content:center;height:46px;gap:2px}
 #seafix-demo .sf-topbar>.sc-header strong{margin:0;font-size:13px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #seafix-demo .sf-topbar>.sc-header small{margin:0;font-size:11px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

#seafix-demo .sc-thread .sf-chat-avatar{position:relative}
#seafix-demo .sc-receipt{display:block;text-align:right;font-size:10px;line-height:16px;opacity:.75}
#seafix-demo .sc-receipt[data-read=true]{opacity:1}
#seafix-demo .sc-peer-status{white-space:nowrap}

/* Give CrewChat Support more room for actual conversation. */
/* The shared viewport already tracks the keyboard. Release the dock's grid
   row and home-indicator spacing while typing in full-screen Support. */
@media(max-width:999px){
 #seafix-demo.sc-chat-open.sf-keyboard-open .sf-dock-frame{display:none;transition:none}
 #seafix-demo.sc-chat-open.sf-keyboard-open .sf-chat-layout>.sc-panel:not(.sc-floating){padding-bottom:0}
 #seafix-demo.sc-chat-open.sf-keyboard-open .sc-panel:not(.sc-floating) .sc-bottom{padding-bottom:2px}
}
#seafix-demo .sf-chat-layout>.sc-panel>.sc-header{min-height:52px;padding-block:5px 7px;gap:9px}
#seafix-demo .sc-panel:not(.sc-floating) .sc-header small{margin-top:2px}
@media(max-width:759px){#seafix-demo .sc-panel:not(.sc-floating)>.sc-header{min-height:54px;padding-block:4px 6px}}