/* Live support chat on /pages/contact. Uses the site's colour variables so dark + light mode both work. */
.chat{margin:0 0 48px;padding:24px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.rte .chat h2.chat__title,.chat__title{margin:0 0 8px;font:500 20px/1.2 var(--ff);letter-spacing:.02em;text-transform:none}
.rte .chat p.chat__intro,.chat__intro{margin:0 0 20px;color:var(--mute);font-size:14px;line-height:1.55}
.rte .chat p.chat__alt,.chat__alt{margin:16px 0 0;font-size:12.5px;color:var(--mute)}
.chat__alt a{color:inherit}
.chat form{display:grid;gap:14px}
.chat__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.chat label{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.chat input[type=text],.chat input[type=email],.chat select,.chat textarea{position:static;opacity:1;pointer-events:auto;display:block;width:100%;box-sizing:border-box;height:auto;min-height:44px;padding:11px 12px;border:1px solid var(--line);border-radius:0;background:var(--soft);color:var(--ink);font:400 15px/1.4 var(--ff);outline:0;-webkit-appearance:none;appearance:none}
.chat textarea{min-height:110px;resize:vertical}
.chat input::placeholder,.chat textarea::placeholder{color:var(--mute)}
.chat input:focus,.chat select:focus,.chat textarea:focus{border-color:var(--ink)}
.chat__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.chat__btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 28px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);font:500 12.5px/1 var(--ff);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;width:100%}
.chat__btn[disabled]{opacity:.5;cursor:default}
.chat__err{color:#c0392b;font-size:13px;min-height:0;margin:0}
.chat__log{height:min(420px,55vh);overflow-y:auto;padding:4px 2px 8px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line);margin-bottom:12px;-webkit-overflow-scrolling:touch}
.chat__msg{max-width:82%;display:flex;flex-direction:column;gap:4px}
.chat__msg--me{align-self:flex-end;align-items:flex-end}
.chat__msg--them{align-self:flex-start}
.chat__bubble{padding:10px 13px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.chat__msg--me .chat__bubble{background:var(--ink);color:var(--bg)}
.chat__msg--them .chat__bubble{background:var(--soft);color:var(--ink);border:1px solid var(--line)}
.chat__msg--sys .chat__bubble{background:transparent;border:0;padding:2px 0;color:var(--mute);font-size:13px}
.chat__meta{font-size:11px;letter-spacing:.06em;color:var(--mute)}
.chat__compose{display:flex;gap:8px;align-items:flex-end}
.chat__compose textarea{min-height:46px;height:46px;max-height:140px;resize:none;flex:1}
.chat__compose .chat__btn{width:auto;flex:0 0 auto;padding:0 20px}
.chat__foot{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:12px;color:var(--mute)}
.chat__foot button{background:none;border:0;padding:0;color:var(--mute);text-decoration:underline;cursor:pointer;font:inherit}
.chat__note{font-size:13px;color:var(--mute);margin:0 0 10px;padding:10px 12px;border:1px dashed var(--line)}
.chat__note button{background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;cursor:pointer;font:inherit}
@media (max-width:640px){.chat{padding:18px 16px;margin-left:-2px;margin-right:-2px}.chat__row{grid-template-columns:1fr}.chat__msg{max-width:90%}.chat input,.chat select,.chat textarea{font-size:16px}}