/* Bilal dialogs use the same unmodified textures as the native OTClient panels. */
#menu-shade{padding:8px;background:#0003}
#menu-shade .menu-shell{position:relative;width:min(680px,100%);height:min(560px,100%);min-height:0;overflow:visible;display:flex;flex-direction:column;border:6px solid transparent;border-top-width:27px;border-image:url(native/window.png) 27 6 6 6 fill stretch;border-radius:0;background:#404040;box-shadow:0 2px 8px #0008;font:12px Verdana,Arial,sans-serif;color:#dfdfdf;text-shadow:0 1px #222}
#menu-shade .menu-top{position:absolute;top:-25px;left:0;right:0;height:20px;min-height:0;display:flex;justify-content:center;align-items:center;padding:0;background:none;border:0}
#menu-shade .menu-logo{font:700 12px Verdana,Arial,sans-serif;letter-spacing:0;color:#dfdfdf}
#menu-shade .who{display:none}
#menu-shade .close-menu{position:absolute;right:0;top:0;width:20px;height:20px;min-height:0;font:16px Arial;padding:0;border:1px solid #777;border-radius:0;background:#414141;color:#ddd;box-shadow:inset 1px 1px #888,inset -1px -1px #191919}
#menu-shade .menu-home{position:absolute;left:1px;top:0;min-height:20px;height:20px;padding:0 6px;font-size:10px}
#menu-shade [hidden]{display:none!important}
#menu-shade button,#menu-shade summary{font-family:Verdana,Arial,sans-serif;border-radius:0;color:#dfdfdf;text-shadow:0 1px #222}
#menu-shade button:not(.catalog-row):not(.close-menu),#menu-shade summary{border:1px solid #222;border-top-color:#868686;border-left-color:#868686;background:#484848 url(native/button-grey-up.png) center/100% 100%;box-shadow:none;min-height:28px;font-size:11px;font-weight:400;padding:4px 10px;cursor:pointer}
#menu-shade button:not(.catalog-row):hover{filter:brightness(1.12)}
#menu-shade button:not(.catalog-row):active{background-image:url(native/button-grey-down.png);border-color:#222 #888 #888 #222}
#menu-shade button:focus-visible,#menu-shade summary:focus-visible,#menu-shade input:focus-visible,#menu-shade select:focus-visible,#menu-shade textarea:focus-visible{outline:1px solid #eee;outline-offset:1px}
#menu-shade .menu-tabs{flex:none;background:none;border:0;border-bottom:1px solid #222;margin:0 6px;padding:4px 0;gap:3px;overflow:auto}
#menu-shade .menu-tab{min-width:0;flex:1;font-size:11px;gap:4px}
#menu-shade .menu-tab svg{display:none}
#menu-shade .menu-tab.active,#menu-shade .editor-tabs .selected{background:#606060;border-color:#aaa #222 #222 #aaa;color:white}
#menu-shade .menu-body{flex:1;min-height:0;padding:10px;overflow:auto;scrollbar-color:#727272 #333}
#menu-shade .menu-body h2{font:700 13px Verdana,Arial,sans-serif;color:#ddd;margin:0 0 12px}
#menu-shade .lead,#menu-shade .field,#menu-shade .section-label,#menu-shade small{color:#c5c5c5;font-weight:400}
#menu-shade input:not([type=checkbox]):not([type=range]),#menu-shade select,#menu-shade textarea{font:12px Verdana,Arial,sans-serif;color:#eee;background:#343434;border:1px solid #222;border-right-color:#858585;border-bottom-color:#858585;border-radius:0;padding:5px;min-height:28px;box-shadow:none}
#menu-shade input::placeholder,#menu-shade textarea::placeholder{color:#aaa}
#menu-shade .assistant-card,#menu-shade .notice,#menu-shade .feature-tile,#menu-shade .stat-card{background:#434343;border:1px solid #777;border-radius:0;color:#ddd;box-shadow:none}
#menu-shade .feature-tile small,#menu-shade .switch,#menu-shade .price,#menu-shade .field{color:#ddd}
#menu-shade .choice{background:#444;border-color:#777;border-radius:0;box-shadow:none}
#menu-shade .choice.selected{background:#626262;border-color:#ddd}
#menu-shade .simple-editor{width:min(540px,100%);height:min(500px,100%)}
#menu-shade .simple-editor .menu-body{overflow:hidden;padding:8px}
#menu-shade .simple-hotkeys{height:100%;max-width:none;min-height:0;display:flex;flex-direction:column;gap:7px;color:#ddd;font-size:12px}
#menu-shade .editor-controls{display:flex;gap:14px;flex:none;align-items:center}
#menu-shade .editor-controls label{display:flex;align-items:center;gap:6px;min-width:0}
#menu-shade .editor-controls label:first-child{flex:1.2}
#menu-shade .editor-controls label:last-child{flex:1}
#menu-shade .editor-controls select,#menu-shade .editor-controls input{width:100%;min-width:0}
#menu-shade .editor-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;background:none;border:0;border-bottom:1px solid #888;gap:2px;flex:none}
#menu-shade .editor-tabs button{min-height:28px;padding:4px}
#menu-shade .editor-search{margin:0;gap:8px;display:flex;align-items:center;flex:none;flex-wrap:nowrap}
#menu-shade .editor-search input:not([type=checkbox]){width:100%;min-width:0}
#menu-shade .editor-search label{display:flex;align-items:center;gap:3px;font-size:10px;white-space:nowrap;width:auto}
#menu-shade .editor-list{flex:1;min-height:50px;height:auto;overflow:auto;padding:2px;background:#424242;border:1px solid #222;border-right-color:#858585;border-bottom-color:#858585;scrollbar-color:#737373 #303030}
#menu-shade .catalog-row{display:flex;align-items:center;gap:8px;min-height:38px;padding:3px 6px;border:1px solid transparent;border-radius:0;background:none;color:#ddd;font-size:11px;text-align:left}
#menu-shade .catalog-row:hover{background:#ffffff13}
#menu-shade .catalog-row.selected{background:#666;border-color:#999}
#menu-shade .catalog-row strong{font-size:11px;font-weight:400}
#menu-shade .catalog-row small{font-size:10px;margin-top:2px;color:#bbb}
#menu-shade .catalog-row .item-icon,#menu-shade .catalog-row .spell-icon{transform:scale(.85)}
#menu-shade .action-icon{background:#393939;border-color:#777;border-radius:0;color:#ddd}
#menu-shade .editor-list h3{font-size:10px;color:#bbb;margin:7px 6px 4px}
#menu-shade .row-help{background:none;color:#bbb;border:1px solid #777;font-size:10px;width:16px;height:16px;flex-basis:16px;padding:0}
#menu-shade .selection-details{flex:none;display:flex;align-items:center;gap:7px;min-height:28px;margin:0;font-size:11px}
#menu-shade .selection-details strong{font-size:11px;font-weight:400}
#menu-shade .selection-details select{flex:1;min-width:0}
#menu-shade .selection-details input{flex:1;min-width:0}
#menu-shade .selection-details textarea{flex-basis:100%;height:62px;min-height:48px;resize:none}
#menu-shade .selection-details:has(#slot-text){flex-wrap:wrap;gap:6px}
#menu-shade .simple-hotkeys:has(#slot-text) .editor-list{display:none}
#menu-shade .simple-hotkeys:has(#slot-text) .selection-details{flex:1;align-content:start;overflow:auto}
#menu-shade .simple-hotkeys:has(#slot-text) textarea{height:100px}
#menu-shade .editor-footer{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #777;margin:0;padding-top:7px;min-height:37px}
#menu-shade .accept-actions{display:flex;gap:6px;margin-left:auto}
#menu-shade .accept-actions button{min-width:80px}
#menu-shade #save-slot{outline:1px solid #aaa;outline-offset:-3px;font-weight:700}
#menu-shade .editor-more{position:relative;margin:0}
#menu-shade .editor-more summary{list-style:none;min-width:50px;text-align:center}
#menu-shade .editor-more summary::-webkit-details-marker{display:none}
#menu-shade .editor-more>div{position:absolute;bottom:34px;left:0;z-index:3;display:flex;flex-direction:column;gap:3px;padding:4px;width:140px;background:#444;border:1px solid #888;box-shadow:0 3px 8px #0008}
#menu-shade .editor-more button{text-align:left}
@media(pointer:coarse){#menu-shade button:not(.catalog-row):not(.close-menu),#menu-shade summary{min-height:32px}#menu-shade .catalog-row{min-height:42px}#menu-shade .editor-tabs button{min-height:32px}}
@media(max-height:500px){#menu-shade .simple-hotkeys{gap:4px}#menu-shade .simple-editor .menu-body{padding:5px 8px}#menu-shade .editor-footer{padding-top:4px;min-height:34px}#menu-shade .catalog-row{min-height:32px}}
@media(max-width:420px){#menu-shade .editor-controls{gap:8px}#menu-shade .editor-controls label{font-size:11px;gap:4px}#menu-shade .editor-controls select{font-size:11px}#menu-shade .selection-details{font-size:10px}}

#menu-shade button.menu-home{height:20px;min-height:20px;padding:0 6px;font-size:10px}
/* Bilal 1.6: compact categories and a standalone NPC trade window. */
#menu-shade .compact-menu{width:min(430px,100%);height:auto;max-height:min(560px,100%)}
#menu-shade .compact-menu .menu-body{padding:10px;max-height:calc(100dvh - 65px);overflow:auto}
#menu-shade .compact-intro{margin:0 0 10px;padding:9px;border:1px solid #242424;border-bottom-color:#888;background:#303030aa;font-size:12px;line-height:1.5;color:#ddd}
#menu-shade .compact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#menu-shade .compact-grid button.feature-tile{display:block;min-height:37px;padding:8px 6px;text-align:center;border-radius:3px;background:linear-gradient(#393939,#171717);border:1px solid #121212;box-shadow:inset 0 1px #ffffff24;color:#dec37a}
#menu-shade .compact-grid .feature-tile strong{font:700 11px Verdana,Arial,sans-serif}
#menu-shade .compact-grid .feature-tile small{display:none}
#menu-shade .compact-grid button.feature-tile:hover{border-color:#c3ab68;filter:none;background:linear-gradient(#464646,#242424)}
#menu-shade .compact-adjust{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;padding:9px;margin-bottom:3px;background:#3339;border:1px solid #222}
#menu-shade .compact-adjust label{display:flex;align-items:center;gap:6px}
#menu-shade .compact-adjust input[type=range]{flex:1;min-width:40px}
#menu-shade .npc-shop{width:min(390px,100%);height:min(440px,100%)}
#menu-shade .npc-shop .menu-body{overflow:hidden;height:100%;padding:8px}
#menu-shade .compact-trade{height:100%;display:flex;flex-direction:column;min-height:0;gap:8px}
#menu-shade .trade-tabs{display:flex;gap:5px;flex:none}
#menu-shade .trade-tabs button:not(.unused){flex:1;background:linear-gradient(#353535,#181818);color:#ddd;border-radius:3px}
#menu-shade .trade-tabs .selected{color:#ecd17b;border-color:#b39a50}
#menu-shade .trade-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-content:start;gap:5px;flex:1;min-height:60px;overflow:auto;padding:7px;background:#333b;border:1px solid #222;box-shadow:inset 0 1px #888;scrollbar-color:#777 #292929}
#menu-shade .trade-grid button.trade-item{height:63px;min-height:63px;padding:3px 0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;background:#353535;border:1px solid #1b1b1b;box-shadow:inset 0 0 0 1px #626262;border-radius:3px}
#menu-shade .trade-item small{font:bold 10px Verdana,Arial,sans-serif;color:#dfca86;white-space:nowrap}
#menu-shade .trade-grid button.trade-item.selected{border-color:#e4bf55;background:#565044;box-shadow:inset 0 0 0 1px #ad965e}
#menu-shade .trade-selection{flex:none;min-height:46px;display:flex;align-items:center;gap:9px;padding:7px;background:#3338;border:1px solid #222;color:#ddd;font-size:11px}
#menu-shade .trade-selection span{min-width:0}
#menu-shade .trade-selection strong,#menu-shade .trade-selection small{display:block;line-height:1.5}
#menu-shade .trade-quantity{flex:none;display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:11px}
#menu-shade .trade-quantity label{display:flex;align-items:center;gap:5px}
#menu-shade .trade-quantity input{width:65px}
#menu-shade .trade-footer{flex:none;display:flex;justify-content:flex-end;gap:7px;border-top:1px solid #777;padding-top:8px}
#menu-shade .trade-footer button:not(.unused){min-width:90px;background:linear-gradient(#383838,#151515);border-radius:3px}
#menu-shade #shop-confirm{color:#efd382;border-color:#ac934c}
#bilal-ui.native-open>.hotkeys{display:flex}
@media(max-height:500px){#menu-shade .npc-shop{height:100%}#menu-shade .compact-trade{gap:5px}#menu-shade .trade-selection{min-height:40px;padding:4px}#menu-shade .trade-grid button.trade-item{height:57px;min-height:57px}#menu-shade .trade-footer{padding-top:4px}}

.service-panel{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0}.service-intro,.service-balance{margin:0;color:#e7d39b;font-size:12px}.service-list{overflow:auto;min-height:100px;max-height:390px;flex:1;border:1px solid #171717;padding:5px;background:#242423}.service-row{display:flex!important;align-items:center;gap:10px;width:100%;padding:9px 8px!important;border:0!important;border-bottom:1px solid #49463b!important;text-align:left!important;background:#33322e!important;color:#e7dfcd!important;min-height:38px}.service-row>span{flex:1}.service-row small{display:block;font-size:10px;color:#c6b997}.service-row b{color:#ffdf62;white-space:nowrap}.service-row b small{display:inline}.service-row.selected{background:#54492f!important;box-shadow:inset 2px 0 #edce64}.service-row:hover{background:#454137!important}.service-row .item-icon{flex:0 0 32px}.service-amount{display:flex;align-items:center;gap:8px;font-size:12px}.service-amount input{width:100px} .npc-shop .menu-body:has(.service-panel){height:460px;max-height:calc(100dvh - 100px)}

/* 1.13: compact NPC dialogue stays within the native trade flow. */
#menu-shade .npc-shop:has(.npc-dialog){width:min(450px,100%);height:auto;max-height:calc(100dvh - 20px)}
#menu-shade .npc-shop:has(.npc-dialog) .menu-body{height:auto;max-height:calc(100dvh - 70px);overflow:auto}
#menu-shade .compact-trade:has(.npc-dialog){height:auto}
#menu-shade .npc-shop .trade-grid{flex:none;max-height:200px;min-height:68px}
#menu-shade .npc-shop .trade-grid button.trade-item{background:linear-gradient(145deg,#244b54,#192d38);border-color:#58777a;border-radius:5px;box-shadow:inset 0 1px #82a29b33}
#menu-shade .npc-shop .trade-grid button.trade-item.selected{background:#3f6159;border-color:#f0cd7d}
#menu-shade .npc-dialog{margin-top:8px;border-radius:6px;padding:10px}
#menu-shade .npc-dialog button:not(.unused){background:linear-gradient(#39616b,#213c47);border:1px solid #a68b56;border-radius:4px;color:#ffe8b1;min-height:32px;padding:5px 9px}
#menu-shade #npc-dialog-log button:not(.unused){display:inline;background:none;border:0;padding:0 2px;min-height:0;font-size:inherit;text-decoration:underline;color:#ffe28e}
#menu-shade .npc-dialog input:not([type=checkbox]){background:#0d2530;border:1px solid #617e83;border-radius:4px}
#menu-shade .npc-dialog form{align-items:stretch}
#menu-shade .npc-shop .service-panel{height:auto}
@media(max-height:500px){#menu-shade .npc-shop .trade-grid{max-height:135px}#menu-shade #npc-dialog-log{max-height:65px}}