:root{
  --ink:#182945;
  --muted:#68778d;
  --blue:#275cdb;
  --line:#e4e9f1;
  --bg:#f8fafc;
  --radius:12px;
  --s1:4px;
  --s2:8px;
  --s3:12px;
  --s4:16px;
  --s5:24px;
  --s6:32px;
  font-family:"Segoe UI",system-ui,sans-serif;
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  background:var(--bg);
  font-synthesis:none}
*{
  box-sizing:border-box}
body{
  margin:0}
button,input,select,textarea{
  font:inherit;
  color:inherit}
button,a,input,textarea,select{
  -webkit-tap-highlight-color:transparent}
button{
  cursor:pointer;
  border:0;
  background:none}
button:disabled{
  opacity:.48;
  cursor:wait}
a{
  color:var(--blue);
  text-underline-offset:3px}
h1,h2,h3,p{
  margin:0}
h1{
  font-size:28px;
  font-weight:650;
  letter-spacing:-.8px;
  line-height:1.2}
h2{
  font-size:18px;
  font-weight:650;
  letter-spacing:-.3px}
h3{
  font-size:15px;
  margin:20px 0 10px}
p{
  margin:12px 0}
small,.small{
  font-size:12px}
.muted,small{
  color:var(--muted)}
strong{
  font-weight:600}
.eyebrow{
  font-size:10px;
  font-weight:700;
  letter-spacing:1.7px;
  color:var(--muted);
  display:block;
  margin-bottom:8px}
.layout{
  display:grid;
  grid-template-columns:210px 350px minmax(0,1fr);
  height:100dvh;
  overflow:hidden}
.rail{
  display:flex;
  flex-direction:column;
  padding:30px 18px 22px;
  border-right:1px solid var(--line);
  background:#f6f8fc}
.brand{
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--ink);
  text-decoration:none;
  font-size:23px;
  font-weight:750;
  letter-spacing:2px;
  padding:0 10px}
.brand img{
  width:32px;
  height:32px}
.brand-dot{
  color:var(--blue)}
.nav-links{
  display:grid;
  gap:6px;
  margin-top:48px}
.nav-item{
  text-align:left;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:13px;
  border-radius:9px;
  font-weight:550;
  color:#4d5f78}
.nav-item:hover,.nav-item:focus-visible{
  background:#e9effb;
  color:var(--blue)}
.nav-item>span{
  font-size:23px;
  width:24px;
  line-height:1}
.rail-bottom{
  margin-top:auto}
.pilot-label{
  display:block;
  font-size:9px;
  letter-spacing:1.7px;
  color:#8290a3;
  margin:16px 10px}
.identity{
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
  padding:14px 4px 0;
  border-top:1px solid var(--line)}
.identity>span:last-child{
  min-width:0}
.identity strong,.identity small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap}
.identity strong{
  font-size:12px}
.identity small{
  font-size:10px}
.avatar{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:14px;
  background:#e5edf8;
  color:#476890;
  font-size:13px;
  font-weight:650;
  letter-spacing:.5px}
.avatar.business{
  background:#e8edfc;
  color:#355cb2;
  border-radius:11px}
.inbox{
  display:flex;
  flex-direction:column;
  min-height:0;
  border-right:1px solid var(--line);
  background:#fff}
.inbox>header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:30px 22px 20px}
.inbox h1{
  font-size:25px}
.icon-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  border-radius:10px;
  background:#f0f4fa;
  font-size:23px;
  flex-shrink:0}
.icon-button:hover{
  background:#e6edfa}
.workspace{
  padding:0 20px 16px}
.workspace label{
  font-size:11px}
.workspace select{
  margin-top:5px;
  background:#f8fafc;
  padding:9px 10px}
.filter-row{
  display:flex;
  gap:5px;
  overflow-x:auto;
  flex-shrink:0;
  padding:0 18px 14px;
  border-bottom:1px solid var(--line);
  scrollbar-width:thin}
.filter-row button{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  border-radius:6px;
  padding:5px 8px}
.filter-row .selected{
  background:#eaf0fe;
  color:var(--blue);
  font-weight:650}
#conversation-list{
  overflow-y:auto;
  flex:1}
.conversation-row{
  display:flex;
  align-items:flex-start;
  gap:11px;
  text-align:left;
  padding:19px 18px;
  border-bottom:1px solid #eef1f6;
  width:100%;
  position:relative}
.conversation-row:hover,.conversation-row.current{
  background:#f1f5fd}
.conversation-row.current:before{
  content:"";
  position:absolute;
  left:0;
  top:16px;
  bottom:16px;
  width:3px;
  border-radius:3px;
  background:var(--blue)}
.row-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex:1}
.row-copy>span{
  color:var(--muted);
  font-size:12px}
.row-title{
  display:flex;
  gap:5px;
  align-items:baseline}
.row-title strong{
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--ink);
  flex:1}
.row-title time{
  font-size:9px;
  white-space:nowrap;
  color:var(--muted)}
.preview{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis}
.row-meta{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:3px;
  min-width:0}
.row-meta small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px}
.status{
  display:inline-flex;
  font-size:10px;
  line-height:1.5;
  font-weight:600;
  border-radius:5px;
  padding:3px 7px;
  white-space:nowrap}
.status.new{
  color:#8c6422;
  background:#fff3dc}
.status.active{
  color:#365dab;
  background:#eaf0fd}
.status.resolved{
  color:#337060;
  background:#e8f5ee}
.unread{
  border-radius:10px;
  background:var(--blue);
  color:#fff;
  min-width:18px;
  padding:0 5px;
  font-size:10px;
  line-height:18px;
  position:absolute;
  right:16px;
  top:43px}
.connection{
  padding:12px 20px;
  font-size:10px;
  color:var(--muted);
  border-top:1px solid var(--line)}
main{
  min-width:0;
  min-height:0;
  overflow:auto;
  background:#fcfdff}
.page{
  padding:40px;
  max-width:1060px;
  margin:0 auto}
.page>p.muted{
  margin-top:12px}
.search-form{
  display:flex;
  gap:8px;
  margin:28px 0 32px}
.search-form input{
  flex:1;
  min-width:0}
.search-form button{
  white-space:nowrap}
.page h2{
  margin:28px 0 14px}
.count{
  margin-left:6px;
  font-size:11px;
  background:#edf1f7;
  padding:3px 7px;
  border-radius:6px;
  color:var(--muted);
  font-weight:500;
  vertical-align:middle}
.directory{
  border-top:1px solid var(--line)}
.directory-row{
  display:flex;
  align-items:center;
  gap:15px;
  width:100%;
  text-align:left;
  padding:20px 0;
  border-bottom:1px solid var(--line)}
.directory-row:hover{
  background:#f5f8fe}
.directory-row .row-copy strong{
  font-size:15px;
  overflow-wrap:anywhere}
.directory-row .row-copy>span{
  line-height:1.6}
.directory-row>.verified{
  font-size:10px}
.verified{
  font-size:11px;
  color:#315fbd;
  white-space:nowrap}
.empty{
  color:var(--muted);
  font-size:13px;
  padding:20px 0;
  line-height:1.7}
.inbox-empty{
  padding:34px 24px}
.empty h2{
  font-size:17px;
  color:#495f7f}
.loading{
  padding:35px;
  color:var(--muted)}
label{
  display:block;
  font-size:12px;
  font-weight:600;
  margin:14px 0 5px}
label small{
  display:block;
  font-weight:400;
  margin-top:5px}
input,textarea,select{
  display:block;
  width:100%;
  border:1px solid #d9e1ee;
  background:#fff;
  border-radius:8px;
  padding:11px 12px;
  margin-top:6px;
  outline:none;
  font-size:14px;
  min-width:0}
input:focus,textarea:focus,select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px #275cdb14}
input[type=color]{
  height:42px;
  padding:5px}
input[type=range]{
  padding:0;
  accent-color:var(--blue)}
textarea{
  resize:vertical;
  min-height:90px}
input[readonly],textarea[readonly]{
  background:#f6f8fc;
  color:var(--muted)}
:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px}
.primary,.secondary,.danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 17px;
  min-height:42px;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  text-decoration:none}
.primary{
  background:var(--blue);
  color:white}
.primary:hover{
  background:#184bc6}
.secondary{
  background:white;
  border:1px solid #dce4f0}
.secondary:hover{
  background:#f2f6fc}
.danger{
  color:#b44747;
  background:#fff0f0}
.wide{
  width:100%}
.text-button{
  color:var(--blue);
  font-size:12px;
  padding:8px 4px}
.auth-panel{
  max-width:470px;
  margin:40px auto;
  padding:28px}
.auth-panel h1{
  font-size:30px}
.auth-panel>p{
  line-height:1.7;
  margin:15px 0 25px}
.auth-panel form button{
  margin-top:12px}
.auth-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  margin-top:23px}
.auth-links button{
  padding:0;
  color:var(--blue);
  font-size:12px}
.fine{
  font-size:11px;
  line-height:1.7;
  color:var(--muted)}
.form-error{
  font-size:12px;
  color:#b33b48;
  margin:7px 0;
  white-space:pre-line}
.form-error:empty{
  display:none}
.profile-page{
  max-width:800px}
.profile-heading{
  display:flex;
  align-items:center;
  gap:20px;
  margin:25px 0}
.profile-heading .avatar{
  width:66px;
  height:66px;
  font-size:23px;
  border-radius:18px}
.profile-heading h1{
  overflow-wrap:anywhere;
  margin-bottom:8px}
.profile-description{
  font-size:16px;
  line-height:1.8;
  color:#596b84;
  max-width:630px}
.hours{
  display:flex;
  gap:14px;
  padding:20px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:25px 0}
.hours>span{
  font-size:27px;
  color:#6c86b5}
.hours p{
  margin:5px 0;
  font-size:13px}
.contact-section{
  max-width:470px;
  margin-bottom:32px}
.contact-section h2{
  margin-top:24px}
.contact-section form button{
  margin-top:15px}
.share-line{
  display:flex;
  gap:10px;
  align-items:flex-end}
.share-line label{
  flex:1;
  min-width:0;
  margin:0}
.share-line input{
  font-size:11px}

.chat{
  height:100%;
  display:flex;
  flex-direction:column;
  min-height:0}
.chat-heading{
  display:flex;
  gap:13px;
  align-items:center;
  background:#fff;
  padding:22px 28px;
  border-bottom:1px solid var(--line);
  flex-shrink:0}
.chat-title{
  min-width:0;
  flex:1}
.chat-title h1{
  font-size:18px;
  letter-spacing:-.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis}
.chat-subtitle{
  display:flex;
  gap:8px;
  font-size:11px;
  margin-top:5px;
  color:var(--muted);
  flex-wrap:wrap}
.request-bar{
  display:flex;
  gap:10px;
  align-items:center;
  padding:9px 28px;
  border-bottom:1px solid var(--line);
  background:#fff;
  flex-shrink:0;
  flex-wrap:wrap;
  font-size:11px}
.request-bar .text-button:first-of-type{
  margin-left:auto}
.messages{
  flex:1;
  overflow-y:auto;
  min-height:0;
  padding:22px 30px}
.history-label{
  text-align:center;
  font-size:10px;
  color:#8996a9;
  margin:0 0 26px}
#older-wrap{
  text-align:center;
  margin-bottom:20px}
.message{
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  margin:20px 0;
  max-width:82%;
  width:fit-content}
.message.mine{
  align-items:flex-end;
  margin-left:auto}
.sender{
  font-size:10px;
  color:#76859b;
  margin:0 4px 5px;
  max-width:100%;
  overflow-wrap:anywhere}
.bubble{
  background:#fff;
  border:1px solid #e3e8f0;
  border-radius:2px 12px 12px 12px;
  padding:11px 15px;
  max-width:100%}
.mine .bubble{
  background:#e8eefb;
  border-color:#dce5fa;
  border-radius:12px 2px 12px 12px}
.bubble p{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:13px;
  line-height:1.7;
  margin:0}
.message time{
  font-size:9px;
  color:#8491a5;
  margin:6px 3px 0}
.file{
  display:block;
  padding:7px 0;
  font-size:12px;
  overflow-wrap:anywhere}
.file small{
  display:block;
  font-size:10px;
  text-decoration:none}
.conversation-start{
  max-width:360px;
  margin:14vh auto 0;
  text-align:center;
  color:var(--muted);
  font-size:12px}
.conversation-start h2{
  font-size:18px;
  color:#526c8d;
  margin-top:20px}
.start-mark{
  display:inline-grid;
  place-items:center;
  width:54px;
  height:54px;
  background:#e3eaf7;
  border-radius:16px;
  font-size:25px;
  font-weight:700;
  color:#6c87b1}
.composer{
  padding:17px 24px 14px;
  background:#fff;
  border-top:1px solid var(--line);
  flex-shrink:0}
.compose-row{
  display:flex;
  align-items:flex-end;
  gap:10px}
.compose-row textarea{
  resize:none;
  min-height:44px;
  max-height:160px;
  margin:0;
  flex:1;
  padding:11px 12px}
.attach{
  position:relative;
  margin:0;
  overflow:hidden;
  font-weight:400}
.attach input{
  position:absolute;
  inset:0;
  opacity:0;
  margin:0;
  cursor:pointer;
  width:100%;
  height:100%;
  padding:0}
.compose-footer{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:7px 0 0 50px}
.compose-footer small{
  font-size:9px}
#send-state{
  font-size:10px;
  color:var(--blue)}
#file-preview{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:11px;
  margin-top:5px}
#file-preview:empty{
  display:none}
.settings-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:36px}
.settings-grid h2{
  margin-top:25px}
.settings-grid form>button{
  margin-top:12px}
.check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-weight:400;
  line-height:1.6;
  margin-top:16px}
.check input{
  width:16px;
  height:16px;
  flex-shrink:0;
  margin:2px 0 0;
  accent-color:var(--blue)}
hr{
  border:0;
  border-top:1px solid var(--line);
  margin:28px 0}
.button-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px}
.agent-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  gap:10px}
.agent-row small{
  display:block}
dialog{
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:16px;
  padding:25px;
  width:min(520px,calc(100vw - 24px));
  max-height:90dvh;
  overflow-y:auto;
  box-shadow:0 15px 70px #1b315b24}
dialog::backdrop{
  background:#1426415c}
dialog>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:12px}
dialog>header h2{
  font-size:20px}
dialog form>button{
  margin-top:16px}
dialog #embed{
  min-height:90px;
  font-family:monospace;
  font-size:11px}
#toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%) translateY(100px);
  max-width:calc(100vw - 30px);
  padding:13px 20px;
  background:#1c304f;
  color:#fff;
  border-radius:9px;
  z-index:20;
  font-size:12px;
  transition:transform .2s;
  pointer-events:none}
#toast.show{
  transform:translateX(-50%) translateY(0)}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0}
.mobile-back{
  display:none}

@media(min-width:1450px){
  .layout{
  grid-template-columns:230px 380px minmax(0,1fr)}
.page{
  padding:52px}
.messages{
  padding-left:50px;
  padding-right:50px}
}

@media(max-width:1150px){
  .layout{
  grid-template-columns:160px 300px minmax(0,1fr)}
.rail{
  padding:28px 10px 18px}
.brand{
  font-size:18px;
  gap:7px}
.brand img{
  width:28px;
  height:28px}
.nav-item{
  font-size:12px;
  padding:10px}
.page{
  padding:28px 24px}
.settings-grid{
  grid-template-columns:1fr;
  gap:10px}
.directory-row{
  gap:10px}
.directory-row>.verified{
  font-size:0}
.directory-row>.verified:before{
  content:"✓";
  font-size:14px}
.chat-heading{
  padding:18px}
.request-bar{
  padding:9px 18px}
.composer{
  padding:14px}
.messages{
  padding:20px}
.share-line{
  flex-wrap:wrap}
.share-line label{
  flex-basis:100%}
.auth-panel{
  padding:20px;
  margin:20px auto}
}

@media(max-width:850px){
  .layout{
  grid-template-columns:76px 280px minmax(0,1fr)}
.rail{
  padding:22px 8px}
.brand{
  justify-content:center;
  padding:0}
.brand>span{
  display:none}
.nav-item{
  font-size:0;
  justify-content:center;
  padding:14px 5px}
.nav-item>span{
  font-size:24px}
.identity{
  justify-content:center}
.identity>span:last-child,.pilot-label{
  display:none}
.auth-panel h1{
  font-size:25px}
.page h1{
  font-size:25px}
.search-form{
  flex-wrap:wrap}
.search-form input{
  flex-basis:100%}
.chat-subtitle{
  gap:4px}
.compose-row{
  gap:6px}
.compose-row .primary{
  padding:11px}
.compose-row .primary>span{
  display:none}
.messages{
  padding:14px}
.compose-footer{
  margin-left:0}
.compose-footer small{
  display:none}
.chat-heading .avatar{
  display:none}
}

@media(max-width:680px){
  :root{
  font-size:14px}
.layout{
  display:flex;
  flex-direction:column;
  height:100dvh}
.rail{
  order:3;
  flex-shrink:0;
  height:62px;
  padding:3px 14px calc(3px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  border-right:0;
  background:#fff}
.rail .brand,.rail-bottom{
  display:none}
.nav-links{
  display:flex;
  justify-content:space-around;
  margin:0;
  height:100%}
.nav-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:10px;
  padding:5px 18px;
  border-radius:8px}
.nav-item>span{
  font-size:21px;
  text-align:center}
.inbox{
  flex:1;
  min-height:0;
  border:0}
.inbox>header{
  padding:24px 22px 20px}
.inbox>header:before{
  content:"F.";
  font-weight:750;
  font-size:23px;
  color:var(--blue);
  margin-right:14px}
.inbox>header>div{
  flex:1}
.inbox h1{
  font-size:24px}
.conversation-row{
  padding:20px}
.row-title strong{
  font-size:14px}
.row-title time{
  font-size:10px}
.row-copy>span{
  font-size:12px}
.avatar{
  width:46px;
  height:46px}
.inbox .eyebrow{
  font-size:9px;
  margin-bottom:4px}
main{
  display:none;
  flex:1;
  min-height:0}
.mobile-detail main{
  display:block}
.mobile-detail .inbox{
  display:none}
.page{
  padding:27px 20px}
.page>.eyebrow:before{
  content:"FIBISE / ";
  color:var(--blue)}
.page h1{
  font-size:27px}
.directory-row{
  padding:19px 0}
.directory-row .row-copy strong{
  font-size:14px}
.search-form{
  margin:23px 0;
  flex-wrap:nowrap}
.search-form input{
  flex-basis:auto;
  font-size:13px}
.search-form button{
  padding:11px 12px}
.directory-row>.verified{
  font-size:10px}
.directory-row>.verified:before{
  content:none}
.auth-panel{
  margin:15px auto;
  max-width:440px;
  padding:26px 22px}
.auth-panel h1{
  font-size:28px}
input,textarea,select{
  font-size:16px}
.auth-links{
  gap:16px}
.auth-panel>p{
  font-size:13px}
.chat-heading{
  padding:13px 14px;
  gap:10px}
.chat-heading .avatar{
  display:inline-flex;
  width:36px;
  height:36px;
  font-size:11px}
.chat-title h1{
  font-size:15px}
.chat-heading>.secondary{
  padding:9px;
  font-size:10px;
  min-height:36px}
.mobile-back{
  display:inline-flex;
  background:none;
  min-width:25px;
  width:25px;
  font-size:20px}
.chat-subtitle{
  font-size:9px}
.chat-subtitle .verified{
  font-size:9px}
.request-bar{
  padding:8px 16px;
  gap:7px;
  font-size:10px}
.request-bar .text-button{
  font-size:10px;
  padding:4px 2px}
.messages{
  padding:14px 17px}
.message{
  max-width:88%;
  margin:18px 0}
.bubble p{
  font-size:14px}
.message time{
  font-size:9px}
.composer{
  padding:10px 12px}
.compose-row textarea{
  font-size:16px}
.compose-row .primary{
  font-size:11px;
  padding:11px 10px}
.attach{
  min-width:35px;
  width:35px}
.compose-footer{
  margin-top:5px;
  min-height:12px}
#send-state{
  font-size:9px}
.profile-heading{
  gap:14px}
.profile-heading .avatar{
  width:56px;
  height:56px;
  font-size:18px}
.profile-heading h1{
  font-size:25px}
.profile-description{
  font-size:14px}
.hours{
  font-size:12px}
.conversation-start{
  margin-top:12vh}
.settings-grid{
  gap:6px}
.settings-page h2{
  font-size:18px}
.share-line input{
  font-size:12px}
.button-row>*{
  width:100%}
#toast{
  bottom:78px}
.check input{
  width:18px;
  height:18px}
dialog{
  padding:20px}
.identity .avatar{
  width:32px;
  height:32px}
}

@media(prefers-reduced-motion:reduce){
  *{
  transition:none!important;
  scroll-behavior:auto!important}
}