/* assets/css/livechat.css — floating live-chat widget (public + panel + auth).
   Theme-aware: follows [data-theme] via tokens.css vars (dark on dark, light on light). */
#lcFab {
  position: fixed; right: 18px; bottom: 18px; z-index: 4000;
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--color-primary, #FF6A00); color: var(--text-on-primary, #1a1d20);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transition: transform .18s ease;
}
#lcFab:hover { transform: translateY(-2px) scale(1.03); }
#lcFab:focus-visible { outline: 2px solid var(--color-primary, #FF6A00); outline-offset: 2px; }
#lcFab svg { width: 26px; height: 26px; }
#lcDot {
  position: absolute; top: 2px; right: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #e11d48; border: 2px solid var(--bg-color, #fff);
  display: none;
}
#lcDot.on { display: block; }

#lcPanel {
  position: fixed; right: 18px; bottom: 88px; z-index: 4000;
  width: 360px; max-width: calc(100vw - 24px);
  height: 480px; max-height: calc(100dvh - 120px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-surface); color: var(--text-main);
  border: 1px solid var(--border-color); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
#lcPanel[hidden] { display: none; }
.lc-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--bg-surface); color: var(--text-main);
  border-bottom: 1px solid var(--border-color);
}
.lc-head .lc-ava {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  background: var(--color-primary); color: var(--text-on-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}
.lc-head b { display: block; font-size: .92rem; line-height: 1.2; color: var(--text-main); }
.lc-head small { display: block; font-size: .72rem; color: var(--text-muted); }
.lc-head small .lc-online { color: var(--color-success, #059669); font-weight: 800; }
.lc-head button {
  margin-left: auto; background: none; border: none; color: var(--text-muted);
  font-size: 1.3rem; cursor: pointer; line-height: 1; padding: 6px;
  min-width: 36px; min-height: 36px;
}
.lc-head button:hover { color: var(--text-main); }
#lcMsgs {
  flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex;
  flex-direction: column; gap: 8px; background: var(--bg-soft);
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.lc-msg {
  max-width: 82%; padding: 8px 12px; border-radius: 14px;
  font-size: .86rem; line-height: 1.5; word-break: break-word;
}
.lc-msg.user {
  align-self: flex-end; background: var(--color-primary); color: var(--text-on-primary);
  border-bottom-right-radius: 4px;
}
.lc-msg.admin {
  align-self: flex-start; background: var(--bg-color); color: var(--text-main);
  border: 1px solid var(--border-color);
  border-bottom-left-radius: 4px;
}
.lc-msg time { display: block; font-size: .66rem; opacity: .6; margin-top: 2px; }
.lc-empty { text-align: center; font-size: .84rem; color: var(--text-muted); margin: auto 0; }
.lc-form { padding: 10px; border-top: 1px solid var(--border-color); background: var(--bg-surface); }
.lc-idrow { display: flex; gap: 6px; margin-bottom: 8px; }
.lc-idrow input {
  flex: 1; min-width: 0; padding: 9px 10px; font-size: .82rem;
  border: 1px solid var(--border-color); border-radius: 9px;
  background: var(--bg-color); color: var(--text-main); min-height: 40px;
}
.lc-row { display: flex; gap: 6px; }
.lc-row input[type="text"] {
  flex: 1; min-width: 0; padding: 10px 12px; font-size: .88rem;
  border: 1px solid var(--border-color); border-radius: 10px;
  background: var(--bg-color); color: var(--text-main); min-height: 44px;
}
.lc-row input::placeholder, .lc-idrow input::placeholder { color: var(--text-muted); opacity: .8; }
.lc-row button {
  flex: 0 0 46px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--color-primary); color: var(--text-on-primary);
  font-size: 1.1rem; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.lc-err { font-size: .76rem; color: #e11d48; margin-top: 6px; min-height: 1em; }

@media (max-width: 640px) {
  #lcPanel {
    left: auto; right: 12px; bottom: 84px; width: min(330px, calc(100vw - 24px));
    height: min(460px, calc(100dvh - 220px)); max-height: none;
  }
  #lcFab { right: 12px; bottom: 14px; width: 50px; height: 50px; }
  #lcFab svg { width: 22px; height: 22px; }
  .lc-head { padding: 10px 12px; }
  .lc-head .lc-ava { width: 30px; height: 30px; flex-basis: 30px; }
  .lc-head b { font-size: .86rem; }
  #lcMsgs { padding: 10px; }
  .lc-form { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #lcFab { transition: none; }
}