@font-face{font-family:ExpressaSerial;src:url('/brand/ExpressaSerial-Xbold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}

@font-face{font-family:Futura;src:url('/brand/Futura-Book.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

@font-face{font-family:Futura;src:url('/brand/Futura-Medium.ttf') format('truetype');font-weight:500 600;font-style:normal;font-display:swap}

@font-face{font-family:Futura;src:url('/brand/Futura-Bold.ttf') format('truetype');font-weight:700 900;font-style:normal;font-display:swap}

:root{--bg:#f5f8fc;--surface:#fff;--green:#163590;--green-dark:#002549;--muted:#627a90;--ink:#002549;--line:#dce5ef;--soft:#edf4fc;--accent:#d9f3fc;--serif:'ExpressaSerial',Arial,sans-serif;--body:'Futura',Arial,sans-serif;font-family:var(--body);color:var(--ink);background:var(--bg);font-size:14px}
*{box-sizing:border-box}
body{margin:0}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.55;cursor:wait}
button,input{outline-offset:4px}
button{border:0}
button:focus-visible,a:focus-visible{outline:2px solid #163590}
input{min-width:0}
button, a, input{ -webkit-tap-highlight-color:transparent}
button{color:inherit}
a{color:var(--green)}
[hidden]{display:none!important}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:0;letter-spacing:0}
.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:700;color:#59738d}
h1,h2,p{margin:0}
h1{font-family:var(--serif);font-weight:800;font-size:36px;letter-spacing:-.5px}
h2{font-size:15px;font-weight:600}
p{line-height:1.65}
.primary,.secondary{padding:12px 16px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:43px;font-size:12px;font-weight:600}
.primary{background:var(--green);color:#fff}
.primary:hover{background:#002549}
.primary span{margin-left:auto}
.secondary{background:white;border:1px solid #d3deed}
.secondary:hover{background:#edf4fc}
.icon-button{background:transparent;font-size:22px;line-height:1;padding:4px 7px;border-radius:4px}
.icon-button:hover{background:#e4effc}
.app{display:grid;grid-template-columns:218px minmax(0,1fr);min-height:100vh}
.sidebar{background:#edf3fa;border-right:1px solid var(--line);padding:30px 18px 18px;display:flex;flex-direction:column;height:100vh;position:sticky;top:0}
.sidebar .brand{padding:0 0 25px}
.workspace-label{display:flex;gap:10px;align-items:center;padding:15px 8px 25px;font-size:12px;font-weight:600;border-top:1px solid #d5e0ef}
.workspace-label small{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-top:4px}
.workspace-icon{height:30px;width:30px;border:1px solid #c9d9ef;background:#dce9fb;border-radius:7px;display:grid;place-items:center}
.lock-icon{margin-left:auto;color:#607c98}
.nav-heading{display:flex;align-items:center;justify-content:space-between;color:#5c7691;font-size:10px;font-weight:600;letter-spacing:1.5px;padding:5px 9px 13px}
nav{overflow:auto;max-height:48vh}
.client-item{display:flex;align-items:center;gap:10px;width:100%;background:transparent;text-align:left;padding:12px 10px;border-radius:7px;margin-bottom:6px;font-size:12px}
.client-item.active{background:#dceafc;color:#163590;font-weight:600}
.client-item:hover{background:#e4edfa}
.client-initial{display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:white;border:1px solid #d4dfed;font-size:10px}
.client-item .tiny-dot{margin-left:auto;flex-shrink:0}
.tiny-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#7b8fa6}
.tiny-dot.open{background:#163590}
.tiny-dot.demo{background:#163590}
.tiny-dot.close,.tiny-dot.unreachable{background:#b56e24}
.add-client{background:transparent;text-align:left;font-size:11px;color:#53718f;padding:15px 10px}
.sidebar-bottom{margin-top:auto;padding:20px 7px 0}
.mode-toggle{width:100%;background:#f0f6ff;border:1px solid #cbdaf3;color:#163590;padding:11px 7px;border-radius:6px;font-size:11px}
.sidebar-bottom p{font-size:10px;color:#627a90;margin-top:19px}
.logout{background:transparent;color:#55728f;font-size:11px;padding:10px 0 22px}
.sidebar-footer{border-top:1px solid #cfdded;padding-top:15px;font-size:7px;letter-spacing:.6px;display:flex;align-items:center;gap:5px;color:#5b7897}
.sidebar-footer span:last-child{margin-left:auto;letter-spacing:0}
.workspace{min-width:0}
.topbar{height:65px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 33px;background:#ffffff}
.breadcrumb{font-size:11px;color:#607a94}
.breadcrumb span{padding:0 12px;color:#91a8bf}
.breadcrumb strong{color:#163590;font-weight:400}
.private-pill{color:#163590;font-size:10px;border:1px solid #d7e4f7;border-radius:20px;padding:6px 10px;background:#edf4fc}
.page-heading{display:flex;align-items:center;justify-content:space-between;padding:30px 34px 25px;gap:15px}
.page-heading h1{margin:10px 0 8px}
.page-heading p{color:#5c7490;font-size:12px}
.heading-actions{padding-top:18px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.stats{margin:0 34px 25px;display:grid;grid-template-columns:1fr 1fr 1.25fr;border:1px solid var(--line);border-radius:9px;background:#fff;padding:20px 0}
.stats>div{padding:0 24px;border-right:1px solid var(--line);display:grid;gap:8px}
.stats>div:last-child{border:0}
.stats span{font-size:10px;color:#5d7692}
.stats strong{font-family:var(--body);font-size:32px;font-weight:500;line-height:1.1}
.stats small{font-size:9px;color:#6c8299}
.stats .state-stat{font-family:var(--body);font-size:15px;line-height:33px;display:flex;align-items:center;gap:9px}
.stats .state-stat:before{content:'';width:7px;height:7px;background:#879cb0;border-radius:50%}
.stats .state-stat.connected:before{background:#163590}
.inbox{margin:0 34px;display:grid;grid-template-columns:310px minmax(0,1fr);grid-template-rows:minmax(0,1fr);border:1px solid var(--line);border-radius:9px;overflow:hidden;background:white;height:calc(100vh - 397px);min-height:400px}
.conversation-panel{display:flex;flex-direction:column;border-right:1px solid var(--line);min-width:0;min-height:0;overflow:hidden;background:#fff}
.list-heading{display:flex;align-items:center;justify-content:space-between;padding:21px 18px 17px}
.list-heading h2{font-size:12px}
.list-heading h2 span{margin-left:6px;color:#163590;background:#edf4fc;padding:3px 5px;border-radius:4px;font-size:9px}
.list-heading>span{color:#65809c}
.search-wrap{display:flex;align-items:center;margin:0 15px 19px;background:#f5f8fc;border:1px solid #dce5ef;border-radius:6px;padding:0 10px;gap:7px;height:35px}
.search-wrap>span{font-size:22px;color:#5a7592}
.search-wrap input{background:transparent;border:0;outline:none;width:100%;font-size:10px;color:#002549}
.search-wrap input::placeholder{color:#6a829b}
.search-wrap kbd{font-size:8px;white-space:nowrap;color:#738aa1}
.list-meta{display:flex;justify-content:space-between;padding:0 17px 14px;font-size:7px;letter-spacing:.8px;color:#607a95}
.list-meta span{font-size:8px;letter-spacing:0}
.conversation-list{overflow:auto;flex:1;min-height:0;overscroll-behavior:contain}
.conversation-panel>.list-heading,.conversation-panel>.search-wrap,.conversation-panel>.list-meta,.conversation-panel>.load-more{flex-shrink:0}
.conversation-item{position:relative;display:flex;align-items:flex-start;gap:11px;width:100%;padding:19px 17px;border-top:1px solid #e7edf5;background:white;text-align:left;min-height:85px}
.conversation-item:hover{background:#f4f8fe}
.conversation-item.active{background:#e7f1ff}
.conversation-item.active:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#12bff4}
.avatar{width:35px;height:35px;background:#e3edfa;color:#163590;border-radius:50%;display:grid;place-items:center;font-family:var(--body);font-size:15px;flex-shrink:0}
.avatar.tone-1{background:#ddf4fc;color:#00557a}
.avatar.tone-2{background:#edf1f9;color:#4c6484}
.conversation-text{min-width:0;flex:1}
.conversation-row{display:flex;align-items:center;gap:5px;justify-content:space-between;margin:2px 0 8px}
.conversation-name{font-size:11px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.conversation-time{font-size:8px;color:#627b95;white-space:nowrap}
.conversation-preview{font-size:10px;color:#627b95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
.conversation-count{font-size:8px;color:#607b96;margin-top:5px}
.chat-panel{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#f6f9fd}
.chat-header,.chat-tools,.chat-footer{flex-shrink:0}
.chat-header{padding:17px 23px;border-bottom:1px solid var(--line);background:#fff;display:flex;gap:12px;align-items:center;min-height:76px}
.chat-person h2{font-size:12px}
.chat-person p{font-size:9px;color:#647d97;margin-top:5px}
.chat-header .archived-pill{margin-left:auto;white-space:nowrap;font-size:8px;color:#163590;background:#eaf1ff;padding:6px 8px;border:1px solid #d6e3f9;border-radius:5px}
.chat-tools{padding:10px 20px;background:#f5f8fd;border-bottom:1px solid #e0e8f2;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:9px;color:#627b95}
.chat-tools label{display:flex;align-items:center;gap:7px}
.chat-tools input{font-size:9px;color:#56738f;border:1px solid #d6e1f0;background:white;border-radius:4px;padding:3px}
.chat-tools button{font-size:9px;background:transparent;color:#163590}
.chat-tools #latest-messages{white-space:nowrap;padding:5px 8px;border:1px solid #d6e1f0;border-radius:4px;background:white}
.message-list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px 26px;overscroll-behavior:contain;scrollbar-gutter:stable;scroll-behavior:auto}
.day-divider{text-align:center;margin:4px 0 21px}
.day-divider span{font-size:8px;color:#5c7895;border:1px solid #dbe5f2;border-radius:4px;padding:5px 10px;background:#edf3fc}
.message{max-width:79%;width:fit-content;padding:12px 14px 7px;border:1px solid #dce5ef;border-radius:0 10px 10px 10px;background:white;margin:0 0 15px;box-shadow:0 1px 1px #00254904}
.message.outgoing{margin-left:auto;background:#e3f4fd;border-color:#cce8f6;border-radius:10px 0 10px 10px}
.message .sender{font-size:8px;font-weight:600;color:#163590;margin-bottom:6px}
.message .text{font-size:11px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;color:#163a60}
.message .time{text-align:right;font-size:8px;color:#627b95;margin-top:6px}
.message img,.message video{display:block;max-width:100%;max-height:280px;border-radius:5px}
.message audio{display:block;max-width:100%;width:250px}
.message .media-link{display:inline-block;font-size:10px;margin:7px 0}
.media-state{font-size:10px;color:#8c6225;padding:8px 0}
.media-state button{font-size:10px;color:#163590;text-decoration:underline;background:transparent}
.chat-footer{padding:13px 18px;border-top:1px solid var(--line);background:#edf4fc;color:#627b95;text-align:center;font-size:9px;line-height:1.5}
.empty-chat{margin:auto;padding:35px;text-align:center}
.empty-symbol{font-size:35px;line-height:68px;background:#e5f1ff;border:1px solid #d2e4fa;border-radius:20px;color:#163590;width:72px;height:72px;margin:0 auto 25px;transform:rotate(-5deg)}
.empty-chat h2{font-family:var(--body);font-size:25px;font-weight:500;color:#163590;margin-bottom:12px}
.empty-chat p{font-size:11px;color:#627b95}
.empty-caption{display:block;font-size:7px;letter-spacing:1.5px;color:#71869c;margin-top:45px}
.workspace-footer{display:flex;justify-content:space-between;margin:18px 34px;font-size:8px;color:#5f7891;gap:15px}
.demo-banner{background:#ebf3ff;border-bottom:1px solid #ccdef7;color:#163590;padding:9px 33px;display:flex;justify-content:space-between;gap:10px;font-size:10px}
.demo-banner button{font-size:10px;background:transparent;color:#163590;text-decoration:underline}
.issue-banner{padding:10px 15px;margin:0 34px 15px;background:#fff3e3;border:1px solid #ecd8b8;border-radius:6px;font-size:11px;color:#8c6027}
.load-more{background:transparent;color:#163590;font-size:10px;padding:12px}
.empty-list{padding:30px 20px;color:#607a94;font-size:11px;text-align:center;line-height:1.8}
.empty-list button{margin-top:15px}
.login-screen{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.login-card{padding:50px max(45px,calc((100vw - 1100px)/2));padding-right:60px;display:flex;flex-direction:column;justify-content:center}
.login-card .brand{margin-bottom:42px}
.login-card h1{font-size:43px;line-height:1.15;margin:17px 0 20px}
.login-card>p{color:#607991;font-size:13px;max-width:330px}
.login-card form{margin-top:35px;max-width:340px}
.login-card label,dialog label{display:block;font-size:11px;color:#436583;margin-bottom:10px}
input[type=password],dialog input{border:1px solid #cbd9eb;border-radius:6px;background:#fff;padding:13px;width:100%;font-size:12px;color:var(--ink)}
.login-card .primary{width:100%;margin-top:13px}
.login-card .login-help{font-size:10px;line-height:1.8;margin-top:25px;max-width:340px}
.login-help code{font-size:10px}
.login-art{background:radial-gradient(ellipse at 100% 0%,#163590 0%,transparent 65%),radial-gradient(ellipse at 100% 90%,#12bff42a 0%,transparent 55%),#002549;position:relative;overflow:hidden;min-height:700px}
.orbit{border:1px solid #12bff430;border-radius:50%;position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:470px;height:470px}
.orbit-two{width:650px;height:650px}
.paper{position:absolute;background:#ffffff;box-shadow:0 12px 25px #00254920;border-radius:0 12px 12px 12px;padding:24px;width:300px;color:#163a60;font-size:13px;line-height:1.8;top:29%;left:13%;transform:rotate(-5deg)}
.paper span{display:block;font-size:9px;text-align:right;color:#597b98;margin-top:10px}
.paper-two{top:43%;left:28%;background:#c8effc;transform:rotate(4deg);border-radius:12px 0 12px 12px}
.art-caption{position:absolute;bottom:10%;left:15%}
.art-caption .eyebrow{color:#9ddff7;font-size:9px}
.art-caption p{font-family:var(--body);font-size:34px;color:#ffffff;line-height:1.2;margin-top:17px;font-weight:400}
dialog{border:1px solid #d4e2f2;border-radius:15px;padding:28px;width:440px;max-width:calc(100vw - 35px);color:var(--ink);box-shadow:0 30px 100px #00254930}
dialog::backdrop{background:#00254966;backdrop-filter:blur(3px)}
.dialog-heading{display:flex;justify-content:space-between;align-items:center}
dialog h2{font-family:var(--body);font-size:30px;font-weight:500;margin:18px 0 12px}
dialog p{font-size:12px;color:#607a94;margin-bottom:20px}
dialog .primary{margin-top:16px;width:100%}
.qr-area{min-height:140px;background:#edf4fc;border:1px dashed #bbd4f3;border-radius:8px;display:grid;place-items:center;padding:18px;text-align:center;color:#567796;font-size:12px;line-height:1.8}
.qr-area img{width:230px;max-width:100%;background:white;padding:6px}
.connection-actions{display:flex;gap:9px;align-items:center;margin-bottom:18px}
.connection-actions .primary{width:auto;margin:0;flex:1}
#connection-status{margin:14px 0;color:#163590;font-size:11px}
dialog .connection-note{font-size:10px;background:#f1f6fc;padding:12px;border-radius:5px}
details{font-size:11px;color:#567794}
summary{cursor:pointer}
#connection-logs{padding-top:8px;font-size:10px;line-height:1.8}
.error{color:#a53f31!important;font-size:11px;margin-top:10px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);padding:13px 20px;background:#163590;color:#fff;border-radius:8px;box-shadow:0 4px 20px #00254920;font-size:12px;z-index:10;max-width:90vw}
.export-context{padding:10px 12px;margin-bottom:18px;background:var(--soft);border-radius:6px;font-weight:600;font-size:12px}
#export-dialog select{width:100%;padding:12px;border:1px solid #cbd9eb;border-radius:6px;background:white;color:var(--ink);font:inherit}
.export-dates{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
#export-dialog .export-contact{display:flex;gap:9px;align-items:flex-start;line-height:1.5;margin-top:18px}
#export-dialog .export-contact input{width:auto;flex-shrink:0;margin-top:2px}
#export-dialog .export-note{font-size:10px;line-height:1.6;margin:10px 0 0}
.chat-back{display:none;background:transparent;font-size:20px}
.notice-inline{font-size:10px;color:#8c6225}
.no-clients-note{padding:10px;color:#607b96;font-size:11px;line-height:1.8}

@media(min-width:1500px){.page-heading,.topbar{padding-left:48px;padding-right:48px}
.stats,.inbox{margin-left:48px;margin-right:48px}
.inbox{grid-template-columns:350px minmax(0,1fr)}
.message .text{font-size:13px}
.conversation-name{font-size:12px}
.conversation-preview{font-size:11px}
}

@media(max-width:1050px){.app{grid-template-columns:185px minmax(0,1fr)}
.sidebar{padding-left:11px;padding-right:11px}
.inbox{grid-template-columns:265px minmax(0,1fr);margin:0 20px}
.page-heading{padding:24px 20px}
.topbar{padding:0 20px}
.stats{margin:0 20px 20px}
.stats>div{padding:0 16px}
.workspace-footer{margin:16px 20px}
.workspace-footer span:last-child{display:none}
.message-list{padding:18px 15px}
.chat-header{padding:15px}
.chat-header .archived-pill{display:none}
.login-card{padding:45px}
.paper{left:7%;width:260px}
.paper-two{left:16%}
.heading-actions .secondary{font-size:10px;padding:10px}
}

@media(max-width:760px){.app{display:block}
.sidebar{position:relative;height:auto;padding:15px 15px 9px;border-bottom:1px solid var(--line);border-right:0;display:block}
.sidebar .brand{padding:0;font-size:23px}
.workspace-label,.nav-heading,.add-client,.sidebar-footer,.sidebar-bottom p,.logout{display:none}
.sidebar nav{display:flex;gap:5px;max-height:none;overflow-x:auto;margin-top:14px}
.client-item{white-space:nowrap;width:auto;padding:8px;font-size:11px;margin:0}
.client-initial{width:22px;height:22px}
.client-item .tiny-dot{margin-left:5px}
.sidebar-bottom{position:absolute;right:15px;top:12px;padding:0}
.mode-toggle{font-size:9px;padding:8px}
.topbar{height:43px;padding:0 15px}
.page-heading{padding:22px 15px 18px;align-items:flex-end}
.page-heading .eyebrow{font-size:8px}
.page-heading h1{font-size:30px}
.page-heading p{font-size:10px;max-width:230px}
.heading-actions{padding:0}
.heading-actions .secondary{font-size:9px;max-width:130px}
.stats{margin:0 15px 17px;padding:15px 0}
.stats>div{padding:0 10px;gap:6px}
.stats span{font-size:8px}
.stats strong{font-size:24px}
.stats small{font-size:8px;line-height:1.5}
.stats .state-stat{font-size:11px;line-height:26px}
.inbox{margin:0 15px;display:block;height:550px;min-height:350px}
.conversation-panel{height:100%;border:0}
.chat-panel{display:none;height:100%}
.inbox.chat-open .conversation-panel{display:none}
.inbox.chat-open .chat-panel{display:flex}
.chat-back{display:block}
.workspace-footer{font-size:8px;margin:14px 15px}
.demo-banner{padding:8px 15px;font-size:9px}
.demo-banner button{font-size:9px;min-width:95px}
.login-screen{display:block}
.login-art{display:none}
.login-card{padding:35px;min-height:100vh}
.login-card .brand{margin-bottom:42px}
.login-card h1{font-size:43px}
.login-card form{max-width:none}
.issue-banner{margin:0 15px 15px}
.no-clients-note{padding:4px 0}
.chat-tools{font-size:8px}
.message .text{font-size:12px}
}


/* Publia: original logos retain proportions, colors and clear space. */
.brand img{display:block;max-width:100%;height:auto;object-fit:contain}

.brand-product{display:block;color:#163590;font-family:var(--body);font-size:8px;font-weight:500;letter-spacing:1.3px;line-height:1.6;margin:4px 0 0 20px;white-space:nowrap}

.sidebar .brand img{width:182px}

.sidebar .brand-product{font-size:7px;letter-spacing:1.05px;margin-left:18px}

.login-card .brand img{width:228px}

.login-card .brand-product{margin-left:25px;font-size:9px;letter-spacing:1.2px}

.art-brand{position:absolute;top:22px;left:9%;width:240px;height:auto}

.stats .state-stat{font-size:16px;font-weight:500}

.client-item.active{box-shadow:inset 0 0 0 1px #c9dcfa}

.primary{background:#163590;box-shadow:0 3px 9px #16359013}

.primary:focus-visible{outline-color:#12bff4}

.workspace-icon{font-weight:700;color:#163590}

.day-divider span{font-family:var(--body)}
.recovery-link{background:transparent;display:block;width:fit-content;padding:13px 0 0;font-size:12px;color:#163590;text-decoration:underline;text-underline-offset:3px;text-align:left}
.password-settings{display:block;background:transparent;color:#55728f;font-size:11px;padding:8px 0 0;text-align:left}
#recovery-dialog .confirm-label{margin-top:16px}
#recovery-dialog .recovery-session-note{font-size:11px;background:#edf4fc;padding:12px;border-radius:6px;margin:16px 0 0;color:#436583}
#recovery-dialog .primary{margin-top:12px}
@media(max-width:760px){.password-settings{display:none}}
.conversation-name{font-size:13px}
.conversation-preview{font-size:12px}
.conversation-time,.conversation-count{font-size:10px;color:#526d88}
.message .text{font-size:13px}
.message .sender,.message .time{font-size:10px}
.message .time{color:#526d88}
.chat-person h2{font-size:14px}
.chat-person p{font-size:10px;color:#526d88}
.stats small,.workspace-footer,.sidebar-bottom p{color:#526d88}
.sidebar-footer{color:#526d88}

@media(max-width:1050px){.sidebar .brand img{width:160px}
.sidebar .brand-product{font-size:6.5px;letter-spacing:.7px;margin-left:17px}
}

@media(max-width:760px){.sidebar .brand{width:135px;padding:0}
.sidebar .brand img{width:130px}
.sidebar .brand-product{font-size:5.7px;letter-spacing:.45px;margin-left:14px;margin-top:0}
.sidebar-bottom{top:26px}
.sidebar nav{margin-top:16px}
.login-card h1{font-size:36px}
.login-card .brand img{width:215px}
.login-card .brand-product{font-size:8px;margin-left:24px}
.page-heading h1{font-size:28px}
.private-pill{font-size:9px}
.art-brand{display:none}
}