:root{
  --gold:#D4AF37;
  --aqua:#33fcff;

  --bg:#0b0f14;
  --panel:#111826;
  --panel2:#0f1623;
  --text:#e7eef9;
  --muted:#9db0c8;
  --border:#203044;
  --accent:#7aa2ff;

  /* Donut palette (muted, consistent) */
  --c-sleepdown:#2b3a52;
  --c-sleepup:#334a63;
  --c-grazing:#2f5b4c;
  --c-eattrough:#2d6a6a;
  --c-eatgrain:#6a5a2d;
  --c-walk:#3f4a2b;
  --c-stand:#4b3a52;
  --c-other:#2a2f3a;

  /* Health scale */
  --h0:#ff4d4d;
  --h1:#ffb84d;
  --h2:#ffe04d;
  --h3:#78d96b;
  --h4:#42d2ff;
}

/* -----------------------------
   Global
------------------------------ */
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg);
  color:var(--text);
}
a{color:var(--accent); text-decoration:none}

.wrap{max-width:1050px; margin:0 auto; padding:18px}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border:1px solid var(--border); border-radius:14px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));
}
.title{font-weight:700; letter-spacing:0.2px}
.sub{color:var(--muted); font-size:13px}

.right{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end;
  text-align:right;
}
.pill{
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
  padding:6px 10px; border-radius:999px;
  font-size:12px; color:var(--muted);
  display:inline-flex; gap:8px; align-items:center;
}
.pill strong{color:var(--text); font-weight:650}

.card{
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  overflow:hidden;
}
.card .hd{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex; justify-content:space-between; align-items:flex-end; gap:10px;
}
.card .hd .h1{font-weight:700}
.card .hd .h2{color:var(--muted); font-size:13px}
.card .bd{padding:12px 14px}

.chatlog{
  display:flex; flex-direction:column; gap:10px;
  min-height:420px;
  max-height:68vh;
  overflow:auto;
  padding-right:6px;
}
.msg{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,0.02);
  font-size:17px;
  line-height:1.35;
  white-space:pre-wrap;
  word-break:break-word;
}
.msg.you{border-color:rgba(122,162,255,0.25)}
.msg.bailey{border-color:rgba(255,255,255,0.10)}
.msg .who{font-size:12px; color:var(--muted); margin-bottom:6px}
.msg.bailey .who, .msg.bailey .body{ color: var(--gold); }
.msg.you .who, .msg.you .body{ color: var(--aqua); }
textarea::placeholder{ color: var(--aqua); opacity:0.75; }

/* -----------------------------
   Dashboard card inside chat
------------------------------ */
.dash{
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background:rgba(255,255,255,0.02);
  padding:12px;
}
.dashHd{
  display:flex; justify-content:space-between; gap:10px; align-items:flex-end;
  margin-bottom:10px;
}
.dashTitle{font-weight:700}
.dashSub{color:var(--muted); font-size:13px}

.dashGrid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "activities health"
    "events health";
  gap:12px;
}
.dashGrid > .dashCol:nth-child(1){ grid-area: activities; }
.dashGrid > .dashCol:nth-child(2){ grid-area: events; }
.dashGrid > .dashCol:nth-child(3){ grid-area: health; }

.dashCol{
  position:relative;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:10px;
  background:rgba(255,255,255,0.015);
  min-width:0;
  overflow:hidden; /* prevents cross-column paint on small screens */
}
.colTitle{font-weight:650; margin-bottom:8px}
.muted{color:var(--muted)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

/* Donut (desktop: horizontal) */
.donutWrap{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
}
.donutSvg{ width:140px; height:140px; flex:0 0 auto; }
.donutLegend{
  margin-left:auto;
  text-align:left;
  max-width:320px;
  width:100%;
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  font-size:13px;
  color:var(--muted);
}
.legRow{ width:100%; display:flex; gap:10px; align-items:center; min-width:0; }
.swatch{
  width:12px; height:12px; border-radius:4px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08);
  flex:0 0 auto;
}
.legTxt{ width:100%; display:flex; justify-content:space-between; gap:12px; min-width:0; }
.legTxt b{
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.legTxt span{
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
  color:var(--muted);
}
.donutCenter{ font-size:12px; fill:var(--muted); }
.donutCenterStrong{ font-size:18px; fill:var(--text); font-weight:700; }

/* Tabs */
.tabs{ display:flex; gap:8px; margin:8px 0 10px 0; }
.tab{
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.02);
  color:var(--muted);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  cursor:pointer;
}
.tab.active{
  color:var(--text);
  border-color:rgba(122,162,255,0.35);
  background:rgba(122,162,255,0.08);
}

/* Events */
.events{ display:flex; flex-direction:column; gap:8px; font-size:13px; }
.evt{
  display:flex; justify-content:space-between; gap:10px;
  padding:8px 8px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  background:rgba(255,255,255,0.01);
}
.evt .t{font-weight:650; min-width:0;}
.evt .ts{color:var(--muted); font-size:12px; white-space:nowrap; min-width:0;}

/* Health */
.healthBox{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding-top:4px;
}
.healthVal{
  font-size:100px;
  font-weight:500;
  letter-spacing:0.2px;
  line-height:0.95;
  text-align:center;
}
.healthDesc{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
  max-width:320px;
  text-align:center;
}
.thumbs{
  position:absolute;
  right:10px;
  bottom:10px;
  display:flex;
  gap:8px;
  align-items:center;
}
.thumbBtn{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.03);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:rgba(231,238,249,0.85);
}
.thumbBtn:hover{ background:rgba(255,255,255,0.06); }
.thumbBtn svg{ width:18px; height:18px; }

.scaleWrap{
  width:100%;
  position:relative;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  overflow:hidden;
  background: linear-gradient(90deg, var(--h0), var(--h1), var(--h2), var(--h3), var(--h4));
}
.marker{
  position:absolute;
  top:-6px;
  width:2px;
  height:30px;
  background:rgba(231,238,249,0.9);
  box-shadow:0 0 10px rgba(231,238,249,0.35);
}
.scaleLabels{
  width:100%;
  display:flex; justify-content:space-between;
  font-size:12px; color:var(--muted);
  margin-top:6px;
}

/* Composer */
.thinking{
  display:none;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:13px;
  margin-top:10px;
}
.dots{ display:inline-flex; gap:4px; align-items:center; }
.dot{
  width:6px; height:6px; border-radius:50%;
  background:rgba(231,238,249,0.55);
  animation: blink 1.1s infinite ease-in-out;
}
.dot:nth-child(2){animation-delay:0.15s}
.dot:nth-child(3){animation-delay:0.30s}
@keyframes blink{
  0%, 80%, 100%{opacity:0.25}
  40%{opacity:1}
}

.composer{ display:flex; gap:10px; margin-top:12px; align-items:flex-end; }
textarea{
  flex:1;
  min-height:44px;
  max-height:160px;
  resize:vertical;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.02);
  color:var(--text);
  outline:none;
  font-size:14px;
}
button:not(.btn-primary){
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(122,162,255,0.12);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:650;
}
button:disabled{opacity:0.6; cursor:not-allowed}
.smallrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px}

/* -----------------------------
   Responsive
------------------------------ */

/* <= 900px: tighten */
@media (max-width: 900px){
  .wrap{padding:12px;}

  .dashGrid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas: "activities events health";
    gap:8px;
  }

  .dashCol{ padding:8px; border-radius:12px; }
  .colTitle{font-size:13px; margin-bottom:6px;}
  .dashTitle{font-size:16px;}
  .dashSub{font-size:12px;}

  .donutSvg{width:112px; height:112px;}
  .donutLegend{gap:6px; font-size:12px; max-width:260px;}
  .healthVal{font-size:64px;}
  .healthDesc{font-size:12px; max-width:220px;}
  .thumbBtn{width:34px; height:34px; border-radius:10px;}
}

/* <= 520px: REAL responsive layout (no transform scaling) */
@media (max-width: 520px){
  .wrap{padding:10px;}
  .dash{padding:10px;}

  /* Stack dashboard vertically */
  .dashGrid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "activities"
      "health"
      "events";
    gap:10px;
  }

  .dashCol{ padding:10px; }

  /* Donut becomes vertical: donut on top, legend below */
  .donutWrap{

    align-items:center;
    justify-content:flex-start;
    gap:10px;
  }
  .donutSvg{ width:124px; height:124px; }
  .donutLegend{
    max-width:100%;
    width:100%;
    font-size:12px;
    gap:6px;
  }
  .legTxt{ gap:10px; }
  .legTxt b{ max-width:70%; }

  /* Health: reduce dominance */
  .healthVal{ font-size:72px; }
  .healthDesc{ font-size:12px; max-width:100%; }

  /* Events: tighten */
  .events{ font-size:12px; }
  .evt{ padding:8px; }
  .evt .t{ font-size:12px; }
  .evt .ts{ font-size:11px; }

  /* Prevent any horizontal bleed */
  .dashCol{ overflow:hidden; }
}
/* ===============================
REGISTER / ONBOARDING
Matches Bailey chat UI style
=============================== */

.page-center {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:linear-gradient(180deg,#020812,#06152c);
}

.onboard-card{
  width:100%;
  max-width:520px;
  background:linear-gradient(180deg,#0c1c36,#071428);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  padding:40px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}

.onboard-title{
  font-size:28px;
  font-weight:600;
  margin-bottom:10px;
}

.onboard-sub{
  color:#9fb4d1;
  margin-bottom:30px;
}

.form-row{
  margin-bottom:20px;
}

.form-label{
  display:block;
  font-size:14px;
  margin-bottom:6px;
  color:#9fb4d1;
}

.form-input{
  width:100%;
  padding:14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.1);
  background:#050c18;
  color:#fff;
  font-size:15px;
}

.form-input:focus{
  outline:none;
  border-color:#d4af37;
  box-shadow:0 0 0 2px rgba(212,175,55,.15);
}

.btn-primary{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:none;
  background:linear-gradient(180deg,#e1c45c,#cfa52d);
  color:#111;
  font-weight:600;
  font-size:16px;
  cursor:pointer;
}

.btn-primary:hover{
  opacity:.95;
}

/* mobile */

@media (max-width:640px){

  .onboard-card{
    padding:26px;
    border-radius:14px;
  }

  .onboard-title{
    font-size:24px;
  }

}