/* Neumorphism theme for the Desk board lab.
   Soft raised / inset surfaces, no hard outlines. Grayscale only. */
:root {
  --bg: #e6e7ea;
  --bg-elev: #eceef2;
  --bg-2: #e6e7ea;
  --bg-3: #e0e2e6;
  --line: transparent;
  --line-strong: transparent;
  --text: #2a2d33;
  --muted: #6d7178;
  --faint: #9aa0a8;
  --fill: #e6e7ea;
  --fill-2: #dcdfe4;
  --ok: #222;
  --neu-light: rgba(255, 255, 255, 0.92);
  --neu-dark: rgba(155, 166, 182, 0.45);
  --neu-raised:
    7px 9px 16px var(--neu-dark),
    -6px -7px 14px var(--neu-light);
  --neu-raised-sm:
    4px 5px 10px var(--neu-dark),
    -3px -4px 8px var(--neu-light);
  --neu-raised-xs:
    1.5px 2px 3px var(--neu-dark),
    -1px -1.5px 2px var(--neu-light);
  --neu-inset:
    inset 5px 6px 12px var(--neu-dark),
    inset -4px -5px 10px var(--neu-light);
  --neu-inset-sm:
    inset 3px 4px 8px var(--neu-dark),
    inset -3px -3px 7px var(--neu-light);
  --neu-inset-xs:
    inset 1.5px 2px 3px var(--neu-dark),
    inset -1px -1.5px 2.5px var(--neu-light);
  --shadow: var(--neu-raised);
  --shadow-sm: var(--neu-raised-sm);
  --radius: 18px;
  --radius-sm: 12px;
}

body {
  background:
    radial-gradient(900px 500px at 8% -10%, #f4f5f7 0%, transparent 55%),
    radial-gradient(700px 400px at 100% 0%, #d9dce2 0%, transparent 48%),
    var(--bg);
}

button {
  border: 0;
  background: var(--bg);
  box-shadow: var(--neu-raised-sm);
}
button:hover { background: #eceef1; }
button:active {
  box-shadow: var(--neu-inset-sm);
}
select, input[type="number"], textarea {
  border: 0;
  background: var(--bg-3);
  box-shadow: var(--neu-inset-sm);
}

button.top {
  background: var(--bg);
  border: 0;
  box-shadow: var(--neu-raised-sm);
  backdrop-filter: none;
}
button.top:hover {
  background: #eceef1;
  box-shadow: var(--neu-raised);
}
button.top:active {
  background: var(--bg);
  box-shadow: var(--neu-inset-sm);
}
.mark {
  background: linear-gradient(145deg, #f2f3f6, #cfd3da);
  box-shadow: var(--neu-raised-sm);
  color: #2a2d33;
}

dialog.workspace-dialog {
  border: 0;
  background: var(--bg);
  box-shadow: var(--neu-raised);
}
dialog.luboo-dialog .luboo-dialog-close {
  background: var(--bg);
  box-shadow: var(--neu-raised-sm);
}
dialog.workspace-dialog .dialog-button {
  border: 0;
  background: var(--bg);
  box-shadow: var(--neu-raised-sm);
}
dialog.workspace-dialog .dialog-danger,
dialog.desk-menu-dialog .signout {
  background: var(--bg);
  color: var(--text);
}
.place-ghost {
  border: 0;
  background: var(--bg);
  box-shadow: var(--neu-raised);
}

.shell {
  border: 0;
  background: var(--bg);
  box-shadow: var(--neu-raised);
}
.board {
  border-right: 0;
  background: var(--bg);
}
.chat { background: var(--bg); }
.split {
  background: transparent;
  box-shadow: var(--neu-inset-sm);
}
.split:hover, .split.dragging {
  background: #d0d4db;
}

.chrome {
  background: transparent;
  border-bottom: 0;
}
.tab {
  border: 0;
  background: var(--bg);
  box-shadow: var(--neu-raised-sm);
}
.tab.on {
  background: var(--bg);
  border-color: transparent;
  box-shadow: var(--neu-inset-sm);
}
.chip {
  border: 0;
  background: var(--bg);
  box-shadow: var(--neu-raised-sm);
}
.chip.on {
  box-shadow: var(--neu-inset-sm);
  background: var(--bg);
  color: var(--text);
}

.grid-wrap { padding: 18px; }
.cell {
  width: var(--cell-h);
  height: var(--cell-h);
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  position: relative;
}
.cell.hot {
  background: #d0d3db;
  box-shadow: var(--neu-inset);
}

.widget {
  margin: var(--widget-pad, 8px);
  border: 0;
  border-radius: 16px;
  background: linear-gradient(160deg, #f4f5f8 0%, #e6e8ed 100%);
  box-shadow: var(--neu-raised);
}
.resize {
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  color: #c2c6cf;
  opacity: 0.78;
}
.resize:hover { opacity: 0.95; }
.wh {
  background: transparent;
  border-bottom: 0;
  padding: 12px 14px 10px;
}
.x {
  border: 0;
  background: var(--bg);
  box-shadow: var(--neu-raised-sm);
}
.x:active { box-shadow: var(--neu-inset-sm); }

button.dg-cell {
  background: var(--fill, var(--bg));
  box-shadow: var(--neu-inset-xs);
}
button.dg-cell:hover,
button.dg-cell:active {
  box-shadow: var(--neu-inset-sm);
}
button.dg-cell[data-value]:not([data-value="0"]) {
  box-shadow:
    inset 1.5px 2px 3.5px color-mix(in srgb, rgb(var(--dg-rgb)) 28%, var(--neu-dark)),
    inset -1px -1.5px 2.5px var(--neu-light);
}
button.dg-cell[data-value]:not([data-value="0"]):hover,
button.dg-cell[data-value]:not([data-value="0"]):active {
  box-shadow:
    inset 2px 2.5px 5px color-mix(in srgb, rgb(var(--dg-rgb)) 36%, var(--neu-dark)),
    inset -1.5px -2px 3px var(--neu-light);
}
.dg-cell.dg-pad { box-shadow: none; }

.row { border-bottom-color: rgba(0, 0, 0, 0.05); }
.menu .pop,
.cal-day-pop,
.dg-day-pop,
.dg-tools-pop,
.task-view-pop {
  border: 0;
  background: var(--bg);
  box-shadow: var(--neu-raised);
}
.menu .pop button,
.task-view-pop button {
  background: var(--bg);
  box-shadow: var(--neu-raised-sm);
}
.menu .pop button:active,
.task-view-pop button:active {
  box-shadow: var(--neu-inset-sm);
}

.bubble {
  border: 0;
  box-shadow: var(--neu-inset-sm);
}
.in { background: var(--bg); }
.out { background: var(--bg-3); }

.tx-box {
  border: 0;
  background: var(--bg);
  box-shadow: var(--neu-inset);
  border-radius: 16px;
}
.tx-msg {
  border: 0;
  background: var(--bg);
}
.tx-msg.agent {
  background: #dce6f4;
  box-shadow: var(--neu-inset-sm);
}
.tx-msg.prospect {
  background: #e6f3ea;
  box-shadow: var(--neu-inset-sm);
}
.tx-msg.system {
  background: transparent;
  box-shadow: none;
}

.card {
  border: 0;
  background: var(--bg);
  box-shadow: var(--neu-raised);
}
.card-h {
  background: transparent;
  border-bottom: 0;
}

.composer {
  border-top: 0;
  background: var(--bg);
}
.composer textarea { background: var(--bg); }
.send {
  background: linear-gradient(145deg, #4a4d54, #1c1e22);
  color: #f3f3f3;
  box-shadow:
    6px 8px 14px rgba(80, 88, 102, 0.4),
    -3px -3px 8px rgba(255, 255, 255, 0.45);
}
.send:active {
  box-shadow: var(--neu-inset-sm);
}

.settings-card {
  border: 0;
  background: var(--bg);
  box-shadow: var(--neu-raised);
}
.step button { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; }
.settings-card .danger {
  background: var(--bg);
  box-shadow: var(--neu-raised-sm);
}
.settings-card .danger:active:not(:disabled) {
  box-shadow: var(--neu-inset-sm);
}
.settings-card .danger:disabled {
  box-shadow: var(--neu-inset-sm);
}

.sms-compose textarea {
  border: 0;
  background: var(--bg-3);
  box-shadow: var(--neu-inset-sm);
}

.cal-more {
  background: var(--bg);
  box-shadow: var(--neu-raised-sm);
}
.cal-dot {
  background: var(--dot, #8b9cb0);
  box-shadow:
    2px 2.5px 4px color-mix(in srgb, var(--dot, #8b9cb0) 55%, #3d4650),
    -1.5px -1.5px 3px color-mix(in srgb, var(--dot, #8b9cb0) 45%, #fff),
    inset 0 1px 2px color-mix(in srgb, var(--dot, #8b9cb0) 40%, #fff);
}

.icon-btn {
  border: 0;
  background: var(--bg);
  box-shadow: var(--neu-raised-sm);
}
.split-collapse {
  background: var(--bg);
  box-shadow:
    3px 3px 6px var(--neu-dark),
    -2px -2px 5px var(--neu-light);
}
.icon-btn:active,
.board.settings-open #boardSettingsBtn,
.chat.settings-open #chatSettingsBtn {
  box-shadow: var(--neu-inset-sm);
  background: var(--bg);
}

.fab {
  background: linear-gradient(145deg, #f4f5f7, #d5d8de);
  box-shadow:
    8px 10px 18px var(--neu-dark),
    -6px -6px 14px var(--neu-light),
    inset 1px 1px 2px var(--neu-light),
    inset -1px -1px 2px rgba(0, 0, 0, .05);
}
.fab:hover { background: linear-gradient(145deg, #fafafa, #dfe2e8); }
.fab:active,
body.surface-board .fab {
  background: linear-gradient(145deg, #d5d8de, #eceef2);
  box-shadow:
    inset 7px 9px 16px var(--neu-dark),
    inset -6px -7px 14px var(--neu-light);
}

.geo-leg.on {
  background: var(--bg);
  box-shadow: var(--neu-inset-sm);
  color: var(--text);
}

@media (max-width: 860px) {
  .board { border-bottom: 0; }
}