/* Phone-only bottom dock; classic-desktop.css owns all desktop placement. */
.desktop-client.touch-client #chat-box.chat-box {
 position: fixed; top: auto !important; right: auto !important;
 left: 50% !important; bottom: 0 !important;
 transform: translateX(-50%); transform-origin: center bottom;
}
.desktop-client.touch-client #chat-box .chat-header { cursor: default; padding-left: 25px; }
.desktop-client.touch-client .rail-native-icon .native-title-emblem {
 display: block; width: 28px; height: 28px; object-fit: contain;
}
.desktop-client.touch-client .action-icon .native-action-icon { flex: none; }

/* Original skill sprites sit within one round aperture, beneath the complete
   native bezel. Keep the artwork centred independently of its name/count. */
/* Mirrored outer sockets follow the same arc around the attack button. */
.desktop-client.touch-client .actionbar button.action[data-slot="1"] { left: 51px; top: 173px; }
.desktop-client.touch-client .actionbar button.action[data-slot="6"] { left: 69px; top: 106px; }
.desktop-client.touch-client .actionbar button.action[data-slot="7"] { left: 133px; top: 76px; }
.desktop-client.touch-client .actionbar button.action[data-slot="8"] { left: 197px; top: 106px; }
.desktop-client.touch-client .actionbar button.action[data-slot="9"] { left: 215px; top: 173px; }
.desktop-client.touch-client .actionbar button.action:has(.native-skill-icon, .native-skill-book-fallback) {
 --skill-face: 40px; --skill-art-scale: 1.290323;
 -webkit-tap-highlight-color: transparent;
}
.desktop-client.touch-client .actionbar button.action:is([data-slot="2"], [data-slot="3"], [data-slot="4"], [data-slot="5"]):has(.native-skill-icon, .native-skill-book-fallback) {
 --skill-face: 30px; --skill-art-scale: .967742;
}
.desktop-client.touch-client .actionbar button.action:has(.native-skill-icon, .native-skill-book-fallback)::before {
 z-index: 2;
}
.desktop-client.touch-client .actionbar button.action .action-icon:has(.native-skill-icon, .native-skill-book-fallback) {
 position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
 display: grid; place-items: center; width: var(--skill-face); height: var(--skill-face);
 min-width: 0; max-width: none; max-height: none; margin: 0; padding: 0;
 border-radius: 50%; overflow: hidden; clip-path: none;
 background: radial-gradient(circle at 40% 30%, #35433a, #101917 78%);
 box-shadow: 0 0 0 1px #171810, inset 0 1px 3px #000b;
 isolation: isolate;
}
.desktop-client.touch-client .actionbar button.action .action-icon:has(.native-skill-icon, .native-skill-book-fallback)::after {
 content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
 background: linear-gradient(155deg, #e9dfac20, transparent 42%, #03080655);
 box-shadow: inset 0 1px 2px #e1d49b40, inset 0 -2px 4px #0009;
}
.desktop-client.touch-client .actionbar button.action .action-icon :is(.native-skill-icon, .native-skill-book-fallback) {
 display: flex; align-items: center; justify-content: center;
 width: 31px; height: 31px; flex: none; padding: 0; margin: 0;
 transform: scale(var(--skill-art-scale));
 border-radius: 0; overflow: hidden; clip-path: none; background: none;
 mask-image: radial-gradient(circle, #000 58%, #000e 72%, transparent 99%);
}
.desktop-client.touch-client .actionbar .native-skill-icon > span { flex: none; image-rendering: auto; }
.desktop-client.touch-client .actionbar .native-skill-book-fallback img { width: 31px; height: 31px; object-fit: contain; }
.desktop-client.touch-client .actionbar button.action:has(.native-skill-icon, .native-skill-book-fallback) b {
 z-index: 3; left: 2px; right: 2px; bottom: 0; padding: 1px 2px;
 border-radius: 8px; background: linear-gradient(90deg, transparent, #101710eb 20%, #101710eb 80%, transparent);
 color: #fff0c9; font-size: 10px; line-height: 12px;
 text-shadow: 0 1px 2px #000, 0 -1px 2px #000;
}
.desktop-client.touch-client .actionbar button.action:has(.native-skill-icon, .native-skill-book-fallback) small:not(:empty) {
 z-index: 4; top: 2px; right: 0; bottom: auto; min-width: 17px; padding: 0 3px;
 border: 1px solid #9b8858; border-radius: 8px; background: #121913ed;
 font-size: 10px; line-height: 15px; font-variant-numeric: tabular-nums;
}
.desktop-client.touch-client .actionbar button.action:has(.native-skill-icon, .native-skill-book-fallback):is(:active, [data-touch-pressed]) {
 filter: brightness(1.2) drop-shadow(0 0 3px #dcc18280); transform: scale(.95);
}
.desktop-client.touch-client .actionbar button.action:has(.native-skill-icon, .native-skill-book-fallback):is(:active, [data-touch-pressed]) .action-icon {
 box-shadow: inset 0 2px 6px #000e, 0 0 0 1px #e5cd87;
}
.desktop-client.touch-client .actionbar img[src$="native-return-portal.png"] {
 border-radius: 50%; clip-path: circle(50% at 50% 50%); image-rendering: auto;
}
/* Clear the independent 44px expression control beneath Recall. */
body.desktop-client.touch-client .actionbar .skill-page-toggle{left:252px;top:52px}

/* Reserve a full-size expression control between Recall and the skill arc. */
body.desktop-client.touch-client .actionbar button.action:is([data-slot="2"],[data-slot="3"],[data-slot="4"],[data-slot="5"]){top:-15px}
body.desktop-client.touch-client .actionbar button.action[data-slot="7"]{left:125px}