/* ==========================================================================
   Canterlotus — sim.css
   The interactive Windows 11 desktop simulation.
   Shell geometry: Example A "Inline Product Mockup Card".
   Window chrome language: Example B window-mockup frame (traffic-light dots,
   centred title, tab strip with active underline, mono metadata).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VIEWPORT + SCALED STAGE
   -------------------------------------------------------------------------- */
.sim {
  position: relative;
  width: 100%;
  aspect-ratio: 1120 / 640;
  min-height: 0;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: #22355E;
  isolation: isolate;
}
.sim__stage {
  position: absolute; top: 0; left: 0;
  width: 1120px; height: 640px;
  transform-origin: 0 0;
  transform: scale(var(--sim-scale, 1));
}

/* --------------------------------------------------------------------------
   2. DESKTOP + WALLPAPER
   -------------------------------------------------------------------------- */
.desktop {
  position: absolute; inset: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: -0.1px;
  color: var(--color-blue);
  user-select: none;
}
.wall {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 52% at 78% 6%,  rgba(66, 91, 154, 0.62) 0%, transparent 62%),
    radial-gradient(46% 44% at 14% 92%, rgba(255, 149, 165, 0.34) 0%, transparent 64%),
    linear-gradient(158deg, #1B2A4A 0%, #2B4076 38%, #34508F 68%, #3E5A9C 100%);
}
.wall__arcs  { position: absolute; right: -8%; top: -34%; width: 62%; aspect-ratio: 1; color: var(--color-sky); opacity: 0.30; }
.wall__arcs2 { position: absolute; left: -16%; bottom: -46%; width: 46%; aspect-ratio: 1; color: var(--color-pink); opacity: 0.30; }
.wall__grain {
  position: absolute; inset: 0; opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
}
.wall__mark {
  position: absolute; right: 28px; bottom: 68px;
  text-align: right; color: rgba(255, 255, 255, 0.32);
}
.wall__mark strong {
  display: block; font-size: 15px; font-weight: 500; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.58);
}
.wall__mark span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }

/* Desktop shortcut icons */
.dicons { position: absolute; left: 14px; top: 14px; width: 74px; display: flex; flex-direction: column; gap: 6px; }
.dicon {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 7px 4px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.dicon:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.18); }
.dicon__glyph {
  width: 34px; height: 34px; border-radius: 8px;
  display: grid; place-items: center; flex: none;
  color: #fff;
}
.dicon__glyph svg { width: 16px; height: 16px; }
.dicon__glyph img { width: 26px; height: 26px; display: block; filter: saturate(0.95); }
.dicon__label {
  font-size: 10.5px; line-height: 1.25; text-align: center;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   3. WINDOWS
   -------------------------------------------------------------------------- */
.win {
  position: absolute;
  display: flex; flex-direction: column;
  background: #F7F9FE;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 8px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.46), 0 2px 6px rgba(0, 0, 0, 0.30);
  overflow: hidden;
  transition: box-shadow 200ms var(--ease), opacity 200ms var(--ease);
}
.win.is-blur { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34); opacity: 0.94; }
.win.is-min { display: none; }
.win.is-dragging { transition: none; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55); }
.win.is-anim { transition: transform 260ms var(--ease), width 220ms var(--ease), height 220ms var(--ease), left 220ms var(--ease), top 220ms var(--ease); }

/* Title bar */
.win__bar {
  display: flex; align-items: stretch;
  height: 34px; flex: none;
  background: #EFF3FB;
  border-bottom: 1px solid #DCE3F2;
  cursor: default;
}
.win.is-blur .win__bar { background: #F1F4FB; }
.win__id { display: flex; align-items: center; gap: 8px; padding: 0 12px; min-width: 0; flex: 1; }
.win__appicon { width: 14px; height: 14px; flex: none; border-radius: 3px; }
.win__title {
  font-size: 11.5px; letter-spacing: -0.06px; color: #3A4463;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win.is-blur .win__title { color: #9AA5C0; }
.win__controls { display: flex; align-items: stretch; flex: none; }
.win__btn {
  width: 44px; display: grid; place-items: center;
  cursor: pointer; color: #3A4463;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.win__btn:hover { background: rgba(0, 0, 0, 0.07); }
.win__btn--close:hover { background: #D14B62; color: #fff; }
.win__btn svg { width: 10px; height: 10px; }

/* Window body / viewport */
.win__body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #FEFDF8; overflow: hidden; }
.win__scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }

/* --------------------------------------------------------------------------
   4. BROWSER APP
   -------------------------------------------------------------------------- */
.br { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.br__tabs {
  display: flex; align-items: flex-end; gap: 4px;
  padding: 6px 8px 0; flex: none;
  background: #E8EDF8;
  border-bottom: 1px solid #D8E0F0;
}
.br__tab {
  display: flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 10px;
  border-radius: 6px 6px 0 0;
  background: #DDE4F3; color: #5A6484;
  font-size: 11px; max-width: 220px; cursor: pointer;
  border: 1px solid transparent; border-bottom: 0;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.br__tab:hover { background: #E7EDF9; }
.br__tab.is-active { background: #FEFDF8; color: #2C3E6B; border-color: #D8E0F0; position: relative; }
.br__tab.is-active::after {
  content: ""; position: absolute; left: 8px; right: 8px; top: -1px; height: 2px;
  border-radius: 2px; background: var(--color-pink);
}
.br__favicon { width: 10px; height: 10px; border-radius: 2px; background: var(--color-blue); flex: none; }
.br__tab--store .br__favicon { background: var(--color-pink); }
.br__tab--bot .br__favicon { background: var(--color-sky); }
.br__tablabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br__tabx { font-size: 12px; line-height: 1; color: #97A1BC; opacity: 0; transition: opacity 120ms var(--ease); }
.br__tab:hover .br__tabx, .br__tab.is-active .br__tabx { opacity: 1; }
.br__newtab { width: 24px; height: 24px; display: grid; place-items: center; color: #6C7BA6; border-radius: 4px; cursor: pointer; margin-bottom: 2px; }
.br__newtab:hover { background: rgba(0, 0, 0, 0.07); }

.br__toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; flex: none;
  background: #FEFDF8; border-bottom: 1px solid #E4EAF6;
}
.br__nav {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  color: #5A6484; cursor: pointer;
}
.br__nav:hover { background: rgba(0, 0, 0, 0.06); }
.br__nav svg { width: 11px; height: 11px; }
.br__url {
  flex: 1; display: flex; align-items: center; gap: 7px;
  height: 24px; padding: 0 10px;
  background: #EEF2FB; border: 1px solid #E3E9F5; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 10.5px; color: #4A5578;
  min-width: 0;
}
.br__url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br__url svg { width: 9px; height: 9px; flex: none; color: var(--color-sky); }
.br__dots { width: 22px; height: 22px; display: grid; place-items: center; color: #5A6484; border-radius: 50%; cursor: pointer; }
.br__dots:hover { background: rgba(0, 0, 0, 0.06); }

.br__page { flex: 1; min-height: 0; overflow-y: auto; background: #fff; }
.br__pane { display: none; }
.br__pane.is-active { display: block; }

/* --------------------------------------------------------------------------
   5. DEMO STOREFRONT (page inside browser tab 1)
   -------------------------------------------------------------------------- */
.store { background: #fff; }
.store__nav {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 14px; border-bottom: 1px solid #EAEFF9;
  position: sticky; top: 0; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(6px);
}
.store__logo { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; letter-spacing: -0.2px; }
.store__logo i {
  width: 16px; height: 16px; border-radius: 4px; display: block;
  background: linear-gradient(140deg, var(--color-pink), var(--color-blue));
}
.store__links { display: flex; gap: 12px; margin-left: auto; font-size: 10.5px; color: #7C86A5; }
.store__cart {
  font-size: 10px; border: 1px solid #E3E9F5; border-radius: var(--radius-pill);
  padding: 4px 9px; color: #4A5578;
}
.store__hero {
  display: flex; gap: 14px; align-items: center;
  padding: 16px 14px; background: var(--color-cream);
}
.store__hero-copy { flex: 1; min-width: 0; }
.store__kicker { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.store__h { font-size: 17px; line-height: 1.2; letter-spacing: -0.4px; font-weight: 500; margin-top: 5px; }
.store__p { font-size: 10.5px; line-height: 1.5; color: #6B7594; margin-top: 5px; }
.store__btn {
  display: inline-block; margin-top: 9px;
  background: var(--color-pink); color: var(--color-blue-deep);
  font-size: 10.5px; border-radius: var(--radius-pill); padding: 6px 13px;
}
.store__hero-art {
  width: 96px; height: 74px; border-radius: 10px; flex: none;
  background:
    repeating-radial-gradient(circle at 62% 40%, rgba(118, 192, 236, 0.75) 0 1px, transparent 1px 9px),
    linear-gradient(150deg, #EFF4FC, #DDE6F5);
  border: 1px solid #DDE6F5;
}
.store__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; }
.store__card { border: 1px solid #EAEFF9; border-radius: 10px; overflow: hidden; }
.store__thumb { height: 46px; background: linear-gradient(140deg, #FFF6DC, #E6EBF7); }
.store__card-body { padding: 8px 9px; }
.store__name { font-size: 10.5px; font-weight: 500; letter-spacing: -0.1px; }
.store__price { font-size: 10px; color: #7C86A5; margin-top: 2px; }
.store__pill {
  display: inline-block; margin-top: 6px; font-size: 9px;
  background: var(--color-pink-tint); color: #2C3E6B; border-radius: var(--radius-pill); padding: 2px 7px;
}
.store__foot {
  border-top: 1px solid #EAEFF9; padding: 11px 14px;
  display: flex; align-items: center; gap: 10px; font-size: 9.5px; color: #97A1BC;
}
.store__foot b { font-weight: 500; color: #4A5578; }
.store__foot .spacer { margin-left: auto; }

/* --------------------------------------------------------------------------
   6. OPS APP — inventory table + orders/margin tables
   -------------------------------------------------------------------------- */
.ops { padding: 12px 14px 16px; }
.ops__head { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.ops__title { font-size: 13px; font-weight: 500; letter-spacing: -0.2px; }
.ops__sub { font-family: var(--font-mono); font-size: 9.5px; color: var(--color-muted); margin-left: auto; }

table.tbl { width: 100%; border-collapse: collapse; font-size: 10.5px; }
table.tbl th {
  text-align: left; font-family: var(--font-mono); font-weight: 400; font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted);
  padding: 6px 8px; border-bottom: 1px solid #DDE4F1; white-space: nowrap;
}
table.tbl td { padding: 6px 8px; border-bottom: 1px solid #EDF1F9; color: #33405F; white-space: nowrap; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tr.is-hot td { background: rgba(255, 149, 165, 0.08); }
.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 10px; }
.sku { font-family: var(--font-mono); font-size: 9.5px; color: #7C86A5; }

/* inventory action strip — fills the pane and gives the demo an action */
.ops__note {
  margin-top: 12px; display: flex; align-items: center; gap: 9px;
  background: var(--color-cream); border-radius: 10px; padding: 10px 12px;
  font-size: 10.5px; color: #5A6484; line-height: 1.4;
}
.ops__note b { font-weight: 500; color: #2C3E6B; }
.ops__note .ops__action {
  margin-left: auto; flex: none; font-size: 9.5px; font-weight: 500;
  background: var(--color-pink); color: var(--color-blue-deep); border-radius: var(--radius-pill);
  padding: 6px 12px; cursor: pointer; transition: background 140ms var(--ease);
}
.ops__note .ops__action:hover { background: var(--color-pink-dark); }
.pill {
  display: inline-block; font-size: 9px; line-height: 1.6;
  border-radius: var(--radius-pill); padding: 0 7px;
}
.pill--low { background: var(--color-blue); color: var(--color-cream); }
.pill--ok  { background: var(--color-sky-tint); color: var(--color-blue-deep); }
.pill--warn{ background: var(--color-pink); color: var(--color-blue-deep); }

.ops__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.stat {
  background: var(--color-cream); border-radius: 10px; padding: 9px 10px;
}
.stat__label { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.stat__value { font-size: 16px; font-weight: 500; letter-spacing: -0.5px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.stat__value--accent { color: var(--color-blue); }
.stat__value--muted { color: var(--color-muted); }
.stat__delta { font-size: 9px; color: var(--color-muted); margin-top: 2px; }

.breakdown {
  margin-top: 12px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px;
}
.bd { background: var(--color-sky-tint); border-radius: 10px; padding: 12px; }
.bd--mint { background: var(--color-pink-tint); }
.bd__title { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-blue); }
.bd--mint .bd__title { color: #2C3E6B; }
.bd__row { display: flex; align-items: baseline; gap: 8px; font-size: 10.5px; margin-top: 7px; }
.bd__row span:first-child { color: #5A6484; }
.bd__row .rule { flex: 1; border-bottom: 1px dotted rgba(0, 0, 0, 0.18); transform: translateY(-3px); }
.bd__row b { font-family: var(--font-mono); font-weight: 400; font-size: 10px; font-variant-numeric: tabular-nums; }
.bd__total {
  display: flex; align-items: baseline; gap: 8px; margin-top: 9px; padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.12); font-size: 11px; font-weight: 500;
}
.bd__total b { margin-left: auto; font-family: var(--font-mono); font-size: 11px; }
.bd__note { font-size: 9px; color: var(--color-muted); margin-top: 8px; line-height: 1.45; }

/* --------------------------------------------------------------------------
   7. CHATBOT APP
   -------------------------------------------------------------------------- */
.bot { display: flex; flex-direction: column; min-height: 0; flex: 1; background: #fff; }
.bot__head {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; border-bottom: 1px solid #EAEFF9; flex: none;
}
.bot__avatar {
  width: 28px; height: 28px; border-radius: 9px; flex: none;
  background: linear-gradient(140deg, var(--color-sky), #2C3E6B);
  display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 500;
}
.bot__who { min-width: 0; }
.bot__name { font-size: 12px; font-weight: 500; letter-spacing: -0.2px; }
.bot__status { display: flex; align-items: center; gap: 5px; font-size: 9.5px; color: var(--color-muted); }
.bot__status i { width: 5px; height: 5px; border-radius: 50%; background: var(--color-sky); display: block; }
.bot__badge {
  margin-left: auto; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-blue);
  background: var(--color-sky-tint); border-radius: var(--radius-pill); padding: 3px 8px;
}

.bot__log { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 13px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 88%; font-size: 10.5px; line-height: 1.55; }
.msg__bubble { padding: 8px 11px; border-radius: 12px; }
.msg--bot .msg__bubble { background: var(--color-cream); border-bottom-left-radius: 4px; color: #33405F; }
.msg--me { align-self: flex-end; }
.msg--me .msg__bubble { background: var(--color-blue); color: #fff; border-bottom-right-radius: 4px; }
.msg__meta { font-family: var(--font-mono); font-size: 8.5px; color: var(--color-muted); margin-top: 4px; }
.msg--me .msg__meta { text-align: right; }
.msg__cta {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-family: var(--font-mono); font-size: 9px; color: var(--color-alert);
  border-bottom: 1px solid rgba(176, 58, 85, 0.35); padding-bottom: 1px;
}
.msg code {
  font-family: var(--font-mono); font-size: 9.5px;
  background: rgba(0, 0, 0, 0.05); border-radius: 3px; padding: 1px 4px;
}

/* today summary card inside chat */
.bot__summary {
  margin: 0 0 2px; background: var(--color-pink-tint); border-radius: 10px; padding: 10px 11px;
}
.bot__summary-title { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #2C3E6B; }
.bot__summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 7px; }
.bot__summary-grid div { display: flex; flex-direction: column; gap: 1px; }
.bot__summary-grid b { font-size: 13px; font-weight: 500; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.bot__summary-grid span { font-size: 8.5px; color: #5A6484; }

.bot__chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 9px 13px; border-top: 1px solid #EFF3FA; flex: none; }
.chip {
  font-size: 9.5px; border: 1px solid #E3E9F5; border-radius: var(--radius-pill);
  padding: 4px 9px; color: #5A6484; cursor: pointer; background: #fff;
  transition: background 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease);
}
.chip:hover { background: var(--color-cream); border-color: var(--color-pink); color: var(--color-blue); }

.bot__form { display: flex; align-items: center; gap: 7px; padding: 9px 13px 11px; border-top: 1px solid #EAEFF9; flex: none; }
.bot__input {
  flex: 1; min-width: 0; height: 30px; padding: 0 11px;
  background: var(--color-cream); border: 1px solid transparent; border-radius: var(--radius-pill);
  font-size: 10.5px;
}
.bot__input:focus { outline: none; border-color: var(--color-blue); background: #fff; }
.bot__send {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--color-pink); color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: background 140ms var(--ease), transform 140ms var(--ease);
}
.bot__send:hover { background: var(--color-pink-dark); transform: scale(1.06); }
.bot__send svg { width: 12px; height: 12px; }
.bot__foot {
  padding: 0 13px 10px; font-family: var(--font-mono); font-size: 8px;
  color: var(--color-muted); letter-spacing: 0.02em;
}

/* typing indicator */
.typing { display: inline-flex; gap: 3px; align-items: center; padding: 9px 11px; }
.typing i { width: 4px; height: 4px; border-radius: 50%; background: #A9B3CC; animation: tbounce 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes tbounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* --------------------------------------------------------------------------
   8. TASKBAR
   -------------------------------------------------------------------------- */
.taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 251, 238, 0.82);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  z-index: 500;
}
.taskbar__center { display: flex; align-items: center; gap: 3px; }
.tb {
  position: relative;
  width: 40px; height: 38px; border-radius: 5px;
  display: grid; place-items: center; cursor: pointer;
  transition: background 140ms var(--ease);
}
.tb:hover { background: rgba(0, 0, 0, 0.06); }
.tb svg { width: 20px; height: 20px; }
.tb img { width: 24px; height: 24px; display: block; filter: saturate(0.92); }
.tb__dot {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 3px; border-radius: 2px;
  background: #6C7BA6; opacity: 0; transition: opacity 160ms var(--ease), background 160ms var(--ease);
}
.tb.is-running .tb__dot { opacity: 1; }
.tb.is-active .tb__dot { background: var(--color-pink); width: 18px; opacity: 1; }
.tb.is-active { background: rgba(0, 0, 0, 0.05); }
.tb__tip {
  position: absolute; bottom: 46px; left: 50%; transform: translateX(-50%) translateY(4px);
  background: #FEFDF8; border: 1px solid #DAE1F0; border-radius: 6px;
  padding: 5px 9px; font-size: 10.5px; color: #33405F; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  opacity: 0; pointer-events: none; transition: opacity 140ms var(--ease), transform 140ms var(--ease);
}
.tb:hover .tb__tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.taskbar__tray {
  position: absolute; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  color: #33405F;
}
.tray__icons { display: flex; align-items: center; gap: 9px; opacity: 0.85; }
.tray__icons svg { width: 13px; height: 13px; }
.tray__icons img { width: 15px; height: 15px; display: block; }
.tray__clock { text-align: right; font-size: 10.5px; line-height: 1.35; cursor: pointer; }
.tray__clock span { display: block; }
.taskbar__show { width: 5px; height: 100%; border-left: 1px solid rgba(0, 0, 0, 0.12); }

/* --------------------------------------------------------------------------
   9. TOAST (e.g. "window closed — restore from the taskbar")
   -------------------------------------------------------------------------- */
.sim__toast {
  position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%) translateY(8px);
  background: rgba(30, 45, 88, 0.95); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm); padding: 9px 14px;
  font-size: 11px; letter-spacing: -0.1px;
  opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
  z-index: 900; max-width: 80%;
}
.sim__toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.sim__toast b { color: var(--color-cream); font-weight: 500; }

/* --------------------------------------------------------------------------
   10. STACKED FALLBACK (narrow viewports — no drag, one column)
   -------------------------------------------------------------------------- */
.sim.is-stacked { aspect-ratio: auto; min-height: 0; overflow: visible; }
.sim.is-stacked .sim__stage { position: static; width: 100%; height: auto; transform: none; }
.sim.is-stacked .desktop { position: static; padding: 12px; }
.sim.is-stacked .wall, .sim.is-stacked .wall__mark, .sim.is-stacked .dicons { display: none; }
.sim.is-stacked .desktop {
  background: linear-gradient(158deg, #1B2A4A 0%, #2B4076 40%, #3E5A9C 100%);
  display: flex; flex-direction: column; gap: 12px;
}
.sim.is-stacked .win {
  position: static !important;
  width: 100% !important; height: auto !important;
  max-height: none;
}
.sim.is-stacked .win__scroll, .sim.is-stacked .bot__log, .sim.is-stacked .br__page { max-height: 300px; }
/* the demo tables are wider than a phone: let them be swiped rather than clipped */
.sim.is-stacked .win__scroll,
.sim.is-stacked .br__page { overflow: auto; -webkit-overflow-scrolling: touch; }
.sim.is-stacked .ops, .sim.is-stacked .store { min-width: 560px; }
.sim.is-stacked .bot { min-width: 0; }
.sim.is-stacked .win__bar { cursor: default; }
.sim.is-stacked .taskbar {
  position: static; margin: 2px -12px -12px; height: 46px;
  border-radius: 0 0 var(--radius-image) var(--radius-image);
}
.sim.is-stacked .taskbar__center { gap: 2px; }
.sim.is-stacked .tray__clock { font-size: 9.5px; }