/* ClinEnv v23 */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* White background */
  --bg: #EEF2F8;

  --blue:   #2E86E8;
  --teal:   #0AADA8;
  --orange: #F07A1A;
  --green:  #1AAD6A;
  --red:    #E83A3A;
  --yellow: #F5C800;

  --font: 'DM Sans', -apple-system, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --pacifico: 'Pacifico', cursive;

  --r8:8px; --r12:12px; --r16:16px; --r20:20px; --r24:24px; --rpill:9999px;
  --t1:#1a2540; --t2:#3d5070; --t3:#7a90b0;

  /* Clay shadow on white background */
  --clay: 8px 8px 20px rgba(160,180,210,.45), inset -6px -6px 12px rgba(160,180,210,.2), inset 0 8px 20px rgba(255,255,255,.9);
  --clay-sm: 4px 4px 12px rgba(160,180,210,.4), inset -3px -3px 7px rgba(160,180,210,.15), inset 0 5px 12px rgba(255,255,255,.85);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;font-family:var(--font);font-size:14px;line-height:1.5;overflow:hidden;background:var(--bg);color:var(--t1);-webkit-font-smoothing:antialiased;}

/* ── BACKGROUND SHAPES ── */
.bg-shapes{position:fixed;inset:0;pointer-events:none;z-index:0;}

.bgs{position:absolute;filter:drop-shadow(4px 6px 12px rgba(0,0,0,.18)) drop-shadow(-2px -2px 6px rgba(255,255,255,.8));opacity:.55;}
.bgs svg{overflow:visible;}

/* Spread across full background */
.b1{top:5%;  left:8%;  animation:float1 7s   ease-in-out infinite;}
.b2{top:10%; left:55%; animation:float2 9s   ease-in-out infinite;}
.b3{top:45%; left:15%; animation:float3 8s   ease-in-out infinite;}
.b4{top:60%; left:72%; animation:float1 11s  ease-in-out infinite;}
.b5{top:30%; left:40%; animation:float2 6s   ease-in-out infinite;}
.b6{top:75%; left:30%; animation:float3 10s  ease-in-out infinite;}
.b7{top:20%; left:82%; animation:float1 8.5s ease-in-out infinite;}

@keyframes float1{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-16px) rotate(3deg)}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(12px) rotate(-4deg)}}
@keyframes float3{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-9px) rotate(2deg)}}

#app{width:100vw;height:100vh;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1;}
.view{display:none;width:100%;height:100%;flex-direction:column;flex:1;overflow:hidden;}
.view.active{display:flex;animation:vf .2s ease;}
@keyframes vf{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ── TOP BAR ── */
.top-bar{
  display:flex;align-items:center;justify-content:space-between;
  margin:12px 16px 0;height:52px;padding:0 18px;flex-shrink:0;
  background:rgba(255,255,255,.92);backdrop-filter:blur(16px);
  border-radius:var(--r16);
  box-shadow:var(--clay);
  z-index:10;
}
.logo{display:flex;align-items:center;gap:10px;}
/* Logo: Pacifico with outline/emboss — no colored block */
.logo-name{
  font-family:var(--pacifico);font-size:22px;
  color:var(--blue);
  text-shadow:1px 1px 0 rgba(255,255,255,.9),-1px -1px 0 rgba(46,134,232,.2),2px 3px 6px rgba(46,134,232,.25);
  letter-spacing:.5px;
}
.logo-sep{color:rgba(46,134,232,.3);font-weight:300;font-size:18px;}
.logo-sub{font-size:12px;color:var(--t3);font-weight:500;}

.sys-status{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;color:var(--green);
  font-family:var(--mono);letter-spacing:.05em;
  padding:5px 14px;border-radius:var(--rpill);
  background:rgba(26,173,106,.08);
  box-shadow:inset 2px 2px 5px rgba(0,0,0,.06),inset -2px -2px 4px rgba(255,255,255,.8);
}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.dot.pulse{animation:dpulse 2s ease-in-out infinite;}
@keyframes dpulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── CONFIG ── */
.config-main{flex:1;overflow-y:auto;display:flex;justify-content:center;align-items:flex-start;padding:28px 24px;}
.config-card{
  width:100%;max-width:560px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(20px);
  border-radius:var(--r24);overflow:hidden;
  box-shadow:var(--clay);
}
.card-header{
  background:var(--blue);padding:24px 32px 20px;
  box-shadow:inset -5px -5px 12px rgba(46,134,232,.55),inset 5px 5px 12px rgba(255,255,255,.25);
}
.card-header h1{
  font-family:var(--font);font-size:22px;font-weight:700;color:#fff;
  letter-spacing:-.02em;
  text-shadow:0 2px 6px rgba(0,0,0,.2);
}
.card-header p{font-size:12px;color:rgba(255,255,255,.75);margin-top:4px;}
.card-body{padding:24px 32px;display:flex;flex-direction:column;gap:20px;}

.hdiv{height:0;border-top:1px solid rgba(46,134,232,.12);box-shadow:0 1px 0 rgba(255,255,255,.9);}
.sec-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);font-family:var(--mono);margin-bottom:-8px;}

.mode-row{display:flex;gap:10px;}
.mode-btn{
  flex:1;height:42px;border:none;border-radius:var(--r12);
  background:rgba(255,255,255,.8);color:var(--t2);
  font-family:var(--font);font-size:13px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;
  box-shadow:var(--clay-sm);transition:all 150ms;
}
.mode-btn:active{box-shadow:inset 3px 3px 7px rgba(0,0,0,.1),inset -3px -3px 5px rgba(255,255,255,.7);}
.mode-btn.active{background:var(--blue);color:#fff;box-shadow:4px 4px 12px rgba(46,134,232,.4),inset -4px -4px 8px rgba(46,134,232,.5),inset 0 6px 14px rgba(255,255,255,.25);}

.form-grid{display:flex;flex-direction:column;gap:13px;}
.form-row{display:flex;gap:12px;align-items:flex-end;}
.form-col{display:flex;flex-direction:column;gap:5px;flex:1;}
.form-section{transition:opacity .2s;}
.form-section.disabled{opacity:.3;pointer-events:none;}

.f-label{font-size:12px;font-weight:600;color:var(--t2);}
.f-input,.f-select{
  height:38px;padding:0 12px;
  background:#fff;border:1.5px solid rgba(46,134,232,.2);border-radius:var(--r8);
  color:var(--t1);font-family:var(--font);font-size:13px;outline:none;width:100%;
  box-shadow:0 2px 6px rgba(46,134,232,.1);transition:border-color 150ms,box-shadow 150ms;
}
.f-input:focus,.f-select:focus{border-color:var(--blue);box-shadow:0 2px 6px rgba(46,134,232,.15),0 0 0 3px rgba(46,134,232,.1);}
.f-input[readonly]{color:var(--blue);font-weight:600;background:rgba(46,134,232,.04);border-color:rgba(46,134,232,.15);}
.f-input::placeholder{color:var(--t3);}
.sel-wrap{position:relative;}
.sel-wrap::after{content:'▾';position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none;font-size:11px;}
.f-select{appearance:none;cursor:pointer;}

.btn-ghost{
  height:38px;padding:0 14px;border:1.5px solid rgba(46,134,232,.2);border-radius:var(--r8);
  background:#fff;color:var(--t2);font-family:var(--font);font-size:13px;font-weight:600;
  cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;
  box-shadow:0 2px 6px rgba(46,134,232,.1);transition:all 150ms;
}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);}

.case-chips{display:flex;gap:7px;flex-wrap:wrap;}
.chip{padding:4px 12px;border-radius:var(--rpill);font-size:11px;font-weight:700;font-family:var(--mono);color:#fff;}
.chip-blue  {background:var(--blue);  box-shadow:2px 2px 6px rgba(46,134,232,.4), inset -2px -2px 4px rgba(46,134,232,.4), inset 2px 2px 4px rgba(255,255,255,.3);}
.chip-teal  {background:var(--teal);  box-shadow:2px 2px 6px rgba(10,173,168,.4), inset -2px -2px 4px rgba(10,173,168,.4), inset 2px 2px 4px rgba(255,255,255,.3);}
.chip-orange{background:var(--orange);box-shadow:2px 2px 6px rgba(240,122,26,.4), inset -2px -2px 4px rgba(240,122,26,.4), inset 2px 2px 4px rgba(255,255,255,.3);}

.launch-wrap{display:flex;justify-content:flex-end;}
.btn-launch{
  height:44px;padding:0 44px;border:none;border-radius:var(--r12);
  background:var(--blue);color:#fff;
  font-family:var(--font);font-size:14px;font-weight:700;letter-spacing:.03em;
  cursor:pointer;
  box-shadow:5px 5px 14px rgba(46,134,232,.45),inset -5px -5px 12px rgba(46,134,232,.5),inset 0 8px 16px rgba(255,255,255,.25);
  transition:all 150ms;
}
.btn-launch:hover{transform:translateY(-2px);box-shadow:7px 9px 20px rgba(46,134,232,.5),inset -5px -5px 12px rgba(46,134,232,.5),inset 0 8px 16px rgba(255,255,255,.25);}
.btn-launch:active{transform:scale(.98);box-shadow:inset 3px 3px 8px rgba(46,134,232,.5),inset -3px -3px 6px rgba(255,255,255,.2);}

/* ── EVAL VIEW ── */
#eval-canvas{
  flex:1;display:flex;flex-direction:row;
  overflow:visible;padding:12px 16px 16px;gap:12px;position:relative;
}

/* 4 chat rooms — 2×2, takes ~58% width */
#chat-grid{
  flex:0 0 58%;display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:10px;overflow:visible;
  padding:6px;margin:-6px;
}

.chat-room{
  background:rgba(255,255,255,.9);backdrop-filter:blur(14px);
  border-radius:var(--r16);
  display:flex;flex-direction:column;
  box-shadow:var(--clay);
  transition:transform 150ms;
  /* overflow visible so shadow escapes, clip-path handles rounding */
  overflow:visible;
}
/* clip header corners without hiding shadow */
.room-header{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;flex-shrink:0;
  border-radius:var(--r16) var(--r16) 0 0;
  box-shadow:inset -3px -3px 8px rgba(0,0,0,.15),inset 3px 3px 8px rgba(255,255,255,.2);
}
/* msgs area clips its own scroll content */
.room-msgs{
  flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:4px;
  padding:8px 10px;min-height:0;
  scrollbar-width:thin;scrollbar-color:rgba(46,134,232,.2) transparent;
}
.room-input{
  display:flex;align-items:stretch;height:36px;flex-shrink:0;
  border-top:1px solid rgba(46,134,232,.1);background:rgba(255,255,255,.5);
  border-radius:0 0 var(--r16) var(--r16);
}
.chat-room:hover{transform:translateY(-2px);}
.rh-blue  {background:var(--blue);}
.rh-teal  {background:var(--teal);}
.rh-orange{background:var(--orange);}
.rh-green {background:var(--green);}
.room-icon{font-size:14px;line-height:1;}
.room-name{font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.2);}
.room-badge{margin-left:auto;padding:1px 7px;border-radius:var(--rpill);font-size:10px;font-weight:700;color:#fff;opacity:.8;font-family:var(--mono);background:rgba(0,0,0,.2);}
.nempty{font-size:11px;color:var(--t3);text-align:center;padding:8px 0;font-style:italic;}
.bbl{padding:5px 9px;border-radius:var(--r12);font-size:11px;line-height:1.4;max-width:88%;word-break:break-word;animation:bin .1s ease;}
@keyframes bin{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
.bbl.sent{background:var(--blue);color:#fff;align-self:flex-end;box-shadow:2px 2px 6px rgba(46,134,232,.3),inset -2px -2px 4px rgba(46,134,232,.4),inset 2px 2px 4px rgba(255,255,255,.2);}
.bbl.recv{background:rgba(255,255,255,.9);color:var(--t2);align-self:flex-start;box-shadow:2px 2px 5px rgba(0,0,0,.1);}
.bbl.reason{background:none;box-shadow:none;color:var(--t3);font-size:10px;font-style:italic;cursor:pointer;padding:1px 0;}
.room-in:disabled{opacity:.4;}
.room-send{width:36px;border:none;border-left:1px solid rgba(46,134,232,.1);background:transparent;color:var(--blue);font-size:15px;font-weight:700;cursor:pointer;transition:background 120ms;}
.room-send:hover{background:rgba(46,134,232,.07);}

/* ── RIGHT CONTROL PANEL ── */
#ctrl-panel{
  flex:1;
  display:flex;flex-direction:column;gap:10px;
  overflow:hidden;min-width:0;
}

/* Stage strip */
.stage-strip{
  display:flex;align-items:stretch;height:42px;flex-shrink:0;
  background:rgba(255,255,255,.9);border-radius:var(--r12);overflow:hidden;
  box-shadow:var(--clay-sm);
}
.stage-accent{
  background:var(--blue);color:#fff;padding:0 14px;
  display:flex;align-items:center;
  font-size:11px;font-weight:700;font-family:var(--mono);white-space:nowrap;
  box-shadow:inset -3px 0 8px rgba(0,0,0,.12);
}
.stage-mid{display:flex;align-items:center;gap:10px;flex:1;padding:0 12px;}
.prog-track{flex:1;height:5px;border-radius:var(--rpill);background:rgba(46,134,232,.15);overflow:hidden;}
.prog-fill{height:100%;background:var(--blue);border-radius:var(--rpill);transition:width .4s ease;}
.turn-lbl{font-size:10px;color:var(--t3);font-family:var(--mono);white-space:nowrap;}
.btn-back{
  height:100%;padding:0 14px;border:none;border-left:1px solid rgba(46,134,232,.1);
  background:transparent;color:var(--t3);font-family:var(--mono);font-size:12px;font-weight:600;
  cursor:pointer;transition:color 120ms;
}
.btn-back:hover{color:var(--blue);}

/* Submit tool */
.submit-tool{
  background:rgba(255,255,255,.9);border-radius:var(--r16);padding:12px 14px;
  box-shadow:var(--clay-sm);flex-shrink:0;
  display:flex;flex-direction:column;gap:8px;
}
.submit-header{display:flex;align-items:flex-start;justify-content:space-between;}
.cp-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);font-family:var(--mono);}
.submit-type{font-size:16px;font-weight:700;color:var(--orange);margin-top:2px;}
.submit-counter{display:flex;align-items:baseline;gap:4px;text-align:right;}
.submit-remaining{font-size:26px;font-weight:700;color:var(--orange);line-height:1;font-family:var(--mono);}
.submit-remaining-label{font-size:10px;color:var(--t3);}
.submit-input{
  width:100%;border:1.5px solid rgba(240,122,26,.2);border-radius:var(--r8);
  background:#fff;color:var(--t1);font-family:var(--font);font-size:12px;
  padding:7px 10px;outline:none;resize:none;line-height:1.4;
  box-shadow:0 2px 5px rgba(240,122,26,.08);transition:border-color 150ms;
}
.submit-input:focus{border-color:var(--orange);box-shadow:0 2px 5px rgba(240,122,26,.12),0 0 0 3px rgba(240,122,26,.08);}
.submit-btn{
  height:36px;border:none;border-radius:var(--r8);
  background:var(--orange);color:#fff;
  font-family:var(--font);font-size:13px;font-weight:700;
  cursor:pointer;
  box-shadow:3px 3px 9px rgba(240,122,26,.4),inset -3px -3px 7px rgba(240,122,26,.45),inset 0 5px 10px rgba(255,255,255,.25);
  transition:all 150ms;
}
.submit-btn:hover{transform:translateY(-1px);}
.submit-btn:active{transform:scale(.98);box-shadow:inset 2px 2px 6px rgba(240,122,26,.45),inset -2px -2px 5px rgba(255,255,255,.2);}

/* Finalize */
.finalize-btn{
  height:42px;border:none;border-radius:var(--r12);width:100%;flex-shrink:0;
  background:rgba(255,255,255,.4);color:rgba(255,255,255,.4);
  font-family:var(--font);font-size:13px;font-weight:700;
  cursor:not-allowed;display:flex;align-items:center;justify-content:center;gap:7px;
  box-shadow:2px 2px 6px rgba(0,0,0,.1);
  transition:all 200ms;
}
.finalize-btn.ready{
  background:var(--green);color:#fff;cursor:pointer;
  box-shadow:4px 4px 12px rgba(26,173,106,.45),inset -4px -4px 9px rgba(26,173,106,.5),inset 0 6px 14px rgba(255,255,255,.25);
  animation:glow 1.6s ease-in-out infinite alternate;
}
@keyframes glow{
  from{box-shadow:4px 4px 12px rgba(26,173,106,.45),inset -4px -4px 9px rgba(26,173,106,.5),inset 0 6px 14px rgba(255,255,255,.25);}
  to  {box-shadow:6px 6px 18px rgba(26,173,106,.65),inset -4px -4px 9px rgba(26,173,106,.5),inset 0 6px 14px rgba(255,255,255,.25);}
}
.finalize-btn.ready:hover{transform:translateY(-1px);}
.finalize-btn.ready:active{transform:scale(.98);}
.finalize-icon{font-size:16px;}

/* Evaluation section */
.eval-section{
  flex:1;overflow-y:auto;
  display:flex;flex-direction:column;gap:8px;
  min-height:0;
  scrollbar-width:thin;scrollbar-color:rgba(46,134,232,.2) transparent;
}

.eval-block{border-radius:var(--r12);overflow:hidden;box-shadow:var(--clay-sm);}
.eval-block-hdr{padding:6px 12px;font-size:10px;font-weight:700;color:#fff;letter-spacing:.07em;font-family:var(--mono);text-transform:uppercase;}
.eval-hdr-blue  {background:var(--blue);  box-shadow:inset -3px -3px 6px rgba(46,134,232,.45),inset 3px 3px 6px rgba(255,255,255,.2);}
.eval-hdr-orange{background:var(--orange);box-shadow:inset -3px -3px 6px rgba(240,122,26,.45), inset 3px 3px 6px rgba(255,255,255,.2);}
.eval-block-body{background:rgba(255,255,255,.85);padding:9px 12px;display:flex;flex-direction:column;gap:7px;}

.score-blk{display:flex;flex-direction:column;gap:4px;}
.s-lbl{font-size:12px;color:var(--t2);font-weight:600;line-height:1.2;}
.s-sub{font-size:10px;font-weight:500;color:var(--t3);margin-left:3px;}
.s-row{display:flex;align-items:center;gap:7px;}
.s-track{flex:1;height:5px;border-radius:var(--rpill);background:rgba(46,134,232,.12);overflow:hidden;}
.s-fill{height:100%;border-radius:var(--rpill);transition:width .8s ease;}
.sf-blue  {background:var(--blue);}
.sf-orange{background:var(--orange);}
.sf-red   {background:var(--red);}
.s-fill.comp{animation:comp 1s ease-in-out infinite alternate;}
@keyframes comp{from{opacity:.6}to{opacity:1}}
.s-val{font-size:12px;font-weight:700;color:var(--t2);min-width:24px;text-align:right;font-family:var(--mono);}
.s-note{font-size:10px;color:var(--orange);font-style:italic;}
.total{font-size:13px;font-weight:700;color:var(--t1);padding:4px 0;}
.total span{color:var(--blue);}

/* Auto bar */
#auto-bar{
  position:absolute;bottom:16px;left:16px;right:calc(42% + 12px);
  height:42px;border-radius:var(--r12);
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);
  box-shadow:var(--clay-sm);
  display:flex;align-items:center;overflow:hidden;z-index:20;
}
.auto-status{
  display:flex;align-items:center;gap:7px;
  font-size:12px;font-weight:700;color:#fff;
  background:var(--blue);height:100%;padding:0 16px;
  box-shadow:inset -3px 0 8px rgba(0,0,0,.12);
}
.auto-btns{display:flex;gap:7px;padding:0 10px;margin-left:auto;}
.ctrl{
  padding:5px 12px;border:none;border-radius:var(--r8);
  background:rgba(255,255,255,.8);color:var(--t2);
  font-family:var(--mono);font-size:11px;font-weight:600;
  cursor:pointer;box-shadow:var(--clay-sm);transition:all 120ms;
}
.ctrl:active{box-shadow:inset 2px 2px 5px rgba(0,0,0,.1),inset -2px -2px 4px rgba(255,255,255,.7);}
.ctrl.warn{color:var(--red);}

::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(46,134,232,.25);border-radius:2px;}