/* Modern mobile-first baseline for the client portal */
:root{
  --c-bg:#ffffff;
  --c-surface:#ffffff;
  --c-text:#0f172a;
  --c-muted:#64748b;
  --c-primary:#0d6efd;
  --c-accent:#0ea5e9;
  --c-border:#e5e7eb;
  --c-danger:#d92d20;
  --radius:12px;
}
body.client {
  color: var(--c-text);
  background: #fafafa;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.client .content { padding: clamp(10px, 2vw, 16px); }
.client h1, .client h2, .client h3 {
  letter-spacing: .2px;
}
.client a { color: var(--c-primary); }
.client a:hover { color: #0b5ed7; text-decoration: underline; }
.client table { width: 100%; }
.client .message, .client .response {
  border-radius: var(--radius);
  overflow: hidden;
}

/* Thread bubbles (optional, subtle) */
#ticketThread .message {
  background: #fff;
  border: 1px solid var(--c-border);
  margin-bottom: 10px;
}
#ticketThread .response {
  background: #f8fbff;
  border: 1px solid var(--c-border);
  margin-bottom: 10px;
}

/* Buttons */
.btn, .button {
  border-radius: 10px !important;
}

/* Small devices: tighten spacing */
@media (max-width: 520px) {
  .client .content { padding: 12px; }
  .client #header .pull-right { float: none; }
}