/* Opto Zero v3.56 — account manager chat */

.oc-account-chat-v356{
  max-width:1240px;
  padding:16px 12px 34px;
}

.oc-chat-breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 12px;
  padding:0;
  list-style:none;
  color:#8a95a5;
  font-size:10px;
  font-weight:700;
}

.oc-chat-breadcrumbs li{
  display:flex;
  align-items:center;
  gap:6px;
}

.oc-chat-breadcrumbs li::after{
  content:'/';
  color:#c2cad5;
}

.oc-chat-breadcrumbs li:last-child::after{
  display:none;
}

.oc-chat-breadcrumbs a{
  color:#768398;
  text-decoration:none;
}

.oc-chat-shell{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:14px;
  align-items:start;
}

.oc-chat-account-nav{
  position:sticky;
  top:14px;
  overflow:hidden;
  border:1px solid #e1e7ef;
  border-radius:14px;
  background:#fff;
}

.oc-chat-nav-title{
  padding:13px 14px 8px;
  border-bottom:1px solid #edf1f5;
  color:#23334e;
  font-size:13px;
  font-weight:900;
}

.oc-chat-nav-links{
  display:grid;
  gap:2px;
  padding:6px;
}

.oc-chat-nav-links a{
  min-height:39px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 10px;
  border-radius:9px;
  color:#536176;
  font-size:11px;
  line-height:1.15;
  font-weight:800;
  text-decoration:none;
}

.oc-chat-nav-links a i{
  width:17px;
  text-align:center;
  color:#8994a5;
}

.oc-chat-nav-links a:hover,
.oc-chat-nav-links a.is-active{
  background:#eef5ff;
  color:#0d5de6;
}

.oc-chat-nav-links a:hover i,
.oc-chat-nav-links a.is-active i{
  color:#0d5de6;
}

.oc-chat-nav-links .oc-chat-logout{
  margin-top:4px;
  border-top:1px solid #edf1f5;
  border-radius:0 0 8px 8px;
  color:#c44a58;
}

.oc-chat-nav-links .oc-chat-logout i{
  color:#c44a58;
}

.oc-chat-main{
  min-width:0;
}

.oc-chat-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border:1px solid #e1e8f1;
  border-radius:14px;
  background:#fff;
}

.oc-chat-kicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:5px;
  color:#0d5de6;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.35px;
}

.oc-chat-hero h1{
  margin:0 0 4px;
  color:#20304a;
  font-size:27px;
  line-height:1.08;
  font-weight:900;
}

.oc-chat-hero p{
  margin:0;
  color:#7a8799;
  font-size:11px;
  line-height:1.45;
  font-weight:600;
}

.oc-chat-manager{
  flex:0 0 auto;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 11px;
  border:1px solid #dce9e2;
  border-radius:999px;
  background:#f4fbf7;
  color:#2a8556;
  font-size:10px;
  font-weight:900;
}

.oc-chat-manager-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#2fa365;
  box-shadow:0 0 0 4px rgba(47,163,101,.10);
}

.oc-chat-order-strip{
  margin-top:10px;
  padding:11px;
  border:1px solid #e2e8f0;
  border-radius:13px;
  background:#fff;
}

.oc-chat-order-strip-title{
  margin:0 0 7px 2px;
  color:#788498;
  font-size:9px;
  font-weight:850;
}

.oc-chat-order-list{
  display:flex;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:2px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

.oc-chat-order-chip{
  position:relative;
  flex:0 0 auto;
  min-width:132px;
  min-height:51px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:3px 8px;
  align-items:center;
  padding:7px 9px;
  border:1px solid #e1e7ef;
  border-radius:10px;
  background:#fff;
  color:#415069;
  text-decoration:none!important;
}

.oc-chat-order-chip:hover,
.oc-chat-order-chip.is-active{
  border-color:#9ebef0;
  background:#eef5ff;
  color:#0d5de6;
}

.oc-chat-order-main{
  display:flex;
  align-items:baseline;
  gap:6px;
}

.oc-chat-order-main strong{
  font-size:11px;
  font-weight:900;
}

.oc-chat-order-main small{
  color:#8f99a8;
  font-size:8px;
  font-weight:700;
}

.oc-chat-order-meta{
  grid-column:1/-1;
  color:#7f8a9a;
  font-size:8px;
  font-weight:700;
}

.oc-chat-unread{
  position:absolute;
  top:5px;
  right:5px;
  min-width:17px;
  height:17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  border-radius:999px;
  background:#e7465f;
  color:#fff;
  font-size:8px;
  font-weight:900;
}

.oc-chat-panel{
  margin-top:10px;
  overflow:hidden;
  border:1px solid #dfe6ef;
  border-radius:14px;
  background:#fff;
}

.oc-chat-panel-head{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 13px;
  border-bottom:1px solid #edf1f5;
  background:#fbfcfe;
}

.oc-chat-panel-head strong{
  display:block;
  color:#263650;
  font-size:12px;
  font-weight:900;
}

.oc-chat-panel-head span{
  display:block;
  margin-top:2px;
  color:#8792a2;
  font-size:8.5px;
  font-weight:700;
}

.oc-chat-order-open{
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border:1px solid #dce4ee;
  border-radius:8px;
  background:#fff;
  color:#526077;
  font-size:9px;
  font-weight:850;
  text-decoration:none!important;
}

.oc-chat-order-open:hover{
  color:#0d5de6;
  border-color:#b9cef0;
}

.oc-chat-messages{
  height:420px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:14px;
  background:
    linear-gradient(rgba(247,250,253,.84),rgba(247,250,253,.84)),
    radial-gradient(circle at 10% 10%,rgba(13,93,230,.04),transparent 35%);
  -webkit-overflow-scrolling:touch;
}

.oc-chat-loading{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#8792a2;
  font-size:10px;
  font-weight:750;
}

.oc-chat-first{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px;
  text-align:center;
}

.oc-chat-first-icon{
  width:54px;
  height:54px;
  margin-bottom:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#eaf3ff;
  color:#0d5de6;
  font-size:20px;
}

.oc-chat-first strong{
  color:#34445d;
  font-size:13px;
  font-weight:900;
}

.oc-chat-first span{
  margin-top:5px;
  color:#8792a2;
  font-size:9.5px;
  font-weight:650;
}

.oc-chat-message-row{
  display:flex;
  margin-bottom:8px;
}

.oc-chat-message-row.is-customer{
  justify-content:flex-end;
}

.oc-chat-message-row.is-manager{
  justify-content:flex-start;
}

.oc-chat-bubble{
  max-width:min(74%,600px);
  padding:8px 10px 7px;
  border-radius:12px;
  box-shadow:0 2px 7px rgba(31,47,73,.035);
}

.oc-chat-message-row.is-customer .oc-chat-bubble{
  border-bottom-right-radius:4px;
  background:#0d5de6;
  color:#fff;
}

.oc-chat-message-row.is-manager .oc-chat-bubble{
  border:1px solid #e0e6ee;
  border-bottom-left-radius:4px;
  background:#fff;
  color:#33425a;
}

.oc-chat-bubble-author{
  margin-bottom:3px;
  font-size:8px;
  font-weight:900;
  opacity:.72;
}

.oc-chat-bubble-text{
  font-size:10.5px;
  line-height:1.42;
  font-weight:650;
  overflow-wrap:anywhere;
}

.oc-chat-bubble-date{
  margin-top:4px;
  font-size:7.5px;
  line-height:1;
  font-weight:700;
  opacity:.65;
  text-align:right;
}

.oc-chat-error{
  margin:8px 12px 0;
  padding:8px 10px;
  border:1px solid #f0cbd0;
  border-radius:8px;
  background:#fff5f6;
  color:#b83e4e;
  font-size:9px;
  font-weight:800;
}

.oc-chat-compose{
  display:grid;
  grid-template-columns:minmax(0,1fr) 112px;
  gap:7px;
  align-items:end;
  padding:10px 12px;
  border-top:1px solid #edf1f5;
  background:#fff;
}

.oc-chat-compose textarea{
  width:100%;
  min-height:40px;
  max-height:110px;
  padding:10px 11px;
  border:1px solid #dce4ee;
  border-radius:10px;
  background:#fff;
  color:#283850;
  box-shadow:none;
  resize:none;
  outline:none;
  font-family:inherit;
  font-size:11px;
  line-height:1.35;
  font-weight:650;
}

.oc-chat-compose textarea:focus{
  border-color:#8ab2f2;
  box-shadow:0 0 0 3px rgba(13,93,230,.06);
}

.oc-chat-compose button{
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 12px;
  border:0;
  border-radius:10px;
  background:#0d5de6;
  color:#fff;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}

.oc-chat-compose button:disabled{
  opacity:.55;
  cursor:wait;
}

.oc-chat-hint{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 12px 10px;
  color:#939dac;
  font-size:8px;
  font-weight:650;
}

.oc-chat-empty{
  margin-top:10px;
  padding:42px 20px;
  border:1px solid #e0e7f0;
  border-radius:14px;
  background:#fff;
  text-align:center;
}

.oc-chat-empty-icon{
  width:58px;
  height:58px;
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#eef5ff;
  color:#0d5de6;
  font-size:22px;
}

.oc-chat-empty h2{
  margin:0 0 6px;
  color:#2b3b55;
  font-size:18px;
  font-weight:900;
}

.oc-chat-empty p{
  margin:0 0 15px;
  color:#8290a2;
  font-size:10px;
  font-weight:650;
}

.oc-chat-empty a{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  border-radius:9px;
  background:#0d5de6;
  color:#fff;
  font-size:10px;
  font-weight:900;
  text-decoration:none;
}

@media(max-width:767px){
  .oc-account-chat-v356{
    padding:8px 8px 24px;
  }

  .oc-chat-breadcrumbs{
    margin-bottom:7px;
    font-size:9px;
  }

  .oc-chat-shell{
    grid-template-columns:minmax(0,1fr);
    gap:8px;
  }

  .oc-chat-account-nav{
    position:static;
    overflow-x:auto;
    overflow-y:hidden;
    border-radius:12px;
    -webkit-overflow-scrolling:touch;
  }

  .oc-chat-nav-title{
    display:none;
  }

  .oc-chat-nav-links{
    min-width:max-content;
    display:flex;
    gap:4px;
    padding:5px;
  }

  .oc-chat-nav-links a{
    min-height:36px;
    flex:0 0 auto;
    gap:6px;
    padding:0 9px;
    border-radius:8px;
    font-size:9.5px;
    white-space:nowrap;
  }

  .oc-chat-nav-links a i{
    width:14px;
    font-size:10px;
  }

  .oc-chat-nav-links .oc-chat-logout{
    margin:0;
    border:0;
    border-radius:8px;
  }

  .oc-chat-hero{
    align-items:flex-start;
    padding:13px;
    border-radius:12px;
  }

  .oc-chat-kicker{
    font-size:8px;
  }

  .oc-chat-hero h1{
    font-size:22px;
  }

  .oc-chat-hero p{
    font-size:9.5px;
  }

  .oc-chat-manager{
    min-height:30px;
    padding:0 8px;
    font-size:8.5px;
  }

  .oc-chat-order-strip{
    margin-top:8px;
    padding:8px;
    border-radius:11px;
  }

  .oc-chat-order-chip{
    min-width:116px;
    min-height:46px;
    padding:6px 8px;
  }

  .oc-chat-order-main strong{
    font-size:10px;
  }

  .oc-chat-panel{
    margin-top:8px;
    border-radius:12px;
  }

  .oc-chat-panel-head{
    min-height:49px;
    padding:8px 10px;
  }

  .oc-chat-order-open{
    min-height:30px;
    padding:0 8px;
    font-size:8px;
  }

  .oc-chat-messages{
    height:min(52vh,430px);
    min-height:300px;
    padding:10px 8px;
  }

  .oc-chat-bubble{
    max-width:84%;
    padding:8px 9px 6px;
  }

  .oc-chat-bubble-text{
    font-size:10.5px;
  }

  .oc-chat-compose{
    grid-template-columns:minmax(0,1fr) 43px;
    gap:5px;
    padding:8px;
  }

  .oc-chat-compose textarea{
    min-height:42px;
    padding:10px;
    border-radius:10px;
    font-size:16px;
  }

  .oc-chat-compose button{
    width:43px;
    min-width:43px;
    min-height:42px;
    padding:0;
    border-radius:10px;
    font-size:14px;
  }

  .oc-chat-compose button span{
    display:none;
  }

  .oc-chat-hint{
    padding:0 9px 8px;
    font-size:7.5px;
  }
}