/* ============ DustinOS ============ */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Inter, Arial, sans-serif;
  --menubar-h: 26px;
  --glass-bg: rgba(246, 246, 248, 0.55);
  --glass-border: rgba(255, 255, 255, 0.45);
  --glass-dark-bg: rgba(30, 30, 34, 0.42);
  --text: #1d1d1f;
  --muted: rgba(29, 29, 31, 0.55);
  --accent: #0a84ff;
  --red: #ff453a;
  --cursor: url("assets/cursor.svg") 4 3, auto;
  --cursor-pointer: url("assets/cursor-pointer.svg") 5 3, pointer;
}

* { box-sizing: border-box; cursor: var(--cursor); }
a, button, label, .dock-item, .lights i, .desk-icon, .swatch, .sticker, .seg, select, [data-menu] { cursor: var(--cursor-pointer); }
.dragging, .dragging * { cursor: var(--cursor) !important; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: var(--font);
  color: var(--text);
  background: #1a1410;
  -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
img { -webkit-user-drag: none; user-drag: none; }

/* ============ Wallpaper ============ */
#wallpaper { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
#wallpaper img, #wallpaper video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 58% 22%;
}
#wallpaper img.fallback { object-position: 50% 12%; }
#wallpaper video { opacity: 0; transition: opacity .6s; }
#wallpaper video.ready { opacity: 1; }
#wallpaper::after { /* subtle vignette like a real wallpaper */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.18), transparent 12%),
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.35));
}

/* ============ Glass ============ */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 0.5px solid var(--glass-border);
  box-shadow: 0 0 0 0.5px rgba(0,0,0,.12), 0 10px 40px rgba(0,0,0,.25);
}
.glass-solid {
  background: rgba(248, 248, 250, 0.82);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 0.5px solid rgba(255,255,255,.6);
  box-shadow: 0 0 0 0.5px rgba(0,0,0,.22), 0 22px 70px rgba(0,0,0,.45);
}

/* ============ Menu bar ============ */
#menubar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--menubar-h); z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px;
  color: #fff;
  font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
  background: rgba(20, 16, 12, 0.28);
  -webkit-backdrop-filter: blur(40px) saturate(170%);
  backdrop-filter: blur(40px) saturate(170%);
  text-shadow: 0 0 1px rgba(0,0,0,.25);
}
.mb-left, .mb-right { display: flex; align-items: center; height: 100%; }
.mb-item {
  height: 22px; padding: 0 9px; border-radius: 5px; display: flex; align-items: center;
  font-size: 13px; font-weight: 500;
}
.mb-item.mb-app { font-weight: 700; }
.mb-item.mb-logo { padding: 0 11px; }
.mb-item:hover, .mb-item.open { background: rgba(255,255,255,.2); }
.mb-status { height: 22px; padding: 0 7px; display: flex; align-items: center; border-radius: 5px; }
.mb-status:hover { background: rgba(255,255,255,.2); }
.mb-clock { padding: 0 8px 0 6px; font-variant-numeric: tabular-nums; }

#menu-dropdown {
  position: fixed; top: calc(var(--menubar-h) + 2px); z-index: 1001;
  min-width: 230px; padding: 5px; border-radius: 10px;
  font-size: 13px; color: var(--text);
  background: rgba(240, 240, 244, 0.72);
}
#menu-dropdown .mi {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 3px 10px; border-radius: 5px; line-height: 18px;
}
#menu-dropdown .mi:hover:not(.disabled) { background: var(--accent); color: #fff; }
#menu-dropdown .mi:hover:not(.disabled) .k { color: rgba(255,255,255,.8); }
#menu-dropdown .mi.disabled { color: rgba(0,0,0,.3); }
#menu-dropdown .k { color: rgba(0,0,0,.4); }
#menu-dropdown hr { border: 0; height: 1px; background: rgba(0,0,0,.1); margin: 5px 10px; }

/* ============ Desktop ============ */
#desktop { position: fixed; inset: var(--menubar-h) 0 0 0; z-index: 1; }
#selection-rect {
  position: fixed; z-index: 5; pointer-events: none;
  background: rgba(10, 132, 255, .15); border: 1px solid rgba(10, 132, 255, .6);
}

.desk-icons {
  position: absolute; top: 14px; right: 14px;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.desk-icon {
  width: 92px; padding: 6px 4px; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: #fff; font-size: 12px; font-weight: 500; text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.desk-icon.free { position: absolute; z-index: 2; touch-action: none; }
.desk-icon.lifting { z-index: 20; opacity: .78; }
.desk-icon span { padding: 1px 5px; border-radius: 4px; line-height: 1.25; word-break: break-all; }
.desk-icon.selected span { background: var(--accent); text-shadow: none; }
.desk-icon.selected .thumb, .desk-icon.selected .file-icon { outline: 2px solid rgba(255,255,255,.35); outline-offset: 2px; background-color: rgba(0,0,0,.2); }
.desk-icon .thumb {
  width: 58px; height: 58px; object-fit: cover; border-radius: 3px;
  border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.file-icon {
  position: relative; width: 48px; height: 60px; border-radius: 3px;
  background: linear-gradient(#fff, #eef0f3);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  clip-path: polygon(0 0, 70% 0, 100% 22%, 100% 100%, 0 100%);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
}
.file-icon::after {
  content: ""; position: absolute; top: 0; right: 0; width: 30%; height: 22%;
  background: linear-gradient(225deg, transparent 50%, #d3d7dd 50%);
}
.file-icon span {
  font-size: 9px; font-weight: 800; color: #fff; background: #8e5cf7;
  padding: 1px 5px; border-radius: 3px; text-shadow: none; letter-spacing: .04em;
}
.file-icon.txt span { background: #8a8f98; }

/* ============ Widget ============ */
.widget {
  position: absolute; left: 28px; top: 22px;
  width: 170px; height: 170px; padding: 14px 15px 12px;
  border-radius: 22px;
  display: flex; flex-direction: column;
  color: #fff;
  background: rgba(28, 28, 32, 0.38);
  border: 0.5px solid rgba(255,255,255,.22);
  box-shadow: 0 0 0 0.5px rgba(0,0,0,.25), 0 14px 40px rgba(0,0,0,.35);
  touch-action: none;
  transition: transform .18s ease, box-shadow .18s ease;
  z-index: 10;
}
.widget:hover { transform: scale(1.015); }
.widget.dragging { transform: scale(1.05); box-shadow: 0 0 0 0.5px rgba(0,0,0,.25), 0 30px 60px rgba(0,0,0,.45); transition: none; }
.w-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.w-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); }
.w-title { flex: 1; color: var(--red); }
.w-sub { color: rgba(255,255,255,.55); font-weight: 600; }
.w-count {
  font-size: 64px; line-height: 1; font-weight: 700; letter-spacing: -0.04em;
  margin-top: 6px; font-variant-numeric: tabular-nums;
  transition: transform .25s cubic-bezier(.3,1.6,.5,1), color .25s;
}
.w-count.bump { transform: translateY(-6px) scale(1.08); color: #ffd60a; }
.w-count.shake { animation: shake .45s; color: var(--red); }
@keyframes shake {
  0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}
.w-meta { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.65); margin-top: 2px; }
.w-trend { color: var(--red); font-weight: 700; }
.w-spark { width: 100%; height: 26px; margin-top: auto; }
.w-btn {
  margin-top: 6px; height: 22px; border-radius: 11px;
  background: rgba(255,255,255,.16); color: #fff;
  font-size: 11px; font-weight: 600;
  transition: background .15s;
}
.w-btn:hover { background: rgba(255,255,255,.28); }
.w-btn:active { background: rgba(255,255,255,.38); }

.w-tooltip {
  position: fixed; z-index: 2000; pointer-events: none;
  padding: 3px 8px; border-radius: 5px;
  font-size: 12px; font-weight: 500; color: #1d1d1f;
  background: rgba(250, 250, 252, .92);
  border: 0.5px solid rgba(0,0,0,.18);
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(2px); transition: opacity .12s, transform .12s;
  white-space: nowrap;
}
.w-tooltip.show { opacity: 1; transform: translateY(0); }

/* ============ Windows ============ */
.window {
  position: fixed; z-index: 50;
  width: min(var(--w), calc(100vw - 24px));
  border-radius: 12px; overflow: hidden;
  color: var(--text);
  animation: winOpen .28s cubic-bezier(.2,.9,.3,1.1);
}
.window[hidden] { display: none; }
.window.closing { animation: winClose .18s ease-in forwards; }
.window.minimizing { animation: winMin .35s cubic-bezier(.5,0,.7,.4) forwards; }
@keyframes winOpen { from { opacity: 0; transform: scale(.88) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes winClose { to { opacity: 0; transform: scale(.94); } }
@keyframes winMin { to { opacity: 0; transform: translateY(60vh) scale(.08); } }
.window.inactive .lights i { background: #d6d6d8 !important; border-color: #c2c2c4 !important; }
.window.inactive .lights i::after { opacity: 0 !important; }

.win-bar {
  height: 38px; position: relative; display: flex; align-items: center; padding: 0 14px;
  border-bottom: 0.5px solid rgba(0,0,0,.09);
  touch-action: none;
}
.win-title { position: absolute; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 600; color: rgba(0,0,0,.75); pointer-events: none; }
.lights { display: flex; gap: 8px; position: relative; z-index: 1; }
.lights i {
  width: 12px; height: 12px; border-radius: 50%; display: block; position: relative;
  border: 0.5px solid rgba(0,0,0,.15);
}
.l-close { background: #ff5f57; }
.l-min { background: #febc2e; }
.l-max { background: #28c840; }
.lights i::after {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 9px; font-weight: 900; font-style: normal; line-height: 12px; color: rgba(0,0,0,.55);
  opacity: 0;
}
.l-close::after { content: "×"; font-size: 11px !important; }
.l-min::after { content: "–"; }
.l-max::after { content: "+"; }
.lights:hover i::after { opacity: 1; }

.win-body { padding: 18px; }

.about-body { text-align: center; padding: 22px 26px 26px; }
.about-img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.about-body h2 { margin: 14px 0 2px; font-size: 22px; letter-spacing: -0.02em; }
.muted { color: var(--muted); font-size: 12px; margin: 0; }
.about-body dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; text-align: left; font-size: 12px; margin: 18px 0 0; }
.about-body dt { text-align: right; font-weight: 600; }
.about-body dd { margin: 0; color: var(--muted); }

.notes-body { background: #fffef4; min-height: 220px; font-family: "Marker Felt", "Comic Sans MS", var(--font); font-size: 15px; user-select: text; }
.notes-body p { margin: 0; line-height: 26px; border-bottom: 1px solid #ece8c9; }

/* ---- PFP generator ---- */
.pfp-body { display: grid; grid-template-columns: 1fr 230px; gap: 18px; align-items: start; }
.pfp-dl { width: 100%; }
.pfp-dl:disabled { opacity: .45; }
.pfp-stage { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#pfp-canvas {
  width: 100%; aspect-ratio: 1; border-radius: 10px;
  background: repeating-conic-gradient(#e7e7ea 0 25%, #fff 0 50%) 0 0 / 20px 20px;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,.15), 0 6px 20px rgba(0,0,0,.12);
  touch-action: none;
}
.pfp-canvas-wrap { position: relative; }
.pfp-loading {
  position: absolute; inset: 0; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(20, 20, 24, .55); color: #fff; text-align: center; padding: 20px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.pfp-loading[hidden] { display: none; }
.pfp-loading b { font-size: 16px; }
.pfp-loading span { font-size: 12px; opacity: .75; }
.spinner {
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 6px;
  border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ai-group .badge { font-size: 9px; padding: 1px 5px; border-radius: 4px; margin-left: 4px; color: #fff; background: linear-gradient(135deg, #ff7ab6, #8e5cf7); vertical-align: 1px; }
.ai-drop {
  display: flex; align-items: center; gap: 10px; padding: 10px; min-height: 64px;
  border-radius: 10px; border: 1.5px dashed rgba(0,0,0,.22); background: rgba(255,255,255,.5);
  transition: border-color .15s, background .15s;
}
.ai-drop:hover, .ai-drop.over { border-color: var(--accent); background: rgba(10,132,255,.07); }
.ai-drop img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.ai-drop span { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.ai-drop small { color: var(--muted); font-size: 11px; }
.ai-go { width: 100%; margin-top: 8px; background: linear-gradient(135deg, #ff5f9e, #8e5cf7 60%, #3a7bfd) !important; }
.ai-go:disabled { opacity: .45; filter: grayscale(.4); }
.ai-status { font-size: 11px; color: var(--muted); margin-top: 6px; min-height: 14px; }
.ai-status.err { color: var(--red); }
.pfp-hint { margin: 0; font-size: 11px; color: var(--muted); text-align: center; }
.pfp-side { display: flex; flex-direction: column; gap: 14px; }
.pfp-group > label:not(.ai-drop) { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.row { display: flex; gap: 6px; }
.row.wrap { flex-wrap: wrap; }
.seg {
  flex: 1; text-align: center; padding: 5px 8px; border-radius: 6px; font-size: 12px; font-weight: 500;
  background: rgba(0,0,0,.06);
}
.row.wrap .seg { flex: 0 0 auto; }
.seg.active { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.swatch { aspect-ratio: 1; border-radius: 50%; border: 0.5px solid rgba(0,0,0,.2); }
.swatch.active { outline: 2px solid var(--accent); outline-offset: 2px; }
.stickers { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.sticker { aspect-ratio: 1; font-size: 22px; border-radius: 8px; background: rgba(0,0,0,.05); display: grid; place-items: center; transition: transform .12s, background .12s; }
.sticker:hover { background: rgba(0,0,0,.1); transform: scale(1.1); }
#pfp-text {
  width: 100%; padding: 7px 10px; border-radius: 7px; font: inherit; font-size: 13px;
  border: 0.5px solid rgba(0,0,0,.2); background: #fff; outline: none;
  cursor: var(--cursor);
}
#pfp-text:focus { box-shadow: 0 0 0 3px rgba(10,132,255,.35); border-color: var(--accent); }
.btn { flex: 1; padding: 7px 10px; border-radius: 7px; font-size: 13px; font-weight: 600; }
.btn.primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.btn.primary:hover { background: #2a93ff; }
.btn.ghost { background: rgba(0,0,0,.07); }
.btn.ghost:hover { background: rgba(0,0,0,.12); }

/* ============ Dock ============ */
#dock-wrap {
  position: fixed; left: 0; right: 0; bottom: 6px; z-index: 900;
  display: flex; justify-content: center; pointer-events: none;
}
#dock {
  pointer-events: auto;
  display: flex; align-items: flex-end; gap: 4px;
  padding: 5px 6px; border-radius: 22px;
  background: rgba(255, 255, 255, 0.24);
  border: 0.5px solid rgba(255,255,255,.4);
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,.2), 0 0 0 0.5px rgba(0,0,0,.18), 0 10px 40px rgba(0,0,0,.3);
}
.dock-item {
  --s: 1;
  position: relative; display: flex; flex-direction: column; align-items: center;
  width: calc(54px * var(--s)); text-decoration: none;
  transition: width .12s ease-out;
  padding-bottom: 6px;
}
#dock.idle .dock-item { transition: width .25s ease-out; }
.app-icon {
  width: 100%; aspect-ratio: 1; border-radius: 23%;
  position: relative; overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.28), inset 0 0 0 0.5px rgba(255,255,255,.25);
  transform-origin: bottom center;
}
.app-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-icon > svg { width: 100%; height: 100%; display: block; }
.dock-item.bounce .app-icon { animation: bounce .55s cubic-bezier(.3,0,.5,1) 2; }
@keyframes bounce { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-28px); } }
.dot { position: absolute; bottom: 0; width: 4px; height: 4px; border-radius: 50%; background: rgba(0,0,0,.65); opacity: 0; transition: opacity .2s; }
.dock-item.running .dot { opacity: 1; }
.dock-item::before { /* label */
  content: attr(data-label);
  position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  padding: 4px 10px; border-radius: 6px; white-space: nowrap;
  font-size: 13px; font-weight: 500; color: #1d1d1f;
  background: rgba(240,240,244,.85);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 0.5px solid rgba(0,0,0,.15);
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: opacity .1s;
}
.dock-item:hover::before { opacity: 1; }
.dock-sep { width: 1px; align-self: stretch; margin: 6px 5px 10px; background: rgba(0,0,0,.22); box-shadow: 1px 0 0 rgba(255,255,255,.25); }

/* individual icons */
.icon-dustin img { object-position: 50% 18%; transform: scale(1.4); transform-origin: 60% 15%; }
.icon-pump { background: linear-gradient(160deg, #1f2a24, #0d1310); }
.icon-pump svg { padding: 6%; }
.icon-x { background: linear-gradient(180deg, #2a2a2e, #000); }
.icon-x svg { padding: 24%; }
.icon-pfp { background: linear-gradient(135deg, #ff7ab6, #8e5cf7 55%, #3a7bfd); display: grid; place-items: center; }
.icon-pfp .pfp-ring { width: 68%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.icon-pfp .pfp-ring img { object-position: 55% 15%; transform: scale(1.6); transform-origin: 62% 18%; }
.icon-pfp .sparkle { position: absolute; width: 24%; top: 8%; right: 8%; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.icon-notes { background: #fffbe8; }
.icon-notes .notes-top { height: 26%; background: linear-gradient(#ffd84a, #f5c518); }
.icon-notes .notes-lines { padding: 10% 12%; display: flex; flex-direction: column; gap: 11%; height: 74%; }
.icon-notes .notes-lines i { height: 1.5px; background: #e2dcc0; display: block; flex: 0 0 auto; }
.icon-trash { background: none; box-shadow: none; overflow: visible; }
.icon-trash svg { filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }

/* ============ Toast (notification) ============ */
#toast {
  position: fixed; top: calc(var(--menubar-h) + 10px); right: 12px; z-index: 1500;
  width: 330px; padding: 11px 14px; border-radius: 16px;
  display: flex; gap: 11px; align-items: center;
  background: rgba(245,245,248,.7);
  animation: toastIn .4s cubic-bezier(.2,.9,.3,1.15);
}
#toast[hidden] { display: none; }
#toast img { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; object-position: 50% 15%; }
#toast b { display: block; font-size: 13px; }
#toast span { font-size: 13px; color: rgba(0,0,0,.7); }
#toast.out { animation: toastOut .3s ease-in forwards; }
@keyframes toastIn { from { transform: translateX(120%); } to { transform: none; } }
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }

/* ============ Mobile ============ */
@media (max-width: 760px) {
  .mb-item:not(.mb-logo):not(.mb-app) { display: none; }
  .mb-status:nth-child(-n+2) { display: none; }
  .desk-icons { top: auto; bottom: 96px; right: 8px; }
  .widget { left: 16px; top: 16px; }
  .pfp-body { grid-template-columns: 1fr; max-height: calc(100vh - 140px); overflow: auto; }
  .window { left: 12px !important; }
  .dock-item { width: calc(46px * var(--s)); }
  #toast { width: calc(100vw - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============ Chat (Messages-style) ============ */
.icon-chat { background: linear-gradient(180deg, #5df777, #0ac22f); }
.icon-chat svg { padding: 14%; }
.badge-count {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: #ff3b30; color: #fff; font-size: 12px; font-weight: 600;
  display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.badge-count[hidden] { display: none; }
.chat-online { font-weight: 500; color: rgba(0,0,0,.45); font-size: 11px; margin-left: 4px; }
.chat-online::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #30d158; margin-right: 4px; vertical-align: 1px; }
.chat-online:empty::before { display: none; }
.chat-body { display: flex; flex-direction: column; height: min(520px, calc(100vh - 200px)); background: rgba(255,255,255,.55); }
.chat-list { flex: 1; overflow-y: auto; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 2px; user-select: text; -webkit-user-select: text; }
.chat-empty { margin: auto; color: var(--muted); font-size: 12px; }
.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; }
.msg.me { align-self: flex-end; align-items: flex-end; }
.msg .who { font-size: 10.5px; color: rgba(0,0,0,.45); margin: 6px 10px 1px; }
.msg.cont .who { display: none; }
.msg .bubble {
  padding: 6px 11px; border-radius: 17px; font-size: 13.5px; line-height: 1.3;
  background: #e9e9eb; color: #000; white-space: pre-wrap; word-break: break-word;
}
.msg.me .bubble { background: #0a84ff; color: #fff; }
.msg .time { font-size: 10px; color: rgba(0,0,0,.35); margin: 1px 8px 0; display: none; }
.msg:hover .time { display: block; }
.chat-form { padding: 8px 10px 10px; border-top: 0.5px solid rgba(0,0,0,.1); display: flex; flex-direction: column; gap: 6px; background: rgba(250,250,252,.8); }
.chat-name, .chat-text {
  font: inherit; font-size: 13px; border: 0.5px solid rgba(0,0,0,.2); background: #fff; outline: none;
  cursor: var(--cursor);
}
.chat-name { width: 130px; padding: 4px 9px; border-radius: 6px; font-size: 12px; }
.chat-row { display: flex; gap: 6px; align-items: center; }
.chat-text { flex: 1; padding: 6px 12px; border-radius: 16px; min-width: 0; }
.chat-name:focus, .chat-text:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,132,255,.25); }
.chat-send { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; flex: 0 0 auto; }
.chat-send:disabled { background: #b8b8bd; }
.chat-hint { font-size: 10.5px; color: var(--muted); padding-left: 4px; }
.chat-hint.err { color: var(--red); }
.desk-icon .desk-app { width: 58px; height: 58px; }
.desk-icon.selected .desk-app { outline: 2px solid rgba(255,255,255,.35); outline-offset: 2px; }