/* delvee/styles.css (FULL FILE REPLACEMENT)
   Delvee = attentive, timed, deterministic.
   Less “calm spa”, more “clear instrument panel”.
*/

:root{
  /* Light */
  --dv-bg: #FFFBFE;
  --dv-surface: #FFFFFF;
  --dv-surface-2: #F6F4FA;
  --dv-surface-3: #EEEAF6;
  --dv-line: rgba(28,27,31,0.12);

  --dv-text: rgba(28,27,31,0.92);
  --dv-muted: rgba(73,69,79,0.84);
  --dv-soft: rgba(73,69,79,0.70);

  /* Delvee accent: attentive violet-blue */
  --dv-primary: #6C63FF;
  --dv-on-primary: #FFFFFF;
  --dv-primary-soft: rgba(108,99,255,0.16);

  --dv-good: #0F7B3D;
  --dv-warn: #B3261E;

  --dv-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  --dv-s-1: 8px;
  --dv-s-2: 12px;
  --dv-s-3: 16px;
  --dv-s-4: 20px;
  --dv-s-5: 26px;
  --dv-s-6: 34px;
  --dv-s-7: 44px;
  --dv-s-8: 58px;

  --dv-r-1: 12px;
  --dv-r-2: 16px;
  --dv-r-3: 20px;

  --dv-max: 1100px;
  --dv-max-wide: 1220px;

  --dv-fw-regular: 440;
  --dv-fw-medium: 520;
  --dv-fw-bold: 620;
}

@media (prefers-color-scheme: dark){
  :root{
    --dv-bg: #0F1114;
    --dv-surface: #12151A;
    --dv-surface-2: #151923;
    --dv-surface-3: #1A2030;
    --dv-line: rgba(255,255,255,0.12);

    --dv-text: rgba(255,255,255,0.92);
    --dv-muted: rgba(203,208,216,0.86);
    --dv-soft: rgba(203,208,216,0.68);

    --dv-primary: #7A72FF;
    --dv-on-primary: #FFFFFF;
    --dv-primary-soft: rgba(122,114,255,0.22);

    --dv-good: #86EFAC;
    --dv-warn: #F2B8B5;
  }
}

:root[data-theme="light"]{
  --dv-bg: #FFFBFE;
  --dv-surface: #FFFFFF;
  --dv-surface-2: #F6F4FA;
  --dv-surface-3: #EEEAF6;
  --dv-line: rgba(28,27,31,0.12);

  --dv-text: rgba(28,27,31,0.92);
  --dv-muted: rgba(73,69,79,0.84);
  --dv-soft: rgba(73,69,79,0.70);

  --dv-primary: #6C63FF;
  --dv-on-primary: #FFFFFF;
  --dv-primary-soft: rgba(108,99,255,0.16);

  --dv-good: #0F7B3D;
  --dv-warn: #B3261E;
}

:root[data-theme="dark"]{
  --dv-bg: #0F1114;
  --dv-surface: #12151A;
  --dv-surface-2: #151923;
  --dv-surface-3: #1A2030;
  --dv-line: rgba(255,255,255,0.12);

  --dv-text: rgba(255,255,255,0.92);
  --dv-muted: rgba(203,208,216,0.86);
  --dv-soft: rgba(203,208,216,0.68);

  --dv-primary: #7A72FF;
  --dv-on-primary: #FFFFFF;
  --dv-primary-soft: rgba(122,114,255,0.22);

  --dv-good: #86EFAC;
  --dv-warn: #F2B8B5;
}

/* Base */
*{ box-sizing: border-box; }
html, body{
  margin: 0;
  padding: 0;
  background: var(--dv-bg);
  color: var(--dv-text);
  font-family: var(--dv-font);
  font-weight: var(--dv-fw-regular);
}
a{ color: var(--dv-primary); text-decoration: none; }
a:hover{ text-decoration: underline; }
.hidden{ display:none !important; }
::selection{ background: var(--dv-primary-soft); }

/* Background */
.dv-bg{
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 14% -12%,
      color-mix(in srgb, var(--dv-primary) 10%, transparent) 0%,
      transparent 56%),
    radial-gradient(780px 520px at 86% 0%,
      rgba(0,0,0,0.06) 0%,
      transparent 62%),
    linear-gradient(180deg,
      rgba(255,255,255,0.03) 0%,
      rgba(255,255,255,0.00) 30%);
}
:root[data-theme="dark"] .dv-bg,
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .dv-bg{
    background:
      radial-gradient(900px 520px at 14% -12%,
        color-mix(in srgb, var(--dv-primary) 12%, transparent) 0%,
        transparent 58%),
      radial-gradient(780px 520px at 86% 0%,
        rgba(255,255,255,0.05) 0%,
        transparent 62%),
      linear-gradient(180deg,
        rgba(255,255,255,0.022) 0%,
        rgba(255,255,255,0.00) 30%);
  }
}

/* Top bar */
.dv-top{
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--dv-bg) 86%, transparent);
  border-bottom: 1px solid var(--dv-line);
}
.dv-top-inner{
  max-width: var(--dv-max-wide);
  margin: 0 auto;
  padding: 12px var(--dv-s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dv-s-3);
}
.dv-brand{
  display:flex;
  align-items:center;
  gap: 12px;
}
.dv-mark{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background:
    radial-gradient(18px 18px at 30% 30%,
      color-mix(in srgb, var(--dv-primary) 80%, white) 0%,
      transparent 70%),
    color-mix(in srgb, var(--dv-surface-3) 66%, transparent);
  border: 1px solid color-mix(in srgb, var(--dv-primary) 20%, var(--dv-line));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 16px 30px rgba(0,0,0,0.12);
}
.dv-title{
  font-weight: var(--dv-fw-bold);
  letter-spacing: -0.18px;
  font-size: 15px;
  line-height: 1;
}
.dv-sub{
  color: var(--dv-soft);
  font-size: 13px;
  margin-top: 4px;
}
.dv-top-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Layout */
.dv-wrap{
  max-width: var(--dv-max);
  margin: 0 auto;
  padding: var(--dv-s-6) var(--dv-s-4) var(--dv-s-8);
}
.dv-wrap-wide{
  max-width: var(--dv-max-wide);
}

/* Card */
.dv-card{
  background: color-mix(in srgb, var(--dv-surface) 90%, transparent);
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-r-3);
  padding: var(--dv-s-6);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 18px 46px rgba(0,0,0,0.10);
}
:root[data-theme="dark"] .dv-card,
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .dv-card{
    background: color-mix(in srgb, var(--dv-surface-2) 86%, transparent);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.05) inset,
      0 22px 52px rgba(0,0,0,0.32);
  }
}
.dv-card-wide{ padding: var(--dv-s-6); }

/* Typography */
.dv-h1{
  margin: 0 0 var(--dv-s-2) 0;
  font-size: 28px;
  letter-spacing: -0.44px;
  line-height: 1.14;
  font-weight: var(--dv-fw-bold);
}
.dv-lead{
  margin: 0 0 var(--dv-s-4) 0;
  color: var(--dv-muted);
  font-size: 14.8px;
  line-height: 1.75;
  max-width: 78ch;
}
.dv-h2{
  margin: 0;
  font-size: 14px;
  letter-spacing: -0.10px;
  font-weight: var(--dv-fw-bold);
}
.dv-muted{ color: var(--dv-muted); font-size: 13.2px; }
.dv-soft{ color: var(--dv-soft); font-size: 13px; }

/* Hero */
.dv-hero{
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--dv-s-6);
  align-items: start;
  margin-bottom: var(--dv-s-5);
}
.dv-hero-side{
  margin-top: 4px;
}
.dv-kicker{
  color: var(--dv-soft);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.dv-pillrow{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.dv-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--dv-line);
  background: color-mix(in srgb, var(--dv-surface-3) 24%, transparent);
  color: var(--dv-soft);
  font-size: 12.8px;
}

/* Status */
.dv-status{
  margin-top: var(--dv-s-4);
  border-radius: var(--dv-r-2);
  border: 1px solid var(--dv-line);
  background: color-mix(in srgb, var(--dv-surface-3) 18%, transparent);
  padding: 12px;
  display:flex;
  gap: 12px;
  align-items: center;
}
.dv-status-title{
  color: var(--dv-text);
  font-weight: var(--dv-fw-bold);
  font-size: 14px;
  letter-spacing: -0.08px;
}
.dv-status-line{
  color: var(--dv-muted);
  font-size: 13.6px;
  margin-top: 3px;
  line-height: 1.55;
}
.dv-right{
  margin-left: auto;
  color: var(--dv-soft);
  font-weight: var(--dv-fw-medium);
  font-size: 13px;
  white-space: nowrap;
}
.dv-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dv-soft) 70%, transparent);
}
.dv-dot.good{ background: var(--dv-good); }
.dv-dot.warn{ background: color-mix(in srgb, var(--dv-warn) 82%, #D67A7A); }
.dv-dot.tiny{ width: 8px; height: 8px; }

/* Panels */
.dv-panel{
  border-radius: var(--dv-r-3);
  border: 1px solid var(--dv-line);
  background: color-mix(in srgb, var(--dv-surface-2) 84%, transparent);
  padding: var(--dv-s-5);
}
.dv-panel-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--dv-s-3);
}
.dv-stack{ display:grid; gap: var(--dv-s-3); }

/* “Slab” blocks (beta-layout feel) */
.dv-slab{
  border-radius: var(--dv-r-2);
  border: 1px solid var(--dv-line);
  background: color-mix(in srgb, var(--dv-surface-3) 20%, transparent);
  padding: var(--dv-s-4);
}
.dv-slab-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.dv-slab-title{
  font-weight: var(--dv-fw-bold);
  color: var(--dv-text);
  font-size: 13.6px;
  letter-spacing: -0.08px;
}

/* Grid */
.dv-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--dv-s-4);
  align-items: start;
}
.dv-grid-beta{
  margin-top: var(--dv-s-4);
}
@media (max-width: 980px){
  .dv-hero{ grid-template-columns: 1fr; }
  .dv-grid{ grid-template-columns: 1fr; }
}

/* Forms */
.dv-field{ display:flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.dv-field label{ color: var(--dv-soft); font-size: 13px; }
input, textarea, select{
  width: 100%;
  border-radius: var(--dv-r-1);
  border: 1px solid var(--dv-line);
  background: color-mix(in srgb, var(--dv-surface) 88%, transparent);
  color: var(--dv-text);
  padding: 10px 12px;
  font-size: 14.4px;
  font-family: var(--dv-font);
  outline: none;
}
textarea{ min-height: 90px; resize: vertical; }
input:focus, textarea:focus, select:focus{
  border-color: color-mix(in srgb, var(--dv-primary) 56%, var(--dv-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dv-primary) 14%, transparent);
}
.dv-select{ min-width: 88px; }

/* Buttons */
.dv-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 12px;
  align-items: center;
}
.dv-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--dv-line);
  background: color-mix(in srgb, var(--dv-surface-3) 14%, transparent);
  color: var(--dv-text);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, transform 80ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.dv-btn:hover{
  background: color-mix(in srgb, var(--dv-surface-3) 20%, transparent);
}
.dv-btn:active{ transform: translateY(0.5px); }
.dv-btn:disabled{
  cursor:not-allowed;
  transform:none;
  opacity: 0.58;
}
.dv-btn-primary{
  background: var(--dv-primary);
  color: var(--dv-on-primary);
  border-color: color-mix(in srgb, var(--dv-primary) 54%, var(--dv-line));
  box-shadow: 0 12px 28px rgba(0,0,0,0.14);
}
.dv-btn-primary:hover{
  background: color-mix(in srgb, var(--dv-primary) 92%, white);
}
:root[data-theme="dark"] .dv-btn-primary:hover{
  background: color-mix(in srgb, var(--dv-primary) 90%, black);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .dv-btn-primary:hover{
    background: color-mix(in srgb, var(--dv-primary) 90%, black);
  }
}

/* Chips */
.dv-chip{
  appearance:none;
  border: 1px solid var(--dv-line);
  background: color-mix(in srgb, var(--dv-surface-3) 16%, transparent);
  color: var(--dv-soft);
  border-radius: 999px;
  padding: 9px 12px;
  cursor:pointer;
  font-size: 13.2px;
}
.dv-chip:hover{
  background: color-mix(in srgb, var(--dv-surface-3) 22%, transparent);
  color: var(--dv-text);
}
.dv-chip:disabled{ cursor:not-allowed; opacity: 0.55; }

/* Rows */
.dv-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}
.dv-row-tight{ margin-top: 12px; }
.dv-row input[type="text"]{ flex: 1 1 220px; min-width: 180px; }

/* KV */
.dv-kv{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 12px;
  margin-top: 12px;
  font-size: 13.6px;
  color: var(--dv-muted);
}
.dv-kv code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12.4px;
  color: var(--dv-text);
  opacity: 0.92;
}

/* Feed + pulses */
.dv-feed{
  border-radius: var(--dv-r-2);
  border: 1px solid var(--dv-line);
  background: color-mix(in srgb, var(--dv-surface) 84%, transparent);
  min-height: 540px;
  max-height: 70vh;
  overflow: auto;
  padding: 12px;
}
.dv-pulse{
  border-radius: 14px;
  border: 1px solid var(--dv-line);
  background: color-mix(in srgb, var(--dv-surface-3) 16%, transparent);
  padding: 12px;
  margin-bottom: 10px;
}
.dv-pulse-kind{
  font-size: 12px;
  color: var(--dv-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.dv-pulse-text{
  color: var(--dv-text);
  font-size: 14.4px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.dv-pulse-imgwrap{
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--dv-line);
  background: color-mix(in srgb, var(--dv-surface-2) 76%, transparent);
}
.dv-pulse-img{
  display:block;
  width: 100%;
  height: auto;
}

/* Participants mini */
.dv-splitpane{
  display:grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
}
.dv-mini{
  border-radius: var(--dv-r-2);
  border: 1px solid var(--dv-line);
  background: color-mix(in srgb, var(--dv-surface-3) 16%, transparent);
  padding: 12px;
}
.dv-mini-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.dv-mini-title{
  font-weight: var(--dv-fw-bold);
  font-size: 13.4px;
  color: var(--dv-text);
}
.dv-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--dv-line);
  background: color-mix(in srgb, var(--dv-primary) 14%, var(--dv-surface-3));
  color: var(--dv-text);
  font-size: 12.6px;
  font-weight: var(--dv-fw-medium);
}
.dv-list{
  display:grid;
  gap: 8px;
}
.dv-list-mini{
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px){
  .dv-list-mini{ grid-template-columns: 1fr; }
}
.dv-person{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 12px;
  border: 1px solid var(--dv-line);
  background: color-mix(in srgb, var(--dv-surface) 84%, transparent);
  padding: 10px 12px;
}
.dv-person-mini{
  padding: 8px 10px;
}
.dv-person.me{
  border-color: color-mix(in srgb, var(--dv-primary) 34%, var(--dv-line));
  background: color-mix(in srgb, var(--dv-primary) 10%, var(--dv-surface));
}
.dv-person-name{
  font-weight: var(--dv-fw-medium);
  color: var(--dv-text);
  font-size: 13.8px;
}
.dv-badge{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--dv-line);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--dv-soft);
  background: color-mix(in srgb, var(--dv-surface-3) 14%, transparent);
}
.dv-badge.me{
  border-color: color-mix(in srgb, var(--dv-primary) 42%, var(--dv-line));
  color: var(--dv-text);
}

/* Chat */
.dv-chat{
  border-radius: var(--dv-r-2);
  border: 1px solid var(--dv-line);
  background: color-mix(in srgb, var(--dv-surface) 84%, transparent);
  height: 220px;
  overflow: auto;
  padding: 12px;
}
.dv-chat-msg{
  border-radius: 12px;
  border: 1px solid var(--dv-line);
  background: color-mix(in srgb, var(--dv-surface-3) 14%, transparent);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.dv-chat-text{
  color: var(--dv-text);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.dv-chatbox{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-top: 10px;
}
.dv-chatbox input{ flex: 1; min-width: 180px; }

/* Help + footer */
.dv-help{
  color: var(--dv-soft);
  font-size: 13.2px;
  line-height: 1.55;
  margin-top: 10px;
}
.dv-help-tight{ margin-top: 8px; }
.dv-footer{
  margin-top: var(--dv-s-4);
  border-top: 1px solid var(--dv-line);
  padding-top: var(--dv-s-3);
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  color: var(--dv-soft);
  font-size: 13px;
}
.dv-sep{ color: var(--dv-soft); }
.dv-link{ color: var(--dv-soft); }
.dv-link:hover{ color: var(--dv-text); text-decoration: none; }

/* File input */
.dv-file{
  padding: 8px 10px;
  border-radius: var(--dv-r-1);
  border: 1px solid var(--dv-line);
  background: color-mix(in srgb, var(--dv-surface) 88%, transparent);
  color: var(--dv-muted);
}