/* © 2026 Qder.ai (Itay Funes). All rights reserved. Proprietary and confidential; see LICENSE. */
/*
 * Qder OS, live, on the drawn computer (2026-10-06, the founder: "use your
 * ability to mimic exactly how it looks", "auto switch between the apps and
 * showcase accepting orders, waiter calls").
 *
 * Built at the size the real screens run at, 1600 x 900, from the product's own
 * numbers (os/packages/qder_core theme.dart Cobalt, qder_station ticket card,
 * qder_manager floor and calls) and checked against preview.sh captures, then
 * scaled as one picture to whatever the drawn screen is (js/os-live.js sets
 * --k). The colours below are theme.dart's Cobalt tokens, by name.
 */
.os-live { position: relative; overflow: hidden; background: #EEF2FB; }
/* A picture gave the computer its width; the live screen has none of its own, so the computer takes it outright. */
.aio:has(.os-live) { width: 640px; max-width: 100%; min-width: 0; }
/* ...and the grid it sits in may be narrower than that, on a phone. */
.os-show { grid-template-columns: minmax(0, 1fr); }
.ql-fit { position: absolute; inset: 0; }
.ql {
  --accent: #0B3FD9; --accent700: #0830A8; --accent300: #6E92F2; --accent100: #DEE7FD; --accent50: #F1F5FE;
  --navy: #0A1330; --ink: #111A33; --body: #4A5578; --muted: #4F5A7C; --faint: #8C96B2;
  --line: #E3E8F2; --line2: #EFF2F8; --surface: #FFFFFF; --bgAlt: #F7F9FC; --ground: #EEF2FB; --edge: rgba(10, 19, 48, .10);
  --teal: #067A6E; --tealBg: #E6F4F1; --tealLine: #B9E0D8; --tealInk: #06584F;
  --amber: #9A6100; --amberBg: #FBF1E0; --amberLine: #E8D3AC; --amberInk: #7A4B00;
  --rose: #B32748; --roseBg: #FCEBEF; --roseLine: #F3C9D3; --roseInk: #8C1C36;
  position: absolute; top: 0; inset-inline-start: 0; width: 1600px; height: 900px;
  transform: scale(var(--k, .4)); transform-origin: top right;
  font-family: "Assistant", system-ui, sans-serif; color: var(--ink); line-height: 1.25;
  background:
    radial-gradient(900px 520px at 12% 96%, rgba(110, 146, 242, .20), transparent 70%),
    radial-gradient(760px 460px at 86% 6%, rgba(11, 63, 217, .16), transparent 70%),
    radial-gradient(620px 420px at 52% 54%, rgba(157, 182, 247, .18), transparent 72%),
    linear-gradient(160deg, #F4F7FE 0%, #EAF0FC 100%);
  user-select: none; -webkit-user-select: none; pointer-events: none;
}
.ql[dir="ltr"] { transform-origin: top left; }
.ql * { box-sizing: border-box; }
.ql .n { font-family: "Heebo", "Assistant", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.ql svg { display: block; flex: none; max-width: none; }  /* shell.css caps every svg at 100%, which shrinks them in a centred grid */
/* The faint Q behind everything (the wallpaper's mark). */
.ql-mark { position: absolute; inset-inline-end: 35px; top: 245px; width: 570px; height: 570px; border-radius: 50%;
  border: 130px solid rgba(255, 255, 255, .34); }
.ql-mark::after { content: ""; position: absolute; inset-inline-start: -200px; bottom: -195px; width: 430px; height: 120px; background: rgba(255, 255, 255, .30); }

/* ---------------------------------------------------------- the menu bar */
.ql-bar {
  position: absolute; top: 8px; inset-inline: 20px; height: 44px; border-radius: 22px;
  display: flex; align-items: center; gap: 14px; padding: 0 18px;
  background: rgba(255, 255, 255, .82); border: 1px solid var(--edge);
  box-shadow: 0 10px 24px -18px rgba(10, 19, 48, .35);
}
.ql-logo { display: flex; align-items: center; gap: 6px; font-family: "Heebo", sans-serif; font-weight: 800; font-size: 25px; color: var(--accent); direction: ltr; }
.ql-logo svg { width: 21px; height: 21px; }
.ql-where { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--body); white-space: nowrap; }
.ql-where b { color: var(--navy); font-weight: 700; }
.ql-where i { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }
.ql-bar-end { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.ql-net { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px;
  background: var(--tealBg); border: 1px solid var(--tealLine); color: var(--tealInk); font-weight: 700; font-size: 15px; }
.ql-toggle { width: 48px; height: 32px; border-radius: 16px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; }
.ql-clock { display: flex; align-items: baseline; gap: 10px; }
.ql-clock .d { font-size: 15px; color: var(--muted); }
.ql-clock .t { font-family: "Heebo", sans-serif; font-weight: 800; font-size: 21px; color: var(--navy); }

/* ---------------------------------------------------------- the dock */
.ql-dock {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 52px; padding: 10px 42px 14px; border-radius: 26px;
  background: rgba(255, 255, 255, .80); border: 1px solid var(--edge);
  box-shadow: 0 24px 40px -26px rgba(10, 19, 48, .45);
}
.ql-dock .it { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink); position: relative; }
.ql-dock .tile { width: 62px; height: 62px; border-radius: 17px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 8px 16px -12px rgba(10, 19, 48, .4); color: var(--accent); }
.ql-dock .tile svg { width: 30px; height: 30px; }
.ql-dock .app .tile { background: linear-gradient(160deg, #2556E8, var(--accent700)); border-color: transparent; color: #fff; }
.ql-dock .badge { position: absolute; top: -8px; inset-inline-end: -8px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px;
  background: var(--rose); color: #fff; border: 2px solid #fff; font: 800 14px/22px "Heebo", sans-serif; text-align: center; }
.ql-dock .on::after { content: ""; position: absolute; bottom: -9px; width: 18px; height: 4px; border-radius: 2px; background: var(--accent); }

/* ---------------------------------------------------------- views */
.ql-view { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.ql-view.on { opacity: 1; }

/* Home: the clock, and this screen's app on one card. */
.ql-home-clock { position: absolute; inset-inline-start: 60px; top: 270px; text-align: start; }
.ql-home-clock .t { font-family: "Heebo", sans-serif; font-weight: 900; font-size: 168px; line-height: 1; letter-spacing: -2px; color: var(--navy); }
.ql-home-clock .d { margin-top: 22px; font-size: 30px; font-weight: 600; color: var(--muted); }
.ql-home-clock .b { margin-top: 24px; font-family: "Heebo", sans-serif; font-weight: 800; font-size: 46px; color: var(--accent); }
.ql-card-app { position: absolute; inset-inline-start: 902px; top: 243px; width: 638px; padding: 32px 32px 34px; border-radius: 30px;
  background: rgba(255, 255, 255, .86); border: 1px solid var(--edge); box-shadow: 0 30px 60px -40px rgba(10, 19, 48, .5); }
.ql-card-app .h { display: flex; align-items: center; gap: 18px; font-family: "Heebo", sans-serif; font-weight: 800; font-size: 38px; color: var(--navy); }
.ql-card-app .ic { width: 84px; height: 84px; border-radius: 22px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, #2556E8, var(--accent700)); box-shadow: 0 12px 22px -12px rgba(11, 63, 217, .7); }
.ql-card-app .ic svg { width: 42px; height: 42px; }
.ql-card-app .nums { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 28px; }
.ql-card-app .nums b { display: block; font: 900 48px/1.05 "Heebo", sans-serif; color: var(--accent); }
.ql-card-app .nums b.r { color: var(--rose); } .ql-card-app .nums b.a { color: var(--amber); }
.ql-card-app .nums span { font-size: 18px; color: var(--muted); }
.ql-card-app .open { margin-top: 34px; height: 66px; border-radius: 33px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(180deg, #1F52EA, var(--accent)); color: #fff; font-weight: 700; font-size: 19px; box-shadow: 0 14px 24px -14px rgba(11, 63, 217, .8); }

/* The app panel every app sits in. */
.ql-panel { position: absolute; top: 61px; inset-inline: 20px; bottom: 133px; border-radius: 28px;
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 24px 50px -40px rgba(10, 19, 48, .4); }
.ql-head { position: absolute; top: 22px; inset-inline: 28px; height: 70px; display: flex; align-items: center; gap: 14px; }
.ql-title { display: flex; align-items: baseline; gap: 18px; }
.ql-title b { font: 900 44px/1 "Heebo", sans-serif; color: var(--navy); }
.ql-title span { font-size: 19px; color: var(--muted); }
.ql-seg { display: flex; gap: 6px; padding: 6px; border-radius: 30px; background: #fff; border: 1px solid var(--line); margin-inline-start: 10px; }
.ql-seg span { height: 44px; padding: 0 18px; border-radius: 22px; display: flex; align-items: center; font-weight: 700; font-size: 17px; color: var(--ink); }
.ql-seg span.on { background: var(--accent); color: #fff; }
.ql-chip { height: 40px; padding: 0 16px; border-radius: 20px; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; border: 1px solid; }
.ql-chip i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.ql-chip.r { background: var(--roseBg); color: var(--roseInk); border-color: var(--roseLine); }
.ql-chip.a { background: var(--amberBg); color: var(--amberInk); border-color: var(--amberLine); }
.ql-chip.b { background: var(--accent50); color: var(--accent700); border-color: var(--accent100); }
.ql-head-end { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }
.ql-ibtn { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--accent); }
.ql-ibtn svg { width: 26px; height: 26px; }
.ql-ibtn.big { width: 64px; height: 64px; background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 12px 22px -12px rgba(11, 63, 217, .8); }
.ql-ibtn.fill { background: var(--accent); color: #fff; border-color: var(--accent); }
.ql-count { display: flex; align-items: baseline; gap: 10px; font-size: 19px; color: var(--muted); }
.ql-count b { font: 900 52px/1 "Heebo", sans-serif; color: var(--accent); }

/* Side cards (סה"כ להכנה, אזלו, הודעה למשמרת, and the shift lead's columns). */
.ql-side { position: absolute; top: 102px; inset-inline-end: 28px; width: 340px; bottom: 20px; display: flex; flex-direction: column; gap: 18px; }
.ql-card { background: rgba(255, 255, 255, .92); border: 1px solid var(--edge); border-radius: 22px; padding: 22px 22px; box-shadow: 0 18px 36px -30px rgba(10, 19, 48, .45); overflow: hidden; }
.ql-card h4 { margin: 0; font-size: 19px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 10px; }
.ql-card h4 .sp { margin-inline-start: auto; }
.ql-row { display: flex; align-items: baseline; gap: 18px; margin-top: 16px; font-size: 18px; font-weight: 600; color: var(--ink); }
.ql-row b { font: 900 26px/1 "Heebo", sans-serif; color: var(--accent); min-width: 22px; }
.ql-pillbtn { height: 54px; border-radius: 27px; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; color: var(--ink); margin-top: 10px; }
.ql-tag { height: 40px; padding: 0 14px; border-radius: 20px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; border: 1px solid; }
.ql-tag.b { background: var(--accent50); color: var(--accent); border-color: var(--accent100); }
.ql-tag.r { background: var(--roseBg); color: var(--roseInk); border-color: var(--roseLine); }

/* ---------------------------------------------------------- the rail and its tickets */
.ql-rail { position: absolute; top: 106px; inset-inline-start: 28px; inset-inline-end: 392px; bottom: 20px; overflow: hidden; }
.ql-rail::before { content: ""; position: absolute; top: 11px; inset-inline: 0; height: 6px; border-radius: 3px; background: #D5DBEA; }
/* Oldest first from the start edge (the right, in Hebrew), as the rail hangs them. */
.ql-tickets { position: absolute; top: 0; inset-inline-start: 0; display: flex; gap: 18px; }
.ql-tk { width: 300px; flex: none; display: flex; flex-direction: column; align-items: center;
  transition: transform .5s cubic-bezier(.2, .9, .3, 1.25), opacity .4s ease, width .45s ease .25s, margin .45s ease .25s; }
.ql-tk.gone { opacity: 0; transform: translateY(40px); width: 0; margin-inline: -9px; }
.ql-tk.drop { opacity: 0; transform: translateY(-24px); }
.ql-tk .clip { width: 54px; height: 22px; border-radius: 5px; background: #CBD2E2; border: 2px solid #9AA4BD; position: relative; z-index: 1; }
.ql-tk .card { width: 100%; margin-top: -1px; background: #fff; border: 1px solid var(--edge); border-radius: 8px 8px 16px 16px; overflow: hidden;
  box-shadow: 0 14px 28px -14px rgba(10, 19, 48, .14); transition: border-color .3s, box-shadow .3s; }
.ql-tk.making .card { border: 3px solid var(--accent); }
.ql-tk.late .card { box-shadow: 0 0 26px -6px rgba(179, 39, 72, .30); }
.ql-tk .band { display: flex; align-items: baseline; gap: 8px; padding: 10px 18px; border-bottom: 1px solid; }
.ql-tk .band .w { font-size: 16px; font-weight: 700; }
.ql-tk .band .t { font: 900 34px/1 "Heebo", sans-serif; }
.ql-tk .band .a { margin-inline-start: auto; font: 800 30px/1 "Heebo", sans-serif; }
.ql-tk.late .band { background: var(--rose); border-color: var(--rose); color: #fff; }
.ql-tk.soon .band { background: var(--amberBg); border-color: var(--amberLine); color: var(--amberInk); }
.ql-tk.soon .band .t { color: var(--navy); }
.ql-tk.fresh .band { background: var(--tealBg); border-color: var(--tealLine); color: var(--tealInk); }
.ql-tk.fresh .band .t { color: var(--navy); }
.ql-tk .meta { display: flex; align-items: center; gap: 8px; padding: 8px 16px 2px; font-size: 14px; font-weight: 600; color: var(--muted); }
.ql-tk .meta .p { margin-inline-start: auto; font-size: 15px; font-weight: 800; color: var(--navy); }
.ql-st { height: 28px; padding: 0 12px; border-radius: 14px; display: inline-flex; align-items: center; font-weight: 700; font-size: 14px; border: 1px solid; }
.ql-st.new { background: var(--accent50); color: var(--accent); border-color: var(--accent100); }
.ql-st.mk { background: var(--amberBg); color: var(--amberInk); border-color: var(--amberLine); }
.ql-tk .strip { padding: 8px 16px; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ql-tk .strip.al { background: var(--roseBg); color: var(--roseInk); }
.ql-tk .strip.id { background: var(--amberBg); color: var(--amberInk); font-size: 15px; line-height: 1.4; }
.ql-tk .info { padding: 8px 16px 0; font-size: 15px; font-weight: 600; color: var(--accent); }
.ql-tk .by { padding: 6px 16px 0; font-size: 14px; color: var(--muted); }
.ql-tk .lines { padding: 8px 12px 6px; }
.ql-ln { display: flex; gap: 0; padding: 7px 4px; }
.ql-ln .q { width: 44px; font: 900 26px/1.1 "Heebo", sans-serif; color: var(--accent); }
.ql-ln .x { flex: 1; }
.ql-ln .nm { font-size: 21px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.ql-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.ql-pills span { height: 28px; padding: 0 11px; border-radius: 14px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 700; border: 1px solid; }
.ql-pills span.am { background: var(--amberBg); color: var(--amberInk); border-color: var(--amberLine); }
.ql-pills span.no { background: var(--roseBg); color: var(--roseInk); border-color: var(--roseLine); }
.ql-pills span.al { height: 25px; font-size: 13px; background: var(--bgAlt); color: var(--muted); border-color: var(--line); }
.ql-pills span.hit { height: 25px; font-size: 13px; background: var(--rose); color: #fff; border-color: var(--rose); }
.ql-tk .btns { display: flex; gap: 10px; padding: 12px; }
.ql-btn { flex: 1; height: 60px; border-radius: 30px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 19px; transition: background .25s, color .25s; }
.ql-btn.pri { background: linear-gradient(180deg, #1F52EA, var(--accent)); color: #fff; box-shadow: 0 10px 18px -12px rgba(11, 63, 217, .8); }
.ql-btn.ok { background: linear-gradient(180deg, #0A8F80, var(--teal)); color: #fff; box-shadow: 0 10px 18px -12px rgba(6, 122, 110, .8); }
.ql-btn.qt { background: #fff; color: var(--ink); border: 1px solid var(--line); }

/* The undo bar, for eight seconds after a press. */
.ql-undo { position: absolute; inset-inline: 28px 392px; bottom: 20px; height: 76px; padding: 0 12px 0 20px; border-radius: 22px;
  display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--edge); box-shadow: 0 18px 36px -24px rgba(10, 19, 48, .5);
  font-size: 19px; font-weight: 600; opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s; }
.ql-undo.on { opacity: 1; transform: none; }
.ql-undo svg { width: 28px; height: 28px; }
.ql-undo .u { margin-inline-start: auto; height: 52px; padding: 0 22px; border-radius: 26px; border: 1px solid var(--line); display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.ql-undo .u svg { width: 22px; height: 22px; color: var(--accent); }

/* ---------------------------------------------------------- the shift lead */
.ql-floor { position: absolute; top: 112px; inset-inline-start: 28px; width: 646px; bottom: 20px; }
.ql-calls { position: absolute; top: 112px; inset-inline-start: 694px; width: 398px; bottom: 20px; }
.ql-mgr-side { position: absolute; top: 112px; inset-inline-start: 1112px; inset-inline-end: 28px; bottom: 20px; display: flex; flex-direction: column; gap: 18px; }
.ql-floor .ql-card, .ql-calls .ql-card { height: 100%; }
.ql-floor .sub { font-size: 14px; color: var(--muted); margin-inline-start: auto; font-weight: 400; }
.ql-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.ql-stat { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: #fff; }
.ql-stat .k { font-size: 14px; color: var(--muted); }
.ql-stat .v { font: 900 30px/1.1 "Heebo", sans-serif; color: var(--navy); margin-top: 2px; }
.ql-stat .v.a { color: var(--amber); }
.ql-stat .s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ql-zone { margin-top: 20px; font-size: 15px; font-weight: 700; color: var(--navy); }
.ql-grid { display: grid; grid-template-columns: repeat(3, 148px); gap: 12px; margin-top: 12px; justify-content: start; }
.ql-tb { height: 118px; border-radius: 16px; border: 1px solid var(--line); background: var(--bgAlt); padding: 10px 14px; position: relative; transition: background .35s, border-color .35s; }
.ql-tb .t { font: 900 30px/1 "Heebo", sans-serif; color: #B7C0D6; }
.ql-tb .s { position: absolute; bottom: 12px; inset-inline-start: 14px; font-size: 14px; color: var(--muted); }
.ql-tb .m { position: absolute; bottom: 12px; inset-inline-end: 14px; font: 800 17px/1 "Heebo", sans-serif; color: var(--navy); }
.ql-tb .s b { display: block; font-weight: 600; color: var(--navy); font-size: 14px; }
.ql-tb.busy { background: #fff; border: 3px solid var(--accent); }
.ql-tb.busy .t { color: var(--navy); }
.ql-tb.call { background: var(--roseBg); border: 3px solid var(--rose); animation: ql-blink 1.6s ease-in-out infinite; }
.ql-tb.call .t { color: var(--rose); }
.ql-tb .hand { position: absolute; top: 12px; inset-inline-end: 14px; display: flex; align-items: center; gap: 4px; color: var(--rose); font: 800 15px/1 "Heebo", sans-serif; opacity: 0; transition: opacity .3s; }
.ql-tb.call .hand { opacity: 1; }
.ql-tb .hand svg { width: 22px; height: 22px; }
@keyframes ql-blink { 50% { box-shadow: 0 0 0 6px rgba(179, 39, 72, .16); } }
.ql-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; font-size: 14px; color: var(--muted); }
.ql-legend span { display: flex; align-items: center; gap: 6px; }
.ql-legend i { width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--line); background: var(--bgAlt); }
.ql-legend i.b { border-color: var(--accent100); background: #fff; } .ql-legend i.bk { border-color: var(--accent); }
.ql-legend i.r { border-color: var(--rose); } .ql-legend i.a { border-color: var(--amberLine); background: var(--amberBg); }
.ql-calls .list { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.ql-call { border-radius: 18px; border: 1px solid var(--roseLine); background: var(--roseBg); padding: 14px 16px 16px;
  transition: background .35s, border-color .35s, opacity .4s, transform .45s cubic-bezier(.2, .9, .3, 1.2), max-height .45s ease .2s, margin .45s ease .2s, padding .45s ease .2s; max-height: 200px; overflow: hidden; }
.ql-call .top { display: flex; align-items: baseline; gap: 8px; }
.ql-call .top .w { font-size: 16px; font-weight: 700; color: var(--muted); }
.ql-call .top .t { font: 900 32px/1 "Heebo", sans-serif; color: var(--navy); }
.ql-call .top .a { margin-inline-start: auto; font: 800 26px/1 "Heebo", sans-serif; color: var(--rose); }
.ql-call .why { margin-top: 10px; font-size: 19px; font-weight: 700; color: var(--roseInk); line-height: 1.4; }
.ql-call .ack { margin-top: 6px; font-size: 15px; color: var(--teal); display: none; }
.ql-call .btns { display: flex; gap: 10px; margin-top: 14px; }
.ql-call .ql-btn { height: 56px; }
.ql-call.acked { background: rgba(255, 255, 255, .7); border-color: var(--edge); }
.ql-call.acked .why { color: var(--ink); }
.ql-call.acked .ack { display: block; }
.ql-call.acked .go { display: none; }
.ql-call.gone { opacity: 0; transform: translateX(40px); max-height: 0; padding-block: 0; margin-top: -14px; }
.ql-call.drop { opacity: 0; transform: translateY(-20px); }
.ql-bk { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 17px; font-weight: 600; }
.ql-bk b { font: 800 24px/1 "Heebo", sans-serif; color: var(--navy); }
.ql-bk .tg { margin-inline-start: auto; height: 28px; padding: 0 10px; border-radius: 14px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; }
.ql-bk .tg.a { background: var(--amberBg); color: var(--amberInk); } .ql-bk .tg.t { background: var(--tealBg); color: var(--tealInk); }
.ql-mini { font-size: 14px; color: var(--muted); font-weight: 400; }

/* The press: where a finger touched, so the reel reads as somebody working the screen. */
.ql-tap { position: absolute; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; z-index: 9;
  background: rgba(10, 19, 48, .16); border: 3px solid rgba(255, 255, 255, .95); box-shadow: 0 6px 18px rgba(10, 19, 48, .25);
  opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.ql-tap.on { opacity: 1; transform: scale(1); }
.ql-tap.press { transform: scale(.82); background: rgba(11, 63, 217, .28); }

@media (prefers-reduced-motion: reduce) {
  .ql-view, .ql-tk, .ql-call, .ql-undo, .ql-tap, .ql-tb { transition: none; animation: none; }
}