/* The interactive ClickGUI. Every length here is a GuiLayout reference pixel (the 1110 x 640 panel
   of the client's 1920 x 1080 design canvas); gui.js scales the whole panel to the width it has.
   Colours are the --vars gui.js computes from AshTheme's arithmetic, per theme. Every duration is
   multiplied by --m, which ClickGui > Reduced Motion sets to 0.2, as it does in game.
   tools/clickgui-spec.md has the client's numbers with their source lines. */

.ag-stage { position: relative; width: 100%; aspect-ratio: 1110 / 640; }
.ag-scale { position: absolute; left: 0; top: 0; width: 1110px; height: 640px; transform-origin: 0 0; }
.ag {
  --m: 1;
  position: absolute; inset: 0; overflow: hidden; border-radius: 12px;
  background: var(--panel); box-shadow: inset 0 0 0 2px var(--panel-border);
  color: #E7E8E9; font-family: "Roboto", system-ui, sans-serif; font-size: 13px; line-height: 1.2;
  display: flex; user-select: none; -webkit-user-select: none; text-align: left;
  --text-bright: #ECEEEF; --text: #E7E8E9; --text-label: #C1C4C6; --text-idle: #7D8288;
  --text-hover: #D5D7D8; --text-muted: #7A7F85; --text-faint: #5A5F65;
  --glider: rgba(255,255,255,.065); --hover-wash: rgba(255,255,255,.035);
  --standard: cubic-bezier(.18,.88,.2,1); --soft: cubic-bezier(.2,.82,.2,1); --thumb: cubic-bezier(.18,.9,.22,1);
}
.ag * { box-sizing: border-box; }
/* :where() keeps the reset at zero specificity, so every component class below wins over it. */
:where(.ag) :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
/* Keyboard focus shows on buttons. Text boxes show focus through their own border and get no
   outline on top of it: the two together were the doubled ring on the search box. */
.ag button:focus-visible { outline: 1px solid var(--field-border-active); outline-offset: 1px; }
.ag input { outline: 0; }
/* Held for one frame while a theme is applied, so nothing fades across from the old colours. */
.ag.instant, .ag.instant * { transition: none !important; }

/* ── rail ── */
.ag-rail {
  position: relative; flex: none; width: 208px; height: 100%; padding: 17px 13px 13px;
  background: var(--rail); display: flex; flex-direction: column;
  box-shadow: inset -1px 0 0 var(--rail-divider);
}
.ag-brand { height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 9px; flex: none; }
.ag-logo { width: 31px; height: 31px; }
.ag-word { font-size: 14px; font-weight: 700; letter-spacing: 0.14em; color: #F0F1F1; }
.ag-rule { height: 2px; border-radius: 1px; background: var(--rail-divider); flex: none; }
/* The list runs the rail's full width so the indicator, 6 px left of the rows, is not clipped, and
   it scrolls: with SkyBlock open it is 31 px taller than its band (CR:77-85). */
.ag-cats {
  position: relative; flex: 1; min-height: 0; margin: 8px -13px 0; padding: 0 13px;
  overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
}
.ag-cats::-webkit-scrollbar { display: none; }
.ag-cats.fade-bottom { -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), transparent); mask-image: linear-gradient(#000 calc(100% - 18px), transparent); }
.ag-cats.fade-top { -webkit-mask-image: linear-gradient(transparent, #000 18px); mask-image: linear-gradient(transparent, #000 18px); }
.ag-cats.fade-top.fade-bottom {
  -webkit-mask-image: linear-gradient(transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.ag-cat, .ag-sub {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 100%;
  color: var(--text-idle); transition: color calc(.15s * var(--m)), background-color calc(.15s * var(--m));
}
.ag-cat { height: 38px; margin-bottom: 2px; padding: 0 12px; border-radius: 7px; font-size: 12px; }
.ag-cat > span { transition: transform calc(.2s * var(--m)) var(--standard); }
.ag-cats > .ag-cat:not(.on):hover > span { transform: translateX(2px); }
.ag-cat:not(.on):not(.lit):hover, .ag-sub:not(.on):hover { color: var(--text-hover); background: var(--hover-wash); }
.ag-cat.on, .ag-sub.on, .ag-cat.lit { color: var(--text-bright); }
.ag-cat.locked { opacity: .35; cursor: default; pointer-events: none; }
.ag-cat.lit, .ag-sub.on { background: var(--glider); }
.ag-cat .ag-chev { color: var(--text-idle); }
.ag-cat.on .ag-chev { color: var(--text-hover); }
/* The travelling surface under the current category, with its indicator bar riding on it. */
.ag-glider {
  position: absolute; left: 13px; right: 13px; top: 0; height: 38px; border-radius: 7px; z-index: 0;
  background: var(--glider); pointer-events: none;
  transition: transform calc(.4s * var(--m)) var(--standard), opacity calc(.2s * var(--m)) var(--standard);
}
.ag-glider.out { opacity: 0; }
.ag-glider::before, .ag-cat.lit::before, .ag-sub.on::before {
  content: ""; position: absolute; width: 2px; border-radius: 1px; background: var(--accent); pointer-events: none;
}
.ag-glider::before, .ag-cat.lit::before { left: -6px; top: 10px; height: 18px; }
/* A SkyBlock section keeps its own bar, 5 px left of the row and 5 px right of the guide line,
   while SkyBlock keeps the glider and its bar (CR:242-245). */
.ag-sub.on::before { left: -5px; top: 7px; height: 17px; }
.ag.no-indicator .ag-glider::before, .ag.no-indicator .ag-cat.lit::before, .ag.no-indicator .ag-sub.on::before { display: none; }
/* The SkyBlock fold: the band opens to 130 px over 340 ms and its rows slide down out from under
   SkyBlock as it does (CR:137-148). */
.ag-subs { position: relative; height: 0; overflow: hidden; transition: height calc(.34s * var(--m)) var(--standard); }
.ag-subs.open { height: 130px; }
.ag-subs::before { content: ""; position: absolute; left: 13px; top: 2px; width: 1px; height: calc(100% - 5px); background: var(--hairline); }
.ag-sublist {
  padding: 3px 0 3px 23px; opacity: 0; transform: translateY(-65px);
  transition: transform calc(.34s * var(--m)) var(--standard), opacity calc(.34s * var(--m)) var(--standard);
}
.ag-subs.open .ag-sublist { opacity: 1; transform: none; }
.ag-sub { height: 31px; padding: 0 10px; border-radius: 6px; font-size: 11px; }
.ag-foot { flex: none; display: flex; flex-direction: column; gap: 11px; }

.ag-chev {
  flex: none; width: 5px; height: 5px; border: solid currentColor; border-width: 0 1.2px 1.2px 0;
  transform: translateX(-1px) rotate(-45deg); transition: transform calc(.28s * var(--m)) var(--standard);
}
.ag-chev.down, .ag-cat.on .ag-chev { transform: translateY(-1.5px) rotate(45deg); }
.ag-chev.up, .ag-select.open .ag-chev { transform: translateY(1.5px) rotate(-135deg); }

/* ── work area ── */
.ag-work {
  position: relative; flex: 1; min-width: 0; height: 100%;
  background: linear-gradient(135deg, var(--work-top), var(--work-bottom) 70%);
}
.ag-head { position: absolute; left: 29px; right: 29px; top: 27px; height: 68px; transition: right calc(.46s * var(--m)) var(--standard); }
.ag-heading { max-width: calc(100% - 250px); }
.ag-heading.enter { animation: ag-head calc(.57s * var(--m)) var(--soft) backwards; }
@keyframes ag-head { from { opacity: 0; transform: translateX(11px); } }
.ag-kicker { font-size: 10px; line-height: 12px; letter-spacing: 0.14em; color: var(--text-muted); text-transform: uppercase; }
.ag-title { margin-top: 7px; font-size: 24px; line-height: 28px; font-weight: 700; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The search box (SF:105-164): 1 px border that blends toward the accent, 0.45 of the way when
   hovered and all the way when focused; a thin magnifier; a cross to clear once there is text. */
.ag-search {
  position: absolute; right: 0; top: 17px; width: 236px; height: 32px; border-radius: 6px; cursor: text;
  background: var(--field); box-shadow: inset 0 0 0 1px var(--field-border); color: var(--text-muted);
  transition: width calc(.46s * var(--m)) var(--standard), box-shadow calc(.2s * var(--m)) var(--standard),
    background-color calc(.2s * var(--m)) var(--standard), color calc(.2s * var(--m)) var(--standard);
}
.ag.drawer-open .ag-search { width: 224.3px; }
.ag-search:hover { background: var(--field-hover); box-shadow: inset 0 0 0 1px var(--field-glow); }
.ag-search:focus-within { background: var(--field-hover); box-shadow: inset 0 0 0 1px var(--accent); color: var(--text-label); }
.ag-glass { position: absolute; left: 0; top: 0; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; pointer-events: none; }
.ag-search input {
  position: absolute; left: 27.25px; right: 10px; top: 0; height: 100%; border: 0; background: none; padding: 0; margin: 0;
  font: 11px "Roboto", system-ui, sans-serif; color: var(--text-bright); caret-color: var(--text-bright);
}
.ag-search.has-text input { right: 24px; }
.ag-search input::placeholder { color: var(--text-faint); opacity: 1; }
.ag-clear { position: absolute; right: 0; top: 0; width: 22px; height: 32px; display: none; color: var(--text-muted); }
.ag-search.has-text .ag-clear { display: block; }
.ag-clear:hover { color: var(--text-bright); }
.ag-clear svg { display: block; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }

/* The grid's clip reaches 4 px past the cards on each side and 6 px above them, so a hovered
   card's lift and shadow are not cut off (MG:284-287). */
.ag-body { position: absolute; left: 29px; right: 29px; top: 95px; bottom: 30px; transition: right calc(.46s * var(--m)) var(--standard); }
.ag-scroll { position: absolute; top: -6px; bottom: 0; left: -4px; right: -4px; padding: 6px 4px 0; overflow-y: auto; scrollbar-width: none; }
.ag-scroll::-webkit-scrollbar { display: none; }
.ag-thumb {
  position: absolute; right: -14px; top: 0; width: 3px; border-radius: 2px; background: var(--accent-30);
  opacity: 0; transition: opacity calc(.2s * var(--m)); pointer-events: none;
}
.ag.drawer-open .ag-head, .ag.drawer-open .ag-body { right: 339px; }

/* The entry: cards rise 10 px into place one after another, the seventh and later together. */
.ag-content.enter .ag-card, .ag-content.enter .ag-theme {
  animation: ag-rise calc(.36s * var(--m)) var(--soft) backwards;
  animation-delay: calc(var(--i, 0) * 14.5ms * var(--m));
}
.ag-content.enter .ag-empty { animation: ag-fade calc(.36s * var(--m)) var(--soft) backwards; }
@keyframes ag-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes ag-fade { from { opacity: 0; } }

.ag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ag-card {
  position: relative; height: 62px; padding: 0 18px; border-radius: 8px; display: flex; align-items: center;
  justify-content: space-between; gap: 13px; cursor: pointer;
  background: var(--row); box-shadow: inset 0 0 0 1px var(--row-border);
  transition: background-color calc(.22s * var(--m)) var(--standard), box-shadow calc(.22s * var(--m)) var(--standard),
    transform calc(.22s * var(--m)) var(--standard);
}
.ag-card:hover { background: var(--row-hover); box-shadow: inset 0 0 0 1px var(--row-border-hover), 0 3.5px 5px rgba(0,0,0,.35); transform: translateY(-2px); }
.ag-card.active { background: var(--row-active); box-shadow: inset 0 0 0 1px var(--row-border-active); }
.ag-name { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-card.on .ag-name { color: var(--text-bright); }
.ag-empty { margin-top: 4px; font-size: 11px; color: var(--text-faint); }

.ag-switch {
  position: relative; flex: none; width: 38px; height: 22px; border-radius: 11px;
  background: var(--track); box-shadow: inset 0 0 0 1px var(--track-border);
  transition: background-color calc(.22s * var(--m)) var(--thumb), box-shadow calc(.22s * var(--m)) var(--thumb);
}
.ag-switch i {
  position: absolute; left: 3px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--knob);
  transition: transform calc(.22s * var(--m)) var(--thumb), background-color calc(.22s * var(--m)) var(--thumb);
}
.ag-switch.on { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ag-switch.on i { transform: translateX(18px); background: var(--on-accent); }

/* ── Settings page: the theme cards ── */
.ag-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 11px; }
.ag-theme {
  height: 127px; padding: 15px; border-radius: 9px; display: flex; flex-direction: column;
  background: var(--row); box-shadow: inset 0 0 0 1px var(--row-border);
  transition: box-shadow calc(.15s * var(--m)), background-color calc(.15s * var(--m));
}
.ag-theme:hover { background: var(--row-hover); box-shadow: inset 0 0 0 1px var(--row-border-hover); }
.ag-theme.on { box-shadow: inset 0 0 0 2px var(--row-border-active); }
.ag-swatch { display: flex; height: 47px; border-radius: 6px; overflow: hidden; flex: none; }
.ag-swatch i { flex: 1; }
.ag-theme-name { margin-top: 13px; font-size: 12px; font-weight: 700; color: var(--text); }
.ag-theme-note { margin-top: 4px; font-size: 11px; color: var(--text-muted); }

/* ── the settings drawer: header and description fixed, the rows scroll (SD) ── */
.ag-drawer {
  position: absolute; right: 0; top: 0; bottom: 0; width: 310px; padding: 27px 24px; display: flex; flex-direction: column;
  background: var(--drawer); box-shadow: inset 1px 0 0 var(--drawer-border), -6px 0 24px rgba(0,0,0,.3);
  transform: translateX(100%); opacity: 0; pointer-events: none;
  transition: transform calc(.46s * var(--m)) var(--standard), opacity calc(.2s * var(--m)) var(--standard);
}
.ag.drawer-open .ag-drawer { transform: none; opacity: 1; pointer-events: auto; }
.ag-dhead { position: relative; flex: none; min-height: 32px; padding-right: 128px; }
.ag-dtitle { margin-top: 7px; font-size: 18px; line-height: 22px; font-weight: 700; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-dbtns { position: absolute; right: 0; top: 0; display: flex; gap: 6px; }
.ag-btn {
  flex: none; height: 32px; min-width: 52px; padding: 0 10px; border-radius: 6px; font-size: 11px; text-align: center;
  color: var(--text-faint); background: var(--field); box-shadow: inset 0 0 0 1px var(--field-border); cursor: default;
  transition: background-color calc(.15s * var(--m)), box-shadow calc(.15s * var(--m)), color calc(.15s * var(--m));
}
.ag-btn.armed { color: var(--text-muted); cursor: pointer; }
.ag-btn.armed:hover { background: var(--field-hover); box-shadow: inset 0 0 0 1px var(--field-border-active); color: var(--text-bright); }
.ag-action .ag-btn { min-width: 64px; padding: 0 9px; color: var(--text-label); }
.ag-btn.pressed { animation: ag-press calc(.45s * var(--m)) var(--soft); }
@keyframes ag-press { from { background: var(--accent); color: var(--on-accent); } }
.ag-ddesc {
  flex: none; min-height: 44px; margin: 14px 0 23px; font-size: 11px; line-height: 16.5px; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.ag-dbody { position: relative; flex: 1; min-height: 0; }
.ag-dscroll { position: absolute; top: 0; bottom: 0; left: -6px; right: -6px; padding: 0 6px; overflow-y: auto; scrollbar-width: none; }
.ag-dscroll::-webkit-scrollbar { display: none; }
.ag-dbody > .ag-thumb { right: -12px; }
.ag-drows { display: flex; flex-direction: column; }
.ag-row { position: relative; padding: 15px 0; border-top: 1px solid var(--hairline); }
.ag-row:first-child { border-top: 0; padding-top: 4px; }
.ag-row.child { padding-left: 10px; }
.ag-boolean { cursor: pointer; }
.ag-number { cursor: pointer; touch-action: none; }
.ag-line { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; }
.ag-label { flex: 1; min-width: 0; font-size: 11px; color: var(--text-label); }
.ag-value { flex: none; font-size: 11px; color: var(--text-muted); }
/* Changed from its default: a 3.2 px dot in the accent, just left of the label (SD:422-443). */
.ag-row.changed > .ag-line::before {
  content: ""; position: absolute; left: -5.1px; top: 50%; width: 3.2px; height: 3.2px; margin-top: -1.6px;
  border-radius: 50%; background: var(--accent-75);
}
.ag-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 8px; }
.ag-header.folds { cursor: pointer; }
.ag-caption { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.ag-header.open .ag-caption { color: var(--text-label); }
.ag-header .ag-chev { color: var(--text-muted); margin-right: 6px; }
.ag-disclose { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--text-muted); }
.ag-disclose:hover { color: var(--text-label); background: var(--hover-wash); }

.ag-field {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 35px; margin-top: 12px;
  padding: 0 10px; border-radius: 6px; border: 0; font-family: inherit; font-size: 11px; color: var(--text-label);
  background: var(--field); box-shadow: inset 0 0 0 1px var(--field-border);
  transition: box-shadow calc(.15s * var(--m)), background-color calc(.15s * var(--m));
}
.ag-field:hover, .ag-field:focus, .ag-select.open { background: var(--field-hover); box-shadow: inset 0 0 0 1px var(--field-border-active); }
.ag-select > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-select .ag-chev { width: 6px; height: 6px; margin-right: 5px; color: var(--text-label); }
.ag-text { cursor: text; user-select: text; -webkit-user-select: text; }
.ag-text::placeholder { color: var(--text-faint); opacity: 1; }
.ag-chip {
  flex: none; height: 32px; min-width: 58px; padding: 0 9px; border-radius: 6px; font-size: 11px; text-align: center;
  color: var(--text-label); background: var(--field); box-shadow: inset 0 0 0 1px var(--field-border);
  transition: box-shadow calc(.15s * var(--m)), background-color calc(.15s * var(--m)), color calc(.15s * var(--m));
}
.ag-chip:hover { background: var(--field-hover); box-shadow: inset 0 0 0 1px var(--field-border-active); }
.ag-chip.unbound { color: var(--text-faint); }
.ag-chip.listening { background: var(--field-hover); box-shadow: inset 0 0 0 1px var(--accent); color: var(--text-label); }
.ag-slider { position: relative; height: 5px; margin: 13px 0 3px; border-radius: 2.5px; background: var(--track); }
.ag-fill { position: absolute; left: 0; top: 0; bottom: 0; min-width: 5px; border-radius: 2.5px; background: var(--accent); }
.ag-knob { position: absolute; top: 50%; width: 10.5px; height: 10.5px; margin: -5.25px 0 0 -5.25px; border-radius: 50%; background: var(--text-bright); }
.ag-colour {
  position: relative; flex: none; width: 46px; height: 20px; border-radius: 4px; overflow: hidden; cursor: pointer;
  background: linear-gradient(var(--c), var(--c)), conic-gradient(#3A3D4A 25%, #272935 0 50%, #3A3D4A 0 75%, #272935 0) 0 0 / 8px 8px;
  box-shadow: inset 0 0 0 1px var(--field-border);
}
.ag-colour input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.ag-pair { display: flex; }
.ag-pair .ag-colour { width: 32px; }
.ag-pair .ag-colour:first-child { border-radius: 4px 0 0 4px; }
.ag-pair .ag-colour:last-child { border-radius: 0 4px 4px 0; }

/* ── the list (Selector): 34 px rows, eight at most, opening 7 px toward its place (SEL) ── */
.ag-menu {
  position: absolute; z-index: 20; width: max-content; max-width: 302px; max-height: 282px; padding: 5px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--menu-border) transparent;
  border-radius: 8px; background: var(--menu); box-shadow: inset 0 0 0 1px var(--menu-border), 0 8px 26px rgba(0,0,0,.45);
  animation: ag-drop calc(.32s * var(--m)) var(--standard) backwards;
}
.ag-menu.above { animation-name: ag-drop-up; }
@keyframes ag-drop { from { opacity: 0; transform: translateY(-7px); } }
@keyframes ag-drop-up { from { opacity: 0; transform: translateY(7px); } }
.ag-option {
  position: relative; display: block; width: 100%; height: 34px; padding: 0 36px 0 9px; border-radius: 6px;
  font-size: 11px; color: var(--text-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ag-option > span { display: inline-block; animation: ag-opt calc(.32s * var(--m)) var(--standard) backwards; animation-delay: calc(var(--k, 0) * 6ms * var(--m)); }
@keyframes ag-opt { from { opacity: 0; transform: translateX(-8px); } }
.ag-option.hi { background: var(--menu-row-hover); color: var(--text); }
.ag-option.on { background: var(--menu-row-selected); color: var(--text-bright); }
.ag-option.on::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 4px; height: 8px; margin-top: -5.5px;
  border: solid var(--text-bright); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}

/* ── the tooltip: 70 ms rest, 165 ms in and 110 ms out on SOFT, rising 5 and growing from 0.965,
   four lines at most (TT) ── */
.ag-tip {
  position: absolute; z-index: 30; max-width: 264px; padding: 9px 12px; border-radius: 7px; pointer-events: none;
  font-size: 11px; line-height: 1.5; color: var(--text);
  background: var(--menu); box-shadow: inset 0 0 0 1px var(--menu-border), 0 8px 18px rgba(0,0,0,.45);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  opacity: 0; transform: translateY(5px) scale(.965);
  transition: opacity calc(.11s * var(--m)) var(--soft), transform calc(.11s * var(--m)) var(--soft);
}
.ag-tip.on { opacity: 1; transform: none; transition-duration: calc(.165s * var(--m)); }

/* ── the theme wipe: the old theme's copy over the live panel, cut away from the left ── */
.ag-ghost { pointer-events: none; z-index: 4; }
.ag-ghost, .ag-ghost * { animation: none !important; transition: none !important; }
.ag-edge {
  position: absolute; top: 0; left: 0; width: 46px; height: 100%; pointer-events: none; z-index: 5;
  background: linear-gradient(90deg, var(--accent-0), var(--accent-16));
}
.ag-edge::after { content: ""; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background: var(--accent-28); }

@media (prefers-reduced-motion: reduce) {
  .ag, .ag * { transition: none !important; animation: none !important; }
}