/* ============================================================
   BALTIC SHIPPING — CHAT WIDGET
   Maritime Corporate / Variant 2
   (keeps current DOM + online/offline + grid options)
   ============================================================ */

/* ===================== TOKENS ===================== */
:root {
  /* Brand */
  --bsc-navy: #17487f;
  --bsc-navy-2: #13427b;
  --bsc-sea: #1fb6c9;

  /* Surfaces */
  --bsc-bg: #f4f7fa;
  --bsc-surface: #ffffff;
  --bsc-border: #dbe4ea;

  /* Text */
  --bsc-text: #0f172a;
  --bsc-muted: #667085;

  /* Radii / shadow */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 5px;

  --shadow-soft: 0 10px 30px rgba(2,12,27,.32);
  --shadow-card: 0 8px 18px rgba(2,12,27,.10);

  --motion-fast: .18s ease;
  --motion-base: .32s ease;
}

/* ===================== DIM ===================== */
#chat-dim{
  position: fixed;
  inset: 0;
  background: rgba(2, 12, 27, 0.28);
  display: none;
  z-index: 9998;
}

/* ===================== LAUNCHER ===================== */
#chat-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;

  width: 48px;
  height: 48px;
  padding: 14px;
  border-radius: 50%;

  background: linear-gradient(180deg, var(--bsc-navy) 0%, var(--bsc-navy-2) 100%);
  color: #fff;

  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  box-shadow: var(--shadow-soft);
  font-size: 20px;
  z-index: 9999;
  transition: transform var(--motion-fast), filter var(--motion-fast);

  content: '';
}
#chat-launcher:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* ===================== CHATBOX ===================== */
#chatbox {
  position: fixed;
  right: 20px;
  bottom: 92px;

  box-sizing: border-box;
  width: 340px;
  height: 480px;

  display: none;
  flex-direction: column;

  background: var(--bsc-surface);
  border: 1px solid var(--bsc-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;

  /*font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;*/
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 19px;
  color: #333;

  z-index: 9999;
}

#chatbox * {
  box-sizing: border-box;
}

#chatbox input,
#chatbox button,
#chatbox select,
#chatbox textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

#chatbox a {
  color: var(--bsc-navy);
  text-decoration: none;
}
#chatbox a:hover {
  text-decoration: underline;
}

/* ===================== HEADER ===================== */
#chatbox .header {
  background: linear-gradient(180deg, var(--bsc-navy) 0%, var(--bsc-navy-2) 100%);
  color: #fff;
  padding: 10px 14px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  border-bottom: 1px solid rgba(255,255,255,.12);
}

.bsc-title {
  /*display: flex;*/
  /*flex-direction: column;*/
  /*gap: 2px;*/
}

.bsc-title .brand {
  font-weight: 700;          /* medium */
  letter-spacing: .2px;
  color: #e6f2f6;            /* мягкий “ice white” */
  line-height: 1.1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-transform: uppercase;
  display: block;
  margin-right: 5px;
}

/* на случай если внутри brand есть <b>/<strong> */
.bsc-title .brand b,
.bsc-title .brand strong {
  font-weight: 500;
  color: #e6f2f6;
}

.bsc-title .subtitle {
  display: inline-flex;
  font-size: 12px;
  opacity: .5;
}

/* status wrapper */
.bsc-status {
  font-size: 12px;
  display: inline-flex;
  margin-left: 8px;
  gap: 10px;
}
.bsc-status-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bsc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2dd4bf;
  box-shadow: 0 0 0 3px rgba(31,182,201,.22);
}

/* оператор в чате (строка под Online) */
.bsc-operator {
  opacity: .3;
}

/* ===== REAL ONLINE/OFFLINE STATES (Socket.IO based) ===== */
@keyframes bscPulse {
  0%   { transform: scale(1);   opacity: .95; }
  50%  { transform: scale(1.18); opacity: .65; }
  100% { transform: scale(1);   opacity: .95; }
}

.bsc-status[data-state="online"] .bsc-dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.20);
}

.bsc-status[data-state="offline"] .bsc-dot {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.20);
}

.bsc-status[data-state="connecting"] .bsc-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,.20);
  animation: bscPulse 1.1s infinite;
}
/* ======================================================= */

/* ===================== MESSAGES ===================== */
#chatbox .messages {
  flex: 1;
  overflow-y: auto;
  padding: 30px 12px;
  background:
          radial-gradient(1200px 520px at 28% -10%, rgba(31,182,201,.05), transparent 60%),
          var(--bsc-bg);
}

.msg-wrap {
  display: flex;
  align-items: flex-end;
  position: relative;
  margin-bottom: 50px;
}
.msg-wrap:last-child {
  margin-bottom: 0;
}
.msg-wrap:has(.bot),
.msg-wrap:has(.operator),
.msg-wrap:has(.user) {
  max-width: 90%;
}
.msg-wrap:has(.bot),
.msg-wrap:has(.operator) {
  margin-right: auto;
  justify-content: left;
}
.msg-wrap:has(.user) {
  margin-left: auto;
  justify-content: right;
}

.msg-userpic {
  width: 42px;
}
.msg-signature {
  position: absolute;
  bottom: -20px;
  font-size: 10px;
  margin-top: 2px;
  color: #777;
  white-space: nowrap;
}

.msg {
  position: relative;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 1px rgba(2,12,27,.08);
  line-height: 1.45;
  font-size: 14px;
  color: var(--bsc-text);
  border: 1px solid var(--bsc-border);
  background: #fff;
  animation: msgIn var(--motion-base);
  word-break: break-word;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.msg.user {
  background: linear-gradient(180deg, rgba(11,42,58,.05), rgba(11,42,58,.01));
  border-color: rgba(11,42,58,.18);
}

.msg.bot,
.msg.operator {
  margin-left: 8px;
}

.msg.bot::after,
.msg.operator::after {
  content: '';
  bottom: 13px;
  left: -13px;
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-right-color: var(--bsc-border);
  background-color: transparent;
}

.msg.operator {
  /*background: linear-gradient(180deg, rgba(31,182,201,.16), rgba(31,182,201,.06));*/
  /*border-color: rgba(31,182,201,.28);*/
  background: linear-gradient(180deg, rgb(251 246 244), rgb(255 255 255 / 100%));
  border-color: rgba(255, 102, 53, .28);
  box-shadow: 0 1px 1px rgb(24 27 2 / 8%);
}
.msg.operator::after {
  border-right-color: rgba(255, 102, 53, .28);
}

.msg.system {
  margin: 0 auto;
  max-width: 92%;
  background: rgba(102,112,133,.08);
  border: 1px dashed rgba(102,112,133,.25);
  box-shadow: none;
  color: var(--bsc-muted);
  font-size: 12px;
}

.msg hr {
  margin: 4px 0;
  height: 0;
  box-sizing: content-box;
  border: 0;
  border-top: 1px solid #eee;
}

/* ===================== TYPING ===================== */
.typing {
  display: inline-flex;
  gap: 4px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--bsc-border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 1px rgba(2,12,27,.08);
  opacity: .5;
}
.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(102,112,133,.85);
  animation: blink 1.2s infinite both;
}
.typing span:nth-child(2){ animation-delay:.15s }
.typing span:nth-child(3){ animation-delay:.3s }
@keyframes blink {
  0%,80%,100%{ opacity:.25 }
  40%{ opacity:1 }
}

/* ===================== OPTIONS GRID ===================== */
.btn-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 4px;
  width: 100%;
}

/* FIX: если в меню только 1 кнопка — растягиваем на 2 колонки */
.btn-options > .chat-option:only-child{
  grid-column: 1 / -1;
  justify-self: stretch;

  /* New search: smaller */
  min-height: auto;
  padding: 10px 12px;
  gap: 0;
}

/*!* уменьшаем ИКОНКУ только для New search *!*/
/*.btn-options > .chat-option:only-child svg,*/
/*.btn-options > .chat-option:only-child img{*/
/*  width: 26px;*/
/*  height: 26px;*/
/*}*/

/* ===================== MENU WITHOUT CARDS (FINAL) ===================== */
.chat-option{
  background: transparent linear-gradient(180deg, rgba(11, 42, 58, .05), rgba(11, 42, 58, .01));
  border-color: rgba(11, 42, 58, .18);
  border: 1px solid var(--bsc-border);
  box-shadow: 0 1px 1px rgba(2, 12, 27, .08);
  border-radius: var(--radius-lg);
  padding: 10px;
  min-height: 76px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  color: var(--bsc-navy);
  font-size: 13px;
  font-weight: 600;
  text-align: center;

  cursor: pointer;

  opacity: 0;
  transform: translateY(8px);
  animation: optionIn .45s ease forwards;
}

.chat-option:nth-child(1) { animation-delay: .05s; }
.chat-option:nth-child(2) { animation-delay: .12s; }
.chat-option:nth-child(3) { animation-delay: .19s; }
.chat-option:nth-child(4) { animation-delay: .26s; }

@keyframes optionIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* icon color override (SVG has stroke="white" in markup) */
.chat-option svg,
.chat-option svg *{
  stroke: var(--bsc-navy);
}

/* ===== ICON SIZE ===== */
.chat-option svg,
.chat-option img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Hover: без плитки, только лёгкая подсказка */
.chat-option:hover{
  transform: none;
}
.chat-option:hover .text{
  /*text-decoration: underline;*/
  /*text-underline-offset: 3px;*/
  /*text-decoration-thickness: 1px;*/
  color: #ff7b0d;
}
.chat-option:hover svg,
.chat-option:hover svg *{
  stroke: #ff7b0d;
}

/* ===================== DISABLED STATE ===================== */
.btn-options.disabled .chat-option {
  opacity: .55;
  pointer-events: none;
  filter: grayscale(35%);
}

/*!* Selected: без плитки, только акцент на тексте *!*/
/*.chat-option.selected{*/
/*  opacity: 1;*/
/*  filter: none;*/
/*  transform: none;*/
/*  z-index: 2;*/
/*}*/
/*.chat-option.selected .text{*/
/*  text-decoration: underline;*/
/*  text-underline-offset: 3px;*/
/*  text-decoration-thickness: 2px;*/
/*}*/
/*.btn-options.disabled .chat-option:not(.selected) {*/
/*  opacity: .40;*/
/*  filter: grayscale(55%);*/
/*}*/

/* ===================== FIX: CARD AS USER MESSAGE ===================== */
.msg.user > .btn-options {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  background: transparent;
}
.msg.user .chat-option {
  margin: 0 auto;
  padding: 0;
  box-shadow: none;
  background: none;
  border: none;
}

/* remove user bubble when message contains option card */
.msg.user:has(.btn-options) {
  /*background: transparent;*/
  /*padding: 0;*/
  /*box-shadow: none;*/
  /*border: none;*/
  /*max-width: 100%;*/
  display: flex;
  justify-content: center;
}

/* ===================== INPUT ===================== */
#chatbox .input-row {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--bsc-border);
  background: var(--bsc-surface);
  align-items: center;
}

#chatbox input {
  flex: 1;
  border: 1px solid var(--bsc-border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}
#chatbox input:focus{
  border-color: rgba(31,182,201,.65);
  box-shadow: 0 0 0 4px rgba(31,182,201,.14);
}

.input-buttons{
  display: inline-flex;
  gap: 8px;
}

/* ===================== SCROLLBAR ===================== */
#chatbox .messages::-webkit-scrollbar {
  width: 10px;
}
#chatbox .messages::-webkit-scrollbar-thumb {
  background: rgba(11,42,58,.22);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
#chatbox .messages::-webkit-scrollbar-thumb:hover {
  background: rgba(11,42,58,.32);
  border: 3px solid transparent;
  background-clip: content-box;
}

/* ===================== MOBILE ===================== */
@media (max-width: 420px) {
  #chatbox {
    right: 0;
    bottom: 90px;
    /*width: 100vw;*/
    /*height: 100dvh;*/
    width: 100%;
    height: calc(100% - 90px);
    border-radius: 0;
  }
  .btn-options {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-height: 575.98px) and (orientation: landscape) {
  #chatbox {
    display: none !important;
  }
  #chat-dim{
    background: rgba(2, 12, 27, 0.45) center center no-repeat url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 81 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M0,82.375c0,3.078 2.515,5.625 5.594,5.625l68.781,0c3.078,0 5.625,-2.547 5.625,-5.625l0,-32.25c0,-3.078 -2.547,-5.625 -5.625,-5.625l-34.188,-0l0,-38.906c0,-0.908 0.654,-1.594 1.594,-1.594l2.344,0l0,2.969c0,2.299 1.926,4.219 4.219,4.219l19.469,0c2.293,0 4.219,-1.919 4.219,-4.219l0,-2.969l2.344,0c0.94,0 1.625,0.685 1.625,1.594l0,34.25c-0,0.009 -0,0.019 -0,0.028c0,1.097 0.903,2 2,2c1.097,0 2,-0.903 2,-2c0,-0.009 -0,-0.019 -0,-0.028l0,-34.25c0,-3.071 -2.555,-5.594 -5.625,-5.594l-32.594,0c-3.07,0 -5.594,2.522 -5.594,5.594l-0,38.906l-30.594,0c-3.078,0 -5.594,2.547 -5.594,5.625l-0,32.25Zm4,0l0,-2.281l3,0c2.293,0 4.219,-1.888 4.219,-4.188l0,-19.312c0,-2.3 -1.926,-4.188 -4.219,-4.188l-3,0l0,-2.281c0,-0.932 0.662,-1.625 1.594,-1.625l68.781,0c0.931,0 1.625,0.693 1.625,1.625l0,32.25c0,0.932 -0.694,1.625 -1.625,1.625l-68.781,0c-0.932,0 -1.594,-0.693 -1.594,-1.625Zm0,-6.281l0,-19.688l3,0c0.165,0 0.219,0.048 0.219,0.188l-0,19.312c0,0.14 -0.054,0.188 -0.219,0.188l-3,0Zm1.063,-40.906c0.05,1.062 0.937,1.909 2,1.909c1.098,0 2.002,-0.904 2.002,-2.002c0,-0.031 -0.001,-0.063 -0.002,-0.094c0,-10.141 6.426,-19.293 15.406,-23.188l-2,8.344c-0.037,0.154 -0.055,0.311 -0.055,0.469c0,1.102 0.907,2.009 2.009,2.009c0.926,0 1.737,-0.64 1.953,-1.54l2.906,-12.219c0.241,-1.025 -0.366,-2.074 -1.375,-2.375l-11.562,-3.594c-0.207,-0.07 -0.424,-0.106 -0.642,-0.106c-1.097,0 -2,0.903 -2,2c0,0.088 0.006,0.175 0.017,0.262c0.095,0.799 0.663,1.467 1.438,1.688l6.469,2c-9.766,4.793 -16.562,14.916 -16.562,26.25c-0.003,0.062 -0.003,0.125 0,0.188Zm43.062,-28.219l0,-2.969l19.906,0l0,2.969c0,0.14 -0.053,0.219 -0.219,0.219l-19.469,0c-0.165,0 -0.219,-0.079 -0.219,-0.219Zm22.062,65.562c-0,0.009 -0,0.019 -0,0.028c0,1.097 0.903,2 2,2c1.097,0 2,-0.903 2,-2c0,-0.009 -0,-0.019 -0,-0.028l0,-12.594c0,-0.009 0,-0.019 0,-0.028c0,-1.097 -0.903,-2 -2,-2c-1.097,0 -2,0.903 -2,2c0,0.009 0,0.019 0,0.028l0,12.594Z" style="fill:%23fff;fill-rule:nonzero;"/></svg>');
    background-size: 100px;
  }
}

/* ============================================================
   RESPONSIVE WIDTH FOR USER SELECTED CARD (HISTORY)
   ============================================================ */

/*.msg.user:has(.btn-options) .btn-options {*/
/*  width: 100%;*/
/*  padding: 0 8px;*/
/*}*/

/*.msg.user:has(.btn-options) .chat-option {*/
/*  width: 100%;*/
/*  max-width: 360px;*/
/*}*/

@media (max-width: 480px) {
  /*.msg.user:has(.btn-options) .chat-option {*/
  /*  max-width: 100%;*/
  /*}*/
}

@media (min-width: 481px) and (max-width: 768px) {
  /*.msg.user:has(.btn-options) .chat-option {*/
  /*  max-width: 340px;*/
  /*}*/
}

@media (min-width: 769px) {
  /*.msg.user:has(.btn-options) .chat-option {*/
  /*  max-width: 360px;*/
  /*}*/
}

/* ============================================================
   FOOTER (input-row) — unified bar, icon buttons without boxes
   + SVG sizing & colors
   ============================================================ */

#chatbox .input-row{
  border-top: 1px solid rgba(11, 42, 58, 0.10);
  background: transparent;
  gap: 10px;
}

#chatbox #chat-input{
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 10px 6px;
  box-shadow: none;
}

#chatbox #chat-input:focus{
  outline: none;
  box-shadow: none;
}

#chatbox #chat-clear,
#chatbox #chat-home,
#chatbox #chat-send{
  border: none;
  background: transparent;
  box-shadow: none;

  width: 40px;
  height: 40px;
  border-radius: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--bsc-navy);
  cursor: pointer;
}

#chatbox .header #chat-clear {
  color: white;
}

#chatbox #chat-send{
  color: var(--bsc-navy);
}

/* footer svg sizing */
#chatbox #chat-clear svg,
#chatbox #chat-home svg,
#chatbox #chat-send svg{
  width: 16px;
  height: 16px;
  display: block;
}

/* hover */
#chatbox #chat-clear:hover,
#chatbox #chat-home:hover,
#chatbox #chat-send:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

#chatbox #bsc-status-text{
  display: none;
}