/* Customer chat — works full-page (the support link) and inside the embed iframe. */
:root {
  --accent: #3fb950;
  --bg: #0f1216;
  --panel: #171b21;
  --panel-2: #1e242c;
  --line: #2a313b;
  --text: #e6e9ee;
  --muted: #8b95a3;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  justify-content: center;
}
body.page { padding: 24px; }
body.embed { padding: 0; }

.chat {
  width: 100%;
  max-width: 460px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
body.page .chat { height: min(680px, 100%); box-shadow: 0 12px 40px rgba(0,0,0,.45); }
body.embed .chat { border-radius: 0; border: none; max-width: none; }

.chat__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 14px;
  background: var(--panel-2); border-bottom: 1px solid var(--line);
}
/* Embedded as the dashboard corner widget, the parent floats a close button in
   the top-right — leave room so it doesn't sit on the connection status. */
body.embed .chat__head { padding-right: 46px; }
.chat__title { font-size: 14px; }
.chat__title strong { color: var(--accent); }
.chat__dot {
  display: inline-block; width: 8px; height: 8px; margin-right: 6px;
  background: var(--accent); border-radius: 2px;
}
.chat__status { font-size: 11px; color: var(--muted); }
.chat__status.ok { color: var(--accent); }
.chat__status.off { color: #e0667a; }

.chat__log {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
/* Bubbles hug their content but may grow up to the full log width, so a long
   message gets the most room before wrapping while short ones stay compact. */
.msg { display: flex; }
.msg .bubble {
  max-width: 100%; padding: 8px 11px; border-radius: 10px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.msg--customer { justify-content: flex-end; }
.msg--customer .bubble { background: var(--accent); color: #06210d; border-bottom-right-radius: 3px; }
.msg--agent .bubble { background: var(--panel-2); border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.msg--system { justify-content: center; }
.msg--system .bubble { background: transparent; color: var(--muted); font-size: 13px; text-align: center; max-width: 100%; }
.msg .who { font-size: 11px; color: var(--muted); margin: 0 0 2px; }

.chat__who { border-top: 1px solid var(--line); background: var(--panel-2); }
.chat__who summary { cursor: pointer; padding: 8px 14px; font-size: 12px; color: var(--muted); }
.chat__who-fields { display: flex; gap: 8px; padding: 0 14px 10px; }
.chat__who-fields input {
  flex: 1; min-width: 0; padding: 7px 9px; font-size: 13px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px;
}

.chat__compose { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: var(--panel-2); }
.chat__compose textarea {
  flex: 1; resize: none; max-height: 120px; padding: 9px 11px;
  font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
}
.chat__compose textarea:focus, .chat__who-fields input:focus { outline: none; border-color: var(--accent); }
.chat__compose button {
  align-self: flex-end; padding: 9px 16px; font: inherit; font-weight: 600;
  color: #06210d; background: var(--accent);
  border: none; border-radius: 8px; cursor: pointer;
}
.chat__compose button:disabled { opacity: .5; cursor: default; }