:root{
  --lava-bg:#070a12;
  --lava-bg2: rgba(18,22,36,.92);

  --glass: rgba(18, 22, 32, 0.62);
  --glass-strong: rgba(12, 14, 22, 0.72);
  --glass-border: rgba(255,255,255,0.10);
  --glass-shadow: 0 18px 50px rgba(0,0,0,0.45);

  --blur: 18px;
  --blur-strong: 26px;

  --radius: 18px;
}

/* Dark base everywhere */
html, body{
  height: 100%;
  background: var(--lava-bg) !important;
  background-image: none !important;
}

/* The injected lava root (created by JS) */
#syncholeLavaRoot{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(1200px circle at 40% 40%, var(--lava-bg2), var(--lava-bg) 70%);

  /* optional slight grain/contrast */
  filter: saturate(110%) contrast(108%);
}

/* Goo defs hidden */
#syncholeLavaRoot .goo-defs{
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Lava layer */
#syncholeLavaRoot .lava{
  position: absolute;
  inset: -18%;
  z-index: 1;
  pointer-events: none;
  transform: translateZ(0);
  filter: url(#goo) saturate(125%) contrast(108%);
  opacity: 0.95;
}

/* Blobs */
#syncholeLavaRoot .blob{
  position: absolute;
  mix-blend-mode: screen;
  opacity: 0.85;
  filter: blur(26px);
  will-change: transform;
  transform: translate3d(0,0,0);
  cursor: grab;
  touch-action: none;
}
#syncholeLavaRoot .blob.is-dragging{ cursor: grabbing; }

/* Vignette so UI stays readable */
#syncholeLavaRoot .lava-vignette{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(1200px circle at center, transparent 45%, rgba(0,0,0,0.62) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.28));
}

/* Put the app above lava */
body > *{
  position: relative;
  z-index: 1;
}

/* ---- Roundcube: make shells transparent so lava shows through ---- */
#layout, #topnav, #taskbar, #header, #mainscreen, #main,
#mailview, #mailboxlist, #messagelistcontainer, #messagepreview, #messageview,
#composeheaders, #composebody, #composeview, #settingsview,
#login-form, #login, .login, .box, .boxcontent,
.uibox, .uibox-content, .uibox-header,
#directorylistbox, #contactlistbox, #settings-right,
#toolbar, #quicksearchbar, #searchbar,
body.task-login, body.task-mail, body.task-settings, body.task-addressbook {
  background: transparent !important;
  background-image: none !important;
}

/* ---- Glass panels + heavier blur + rounded edges ---- */
#taskbar, #topnav, #toolbar, #quicksearchbar, #searchbar,
.uibox, .uibox-content, .uibox-header,
#mailboxlist, #messagelistcontainer, #messagepreview, #messageview,
#composeheaders, #composebody, #settingsview,
#directorylistbox, #contactlistbox {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  backdrop-filter: blur(var(--blur-strong)) !important;
  -webkit-backdrop-filter: blur(var(--blur-strong)) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* Tighten separators so it looks less "boxed" */
.splitter, .vsplitter, .hsplitter {
  background: rgba(255,255,255,0.06) !important;
}

/* Make list rows readable */
#messagelist tbody tr td,
#messagelist thead tr th,
#mailboxlist li a,
#mailboxlist li span,
#directorylist li a,
#contactlist td {
  color: rgba(255,255,255,0.88) !important;
}

/* Hover states */
#mailboxlist li a:hover,
#messagelist tbody tr:hover td,
#directorylist li a:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* Inputs/buttons: rounded + translucent */
input, select, textarea {
  border-radius: 12px !important;
  background: rgba(10,12,18,0.55) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(var(--blur)) !important;
  -webkit-backdrop-filter: blur(var(--blur)) !important;
}
button, .button, a.button {
  border-radius: 14px !important;
}

/* ---- IFRAME handling ----
   Keep iframes visually clear so the lava is from TOP page only.
*/
iframe {
  background: transparent !important;
}

/* Roundcube message preview iframe often uses these */
#messagecontframe, #msgbody, #mailpreviewframe {
  background: transparent !important;
}

/* Optional: soften the big logo empty state so it doesn’t punch through */
#messagepreview .boxtitle,
#messagepreview .boxcontent {
  background: transparent !important;
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce) {
  #syncholeLavaRoot .blob { transition: none !important; }
}