/* Compact wooden drawer for cropped Second Life media faces. */
.dock-only{display:none}
body.dock-mode{--dock-brown:#64472f;--dock-edge:#c5a470;--dock-paper:#fff9e5}
.dock-mode .dock-only{display:inline-block}
.dock-mode #panel,.dock-mode #dialog,.dock-mode #welcome{
  position:fixed;inset:auto 0 0!important;margin:0;width:100%!important;
  height:var(--dock-height)!important;min-height:0;max-height:var(--dock-height);
  border-radius:12px 12px 0 0;box-shadow:inset 0 1px #fff8de;overflow:hidden;
}
.dock-mode #panel{padding:0;border-bottom:0}
.dock-mode #panel-header{height:30px;min-height:30px;padding:2px 9px;gap:7px;cursor:default;background:linear-gradient(#795638,#60412c);border-bottom:1px solid #af8658}
.dock-mode #panel-header h1{font-size:14px;line-height:20px}
.dock-mode #panel-header button{font-size:11px;padding:3px 9px;border-radius:7px;min-height:23px;box-shadow:none;white-space:nowrap}
.dock-mode #panel-header .balance{font-size:12px}
.dock-mode #drag-hint,.dock-mode #shrink,.dock-mode #grow,.dock-mode #scale-label,.dock-mode #panel footer{display:none}
.dock-mode .panel-body{flex-direction:column;padding:0 7px 4px;gap:3px;overflow:hidden}
.dock-mode #nav{flex:0 0 29px;display:flex;flex-direction:row;border:0;border-radius:0;background:#ecdfb9;overflow-x:auto;overflow-y:hidden;gap:3px;padding:3px 0;scrollbar-width:none}
.dock-mode #nav button{width:auto;flex:0 0 auto;min-height:22px;line-height:16px;font-size:11px;padding:2px 12px;border-radius:6px;box-shadow:none;background:#f8efcf;border-color:transparent;white-space:nowrap}
.dock-mode #nav button.selected{color:#fffbed;background:#658456;border-color:#567649}
.dock-mode #nav button:hover:not(.selected){background:#e4cda0}
.dock-mode #content,.dock-mode #dialog-content{display:flex;align-items:stretch;gap:7px;overflow-x:auto;overflow-y:hidden;min-height:0;max-height:none;flex:1;padding:1px 2px 5px;scrollbar-width:thin;scrollbar-color:#b08a59 #ede2bd;scroll-behavior:smooth}
.dock-mode #content>h2,.dock-mode #content>.sub{display:none}
.dock-mode .grid,.dock-mode .basic-grid{display:flex;gap:7px;flex:0 0 auto;min-height:0}
.dock-mode .card{flex:0 0 156px;width:156px;max-height:100%;padding:5px 8px;gap:3px;box-shadow:0 1px #b59972;border-radius:9px;border-width:1px;overflow-y:auto;scrollbar-width:thin}
.dock-mode .card.rare{border-top-width:3px}
.dock-mode .card::before,.dock-mode .card::after{font-size:9px;top:2px}
.dock-mode .card canvas{width:auto!important;height:48px!important;max-width:100%;object-fit:contain;flex-shrink:0}
.dock-mode .card h3{font-size:12px;line-height:16px}
.dock-mode .card p{font-size:10px;line-height:14px}
.dock-mode .card .stars{font-size:10px;line-height:12px;letter-spacing:1px}
.dock-mode .card h2{font-size:16px;margin:0}
.dock-mode .card button{font-size:11px;line-height:16px;padding:2px 5px;min-height:22px;box-shadow:none;border-radius:6px}
.dock-mode .card .meter{min-height:3px;height:3px}
.dock-mode .card.empty{min-height:0;justify-content:center}
.dock-mode .plus{font-size:26px;line-height:26px}
.dock-mode .dock-section{flex:0 0 280px;width:280px;max-height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;background:#f5ebce;border:1px solid #d6bd8e;border-radius:8px;padding:6px 10px;font-size:11px}
.dock-mode .dock-section h3{font-size:12px;margin:0 0 4px}
.dock-mode .dock-section p{font-size:11px;line-height:1.6;margin:3px 0 7px}
.dock-mode .dock-section .note,.dock-mode .dock-section .box{padding:0;margin:0;border:0;background:none}
.dock-mode .dock-section button,.dock-mode .dock-section select,.dock-mode .dock-section input:not([type=range]){padding:4px 7px;font-size:11px;min-height:25px;max-width:100%;box-shadow:none;border-radius:6px}
.dock-mode .dock-section label{margin:5px 0}
.dock-mode .dock-section .row{gap:5px;margin:5px 0}
.dock-mode .dock-section .row>*{min-width:60px}
.dock-mode .dock-section .controls{gap:4px}
.dock-mode .dock-group{display:flex;flex-direction:column;gap:3px;flex:0 0 auto;min-height:0}
.dock-mode .dock-group>h3{font-size:11px;margin:0}
.dock-mode .dock-group>.grid,.dock-mode .dock-group>.basic-grid{flex:1;min-height:0}
.dock-mode #dialog{padding:4px 8px;z-index:30}
.dock-mode #dialog[open]{display:flex;flex-direction:column}
.dock-mode #dialog::backdrop{background:transparent}
.dock-mode .dialog-head{flex:0 0 27px;gap:5px;margin:0 0 4px;border-bottom:1px solid #dac49b;padding-bottom:3px}
.dock-mode #dialog-title{font-size:14px;flex:1;margin:0}
.dock-mode .dialog-head button{padding:2px 10px;min-height:23px;font-size:12px;box-shadow:none;border-radius:6px}
.dock-mode #dock-confirm{position:absolute;inset:33px 8px 5px;background:#fff8e4f7;border:1px solid #c8a472;border-radius:8px;padding:7px 12px;display:flex;align-items:center;justify-content:center;gap:16px;overflow:auto}
.dock-mode #dock-confirm p{font-size:12px;line-height:1.6;max-width:600px;margin:0}
.dock-mode #dock-confirm .controls{flex:0 0 180px}
.dock-mode #dock-confirm button{font-size:12px;padding:5px}
.dock-mode #toolbar{width:224px;bottom:3px;right:4px;padding:5px;border-radius:10px;box-shadow:none;max-height:calc(var(--dock-height) - 6px);overflow:auto;scrollbar-width:thin}
.dock-mode .wallet{margin-bottom:4px;font-size:12px}
.dock-mode .wallet button{font-size:11px;padding:2px 8px}
.dock-mode .toolbar-grid{gap:4px}
.dock-mode .toolbar-grid button{font-size:11px;line-height:16px;padding:3px;box-shadow:none;border-radius:7px}
.dock-mode #pasture{width:calc(100% - 234px);max-height:var(--dock-height)}
.dock-mode #toast{bottom:8px;max-width:min(620px,75vw);padding:6px 12px;font-size:11px;max-height:calc(var(--dock-height) - 12px);overflow:hidden}
.dock-mode #food-hint{bottom:calc(var(--dock-height) - 30px);max-width:calc(100% - 240px);padding:4px 8px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-mode #welcome{display:grid;grid-template-columns:minmax(110px,240px) minmax(140px,320px);grid-template-rows:1fr auto 1fr;justify-content:center;gap:3px 22px;padding:8px 18px;background:linear-gradient(100deg,#ecdfb8,#fff8e6);text-align:center}
.dock-mode #brand-logo{grid-column:1;grid-row:1/4;max-height:calc(var(--dock-height) - 16px);width:100%;height:100%;filter:none}
.dock-mode #welcome .eyebrow,.dock-mode #welcome small{display:none}
.dock-mode #welcome #welcome-tagline{grid-column:2;align-self:end;margin:0;font-size:12px}
.dock-mode #welcome #start{grid-column:2;min-width:120px;font-size:15px;margin:0;padding:6px 18px}
.dock-mode #welcome #loading{grid-column:2;margin:0;font-size:10px;min-height:0}
/* In the shallowest crop, use a small portrait beside the text and action. */
.dock-mode.dock-tight .card{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto;align-content:center;align-items:center;column-gap:5px;row-gap:2px;flex-basis:190px;width:190px;text-align:start;padding:4px 6px}
.dock-mode.dock-tight .card canvas{grid-column:1;grid-row:1/6;width:52px!important;height:49px!important;max-width:52px}
.dock-mode.dock-tight .card>:not(canvas){grid-column:2;min-width:0;margin:0}
.dock-mode.dock-tight .card p{font-size:9px;line-height:12px}
.dock-mode.dock-tight .card .stars{font-size:9px;line-height:10px}
.dock-mode.dock-tight .card button{font-size:10px;line-height:14px;min-height:19px;padding:1px 3px}
.dock-mode.dock-tight .card h3{font-size:11px;line-height:14px}
.dock-mode.dock-tight .card .meter{display:none}
.dock-mode.dock-tight .card.rare>p:first-of-type{display:none}
.dock-mode #content::-webkit-scrollbar,.dock-mode #dialog-content::-webkit-scrollbar{height:6px}
.dock-mode #content::-webkit-scrollbar-thumb,.dock-mode #dialog-content::-webkit-scrollbar-thumb{background:#b08a59;border-radius:4px}
.dock-mode .dock-picker{position:absolute;inset:30px 5px 5px;display:flex;gap:8px;align-items:center;padding:9px;background:#fff8e9;z-index:5;border:2px solid #be9b6b;border-radius:9px;box-shadow:0 2px 8px #54331b20;overflow:hidden}
.dock-mode .picker-close{flex:none;font-size:11px;padding:5px 9px;box-shadow:none}
.dock-mode .picker-options{display:flex;gap:7px;min-width:0;overflow-x:auto;overflow-y:hidden;padding:5px 3px;scrollbar-width:thin}
.dock-mode .picker-options button{flex:none;max-width:240px;font-size:12px;padding:7px 12px;box-shadow:none}
.dock-mode.dock-tight .card.empty{grid-template-columns:38px 1fr}
.dock-mode.dock-tight .card.empty .plus,.dock-mode.dock-tight .card>.plus{grid-column:1;grid-row:1/5;justify-self:center}
.dock-mode.dock-tight .dock-group .card canvas{height:36px!important}
@media(max-width:640px){
 .dock-mode #toolbar{width:178px}.dock-mode #pasture{width:calc(100% - 187px)}
 .dock-mode #panel-header{gap:4px;padding-inline:6px}.dock-mode #panel-header h1{font-size:12px}
 .dock-mode #panel-header button{padding-inline:5px}.dock-mode #header-music{max-width:95px;overflow:hidden;text-overflow:ellipsis}
 .dock-mode #food-hint{max-width:calc(100% - 190px)}
 .dock-mode #welcome{grid-template-columns:minmax(90px,160px) minmax(130px,240px);gap:3px 10px}
 .dock-mode #dock-confirm{flex-wrap:wrap;gap:5px}.dock-mode #dock-confirm p{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.dock-mode *{scroll-behavior:auto!important;transition:none!important}}