/* ---------- the live chat bubble ----------
   Paired with assets/livechat.js. Everything is prefixed .lc- because
   assets/chat.js (the "Get in touch" pop-up) already owns .chat and .chatm.

   ⛔ HOUSE RULES OBSERVED HERE, do not "improve" them back:
      no zoom or scale on any hover, anywhere on this site — hovers are COLOUR
      only; Nohemi is used at ExtraLight 200 and never heavier; no em dashes in
      anything the visitor reads. */

.lc {
  position: fixed;
  right: clamp(16px, 3vw, 26px);
  bottom: clamp(16px, 3vw, 26px);
  z-index: 90;                 /* over the page, under the menu overlay */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: 'Inter', sans-serif;
}

/* ---------- the button ---------- */
.lc-bubble {
  position: relative;
  width: 54px; height: 54px;
  border: 0; border-radius: 50%;
  background: var(--navy, #22415C);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(23, 41, 60, .26);
  transition: background .25s ease;
}
.lc-bubble:hover { background: var(--blue, #456485); }
.lc-bubble:focus-visible { outline: 2px solid var(--ink, #17293C); outline-offset: 3px; }

/* a reply landed while the panel was shut */
.lc-dot {
  position: absolute; top: 4px; right: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold, #D3A76A);
  border: 2px solid var(--navy, #22415C);
}

/* ---------- the panel ---------- */
.lc-panel {
  width: min(360px, calc(100vw - 32px));
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  background: #fff;
  border: 1px solid rgba(23, 41, 60, .1);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(23, 41, 60, .2);
  display: flex;
  flex-direction: column;
  transition: height .28s cubic-bezier(.22, .61, .36, 1), opacity .2s ease;
}
.lc.lc-open .lc-panel {
  height: min(520px, calc(100vh - 130px));
  opacity: 1;
  pointer-events: auto;
}

.lc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid rgba(23, 41, 60, .08);
  flex: none;
}
.lc-ttl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lc-ttl strong {
  font-family: 'Nohemi', sans-serif; font-weight: 200;
  font-size: 16px; color: var(--ink, #17293C); letter-spacing: -.01em;
}
.lc-status { font-size: 12px; color: rgba(23, 41, 60, .5); }
.lc-status.lc-on { color: #3F8F57; }
.lc-status.lc-on::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #3F8F57; margin-right: 6px; vertical-align: middle;
}
.lc-x {
  border: 0; background: none; cursor: pointer; flex: none;
  color: rgba(23, 41, 60, .4); font-size: 15px; line-height: 1; padding: 4px;
  transition: color .2s ease;
}
.lc-x:hover { color: var(--ink, #17293C); }

/* ---------- the thread ---------- */
.lc-list {
  flex: 1 1 auto; overflow-y: auto;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.lc-msg { max-width: 84%; display: flex; flex-direction: column; gap: 3px; }
.lc-me  { align-self: flex-end; align-items: flex-end; }
.lc-them { align-self: flex-start; }
.lc-name { font-size: 11px; color: rgba(23, 41, 60, .45); padding-left: 2px; }
.lc-body {
  margin: 0; padding: 9px 13px; border-radius: 14px;
  font-size: 14px; line-height: 1.5;
  white-space: pre-wrap;         /* they typed their own line breaks; keep them */
  overflow-wrap: anywhere;
}
.lc-me .lc-body   { background: var(--navy, #22415C); color: #fff; border-bottom-right-radius: 5px; }
.lc-them .lc-body { background: rgba(23, 41, 60, .055); color: var(--ink, #17293C); border-bottom-left-radius: 5px; }
.lc-note {
  align-self: center; text-align: center; max-width: 92%;
  font-size: 12.5px; line-height: 1.55; color: rgba(23, 41, 60, .5);
  padding: 2px 6px;
}

/* ---------- who they are, shown only when nobody is online ---------- */
.lc-who { display: flex; gap: 8px; padding: 0 16px 10px; flex: none; }
.lc-who[hidden] { display: none; }
.lc-in {
  flex: 1 1 0; min-width: 0;
  border: 1px solid rgba(23, 41, 60, .14); border-radius: 10px;
  padding: 8px 11px; font: inherit; font-size: 13px; color: var(--ink, #17293C);
  background: #fff;
}
.lc-in:focus { outline: none; border-color: var(--navy, #22415C); }

/* ---------- writing ---------- */
.lc-foot {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 16px 16px; border-top: 1px solid rgba(23, 41, 60, .08); flex: none;
}
.lc-box {
  flex: 1 1 auto; resize: none; max-height: 96px;
  border: 1px solid rgba(23, 41, 60, .14); border-radius: 12px;
  padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.45;
  color: var(--ink, #17293C); background: #fff;
}
.lc-box:focus { outline: none; border-color: var(--navy, #22415C); }
.lc-send {
  flex: none; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--navy, #22415C); color: #fff;
  padding: 10px 16px; font: inherit; font-size: 13.5px;
  transition: background .25s ease;
}
.lc-send:hover { background: var(--blue, #456485); }
.lc-send:disabled { background: rgba(23, 41, 60, .3); cursor: default; }

/* On a phone the panel is the screen, so it stops pretending to be a card. */
@media (max-width: 560px) {
  .lc { right: 14px; bottom: 14px; left: 14px; align-items: stretch; }
  .lc-bubble { align-self: flex-end; }
  .lc-panel { width: 100%; }
  .lc.lc-open .lc-panel { height: min(70vh, calc(100vh - 120px)); }
}

/* Somebody who has asked for less movement gets none. */
@media (prefers-reduced-motion: reduce) {
  .lc-panel { transition: none; }
}