/* ==========================================================================
   AI Team Studio — shared design system
   Role colors are the heart of the app: everyone in the chat has a color set
   per project (default: the participant YELLOW and the trio BLUE, GREEN,
   RED). Message rows carry their role's colors as custom properties
   (--role-color / --role-soft / --role-deep / --role-text, see js/app.js),
   so one rule set styles any team.
   ========================================================================== */

:root {
  /* Brand + participant palette (accent = avatars/labels, soft = bubbles, deep = text on soft) */
  --yellow:        #eab308;
  --yellow-soft:   #fdf1bd;
  --yellow-deep:   #854d0e;
  --blue:          #3b82f6;
  --green:         #22c55e;
  --red:           #ef4444;

  /* Neutrals */
  --ink:        #0f172a;
  --ink-2:      #334155;
  --muted:      #64748b;
  --faint:      #94a3b8;
  --line:       #e2e8f0;
  --line-soft:  #eef2f7;
  --bg:         #f2f5fa;
  --card:       #ffffff;

  /* Accent for primary actions */
  --accent:       #4f46e5;
  --accent-hover: #4338ca;
  --accent-soft:  #eef2ff;

  --danger:      #dc2626;
  --danger-soft: #fef2f2;

  --radius-s: 8px;
  --radius:   12px;
  --radius-l: 18px;

  --shadow-s: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow:   0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px -8px rgba(15, 23, 42, .12);
  --shadow-l: 0 24px 60px -12px rgba(15, 23, 42, .25);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: 0.92em; }
::selection { background: #c7d2fe; }

/* ---- App shell ------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px; height: 58px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 15px; white-space: nowrap; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand-dots { display: grid; grid-template-columns: repeat(2, 8px); gap: 3px; }
.brand-dots span { width: 8px; height: 8px; border-radius: 50%; }
.brand-dots span:nth-child(1) { background: var(--blue); }
.brand-dots span:nth-child(2) { background: var(--green); }
.brand-dots span:nth-child(3) { background: var(--yellow); }
.brand-dots span:nth-child(4) { background: var(--red); }
.brand small { font-weight: 500; color: var(--muted); }
.topbar .spacer { flex: 1; }
.topbar-context { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-context .badge { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }

.page { max-width: 900px; margin: 0 auto; padding: 28px 20px 96px; }
.page-wide { max-width: 1200px; }
.page-head { margin: 6px 0 22px; }
.page-head h1 { font-size: 24px; }
.page-head p { color: var(--muted); margin-top: 4px; }

/* ---- Cards ----------------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  padding: 22px;
}
.card + .card { margin-top: 18px; }
.card-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card-title .hint { font-weight: 400; }
.card-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.card-head { margin-bottom: 16px; }

/* ---- Forms ------------------------------------------------------------------ */
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.input, .textarea, .select {
  width: 100%;
  padding: 9px 12px;
  font: inherit; font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}
.textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.input[readonly] { background: #f8fafc; color: var(--ink-2); }
.input.mono, .textarea.mono { font-family: var(--mono); font-size: 13px; }
.input-group { display: flex; gap: 8px; }
.input-group .input { flex: 1; min-width: 0; }

/* Toggle switch */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track {
  width: 40px; height: 24px; border-radius: 999px; background: #cbd5e1;
  position: relative; transition: background .18s; flex-shrink: 0;
}
.switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .18s;
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { box-shadow: 0 0 0 3px rgba(79,70,229,.25); }
.switch .switch-label { font-size: 14px; font-weight: 600; color: var(--ink-2); }

/* ---- Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s, transform .05s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: #f8fafc; border-color: #cbd5e1; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-dark:hover { background: #1e293b; border-color: #1e293b; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--line-soft); border-color: transparent; color: var(--ink-2); }
.btn-danger { color: var(--danger); border-color: #fecaca; background: #fff; }
.btn-danger:hover { background: var(--danger-soft); border-color: #fca5a5; }
.btn-sm { padding: 6px 11px; font-size: 13px; border-radius: 8px; }
.btn-lg { padding: 12px 22px; font-size: 15px; border-radius: 12px; }
.btn-block { width: 100%; }

/* ---- Badges / pills -------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  background: var(--line-soft); color: var(--ink-2);
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; }
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-test { background: #fdf1bd; color: #854d0e; }

/* ---- Tabs ---------------------------------------------------------------------- */
.tabs {
  display: inline-flex; gap: 4px;
  background: var(--line-soft);
  border-radius: 11px; padding: 4px;
}
.tabs button {
  font: inherit; font-size: 13.5px; font-weight: 600;
  border: none; background: transparent; color: var(--muted);
  padding: 7px 16px; border-radius: 8px; cursor: pointer;
  transition: background .14s, color .14s;
}
.tabs button:hover { color: var(--ink-2); }
.tabs button.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-s); }

/* ---- Modal ------------------------------------------------------------------------ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
  width: 100%; max-width: 500px;
  background: #fff; border-radius: 20px;
  box-shadow: var(--shadow-l);
  padding: 26px;
  transform: translateY(10px) scale(.98);
  transition: transform .18s;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}
.modal-backdrop.open .modal { transform: none; }
.modal h2 { font-size: 18px; margin-bottom: 6px; }
.modal .modal-sub { color: var(--muted); font-size: 14px; margin-bottom: 18px; }

/* ---- Toast -------------------------------------------------------------------------- */
#toastHost {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--ink); color: #fff;
  font-size: 13.5px; font-weight: 500;
  padding: 10px 18px; border-radius: 999px;
  box-shadow: var(--shadow);
  animation: toast-in .18s ease-out;
}
.toast.error { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ==========================================================================
   Chat components (used by aiTeam.php and data.php)
   ========================================================================== */

/* The participant's colors as a fallback set; teammates always carry theirs inline. */
.avatar-human, .msg-human, .n-human {
  --role-color: var(--yellow); --role-soft: var(--yellow-soft); --role-deep: var(--yellow-deep); --role-text: #fff;
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800;
  color: var(--role-text, #fff);
  background: var(--role-color, var(--faint));
  flex-shrink: 0;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.12);
}

/* A picture instead of the initial (the color stays as a ring while it loads) */
.avatar.has-img {
  background-size: cover; background-position: center; background-repeat: no-repeat;
  color: transparent; box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
}

.msg { display: flex; gap: 10px; padding: 2px 0; margin-top: 14px; }
.msg.grouped { margin-top: 3px; }
.msg .avatar-slot { width: 34px; flex-shrink: 0; }
.msg-body { max-width: min(76%, 560px); display: flex; flex-direction: column; align-items: flex-start; }
.msg-meta { display: flex; align-items: baseline; gap: 8px; margin: 0 4px 3px; }
.msg-name { font-size: 12.5px; font-weight: 700; color: var(--role-deep, var(--ink-2)); }
.msg-time { font-size: 11px; color: var(--faint); }
.msg-bubble {
  padding: 8px 13px;
  border-radius: 16px;
  border-top-left-radius: 6px;
  font-size: 14.5px;
  white-space: pre-wrap; word-break: break-word;
  animation: bubble-in .16s ease-out;
  background: var(--role-soft, var(--line-soft));
  color: var(--role-deep, var(--ink));
}
.msg.grouped .msg-bubble { border-radius: 16px; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(4px); } }

/* A note under a message (data page: "the director did not respond to this") */
.msg-note {
  font-size: 12px; color: #92400e; background: #fef3c7; border: 1px solid #fcd34d;
  border-radius: 8px; padding: 4px 9px; margin-top: 5px; max-width: 100%;
}
.msg-note i { margin-right: 4px; }

/* Human (you) sits on the right */
.msg-human { flex-direction: row-reverse; }
.msg-human .msg-body { align-items: flex-end; }
.msg-human .msg-bubble { border-top-left-radius: 16px; border-top-right-radius: 6px; }
.msg-human.grouped .msg-bubble { border-top-right-radius: 16px; }

/* Typing indicator */
.typing-bubble { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; }
.typing-bubble .t-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: .45;
  animation: typing-bounce 1.2s infinite;
}
.typing-bubble .t-dot:nth-child(2) { animation-delay: .15s; }
.typing-bubble .t-dot:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: .9; }
}
.msg.typing-row { transition: opacity .35s; }
.msg.typing-row.fading { opacity: 0; }

/* Day/system divider */
.chat-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--faint); font-size: 12px; font-weight: 600;
  margin: 18px 0 4px;
}
.chat-divider::before, .chat-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ==========================================================================
   Formatted text (the instructions above the chat in aiTeam.php, and the
   editor for them in settings.php). Both use these rules, so the editor shows
   the text as participants see it. The format: includes/richtext.php.
   ========================================================================== */
.richtext { font-size: 15px; line-height: 1.5; color: var(--ink); overflow-wrap: break-word; overflow-wrap: anywhere; }
.richtext p { margin: 0; }
.richtext ul, .richtext ol { margin: 4px 0; padding-left: 26px; }
.richtext li { margin: 2px 0; }
.richtext li > ul, .richtext li > ol { margin: 2px 0 0; }
.richtext strong, .richtext b { font-weight: 700; }

/* ---- Misc utilities --------------------------------------------------------- */
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }
.mt-1 { margin-top: 6px; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 20px; }
.mb-2 { margin-bottom: 12px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.hidden { display: none !important; }
.text-center { text-align: center; }

/* Spinner */
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Scrollbars (webkit) */
.scroll-slim::-webkit-scrollbar { width: 10px; }
.scroll-slim::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
.scroll-slim::-webkit-scrollbar-thumb:hover { background: #94a3b8; border: 3px solid transparent; background-clip: content-box; }