/* Phone chat finishing layer. Position, width and resize mechanics remain in
   mobile-chat-dock.css and the existing chat controller. */
body.desktop-client.touch-client #chat-box.chat-box{
 border:3px solid transparent;
 border-image:url('/assets/ui/native-detail-frame.png') 7 / 3px / 0 stretch;
 border-radius:0;
 background:linear-gradient(#10150ef2,#10150ef2),url('/assets/ui/native-detail-wood.png');
 box-shadow:0 -2px 8px #0005,inset 0 0 0 1px #b8995a24;
 color:#f0e4c8;
}
body.desktop-client.touch-client #chat-box .chat-header{
 display:flex;align-items:center;justify-content:space-between;
 height:34px;min-height:34px;padding:0 9px 0 25px;
 border:0;border-image:none;border-bottom:1px solid #aa8b5066;
 background:linear-gradient(#4b382249,#16180caf),url('/assets/ui/native-detail-wood.png') center;
 box-shadow:inset 0 1px #dcc49135,inset 0 -1px #0a0d0880;
 color:#ffe8b5;font:600 13px/1 var(--font-title);text-shadow:0 1px 2px #000;
}
body.desktop-client.touch-client #chat-box .chat-header::before{display:none;content:none}
body.desktop-client.touch-client #chat-box .chat-header>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:1px}
body.desktop-client.touch-client #chat-box #chat-collapse{
 display:grid;place-items:center;width:32px;height:30px;min-height:30px;flex:0 0 32px;
 margin:0;padding:0;border:0;border-radius:0;
 background:url('/assets/ui/native-round-bezel.png') center/24px 24px no-repeat;
 color:#ffedc6;font:18px/1 var(--font);text-shadow:0 1px #000;box-shadow:none;
}
body.desktop-client.touch-client #chat-box .chat-tabs{
 height:30px;margin:0 10px;gap:2px;border:0;border-bottom:1px solid #a2885055;background:none;
 flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
 touch-action:pan-x;scrollbar-width:none;scroll-padding:2px;
}
body.desktop-client.touch-client #chat-box .chat-tabs::-webkit-scrollbar{display:none}
body.desktop-client.touch-client #chat-box .chat-tabs button[data-chat-tab]{
 height:30px;min-height:30px;margin:0;padding-top:0;padding-bottom:0;
 flex:0 0 51px;min-width:51px;
 color:#bfb598;font:12px/30px var(--font);text-shadow:0 1px #000;
 border:0;border-radius:0;box-shadow:none;background-color:transparent;
}
body.desktop-client.touch-client #chat-box .chat-tabs button[data-chat-tab].active{
 background-color:#ac8c452b;box-shadow:inset 0 -2px #d4b570;color:#ffe6a7;
}
body.desktop-client.touch-client #chat-box .chat-tabs button[data-unread]:not([data-unread="0"]){flex-basis:72px;min-width:72px}
body.desktop-client.touch-client #chat-box .chat-tabs button[data-chat-tab=nearby]{background-size:14px 16px;background-position:4px center;padding-left:18px;padding-right:2px}
body.desktop-client.touch-client #chat-box .chat-tabs button[data-chat-tab=world]{background-size:14px 16px;background-position:4px center;padding-left:18px;padding-right:2px}
body.desktop-client.touch-client #chat-box .chat-messages{
 margin:0 10px;padding:7px 12px;
 background:linear-gradient(#090f09db,#12190eaa);
 border:0;box-shadow:inset 1px 0 #ad91532b,inset -1px 0 #ad91532b;
 color:#ede4ce;font:12px/18px var(--font);text-shadow:0 1px #000;
 scrollbar-color:#9d8454 #10170f;
}
body.desktop-client.touch-client #chat-box .chat-row{padding:2px 0;overflow-wrap:anywhere}
body.desktop-client.touch-client #chat-box .chat-row .chat-name{color:#edd095}
body.desktop-client.touch-client #chat-box .chat-row.system{color:#c5d2ae}
body.desktop-client.touch-client #chat-box .chat-row time{color:#a6ab95;font-size:10px}
body.desktop-client.touch-client #chat-box .chat-recipient-row{
 display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:4px;
 min-width:0;height:34px;margin:0 10px;padding:2px 3px 2px 7px;
 box-sizing:border-box;border:1px solid #9d824e55;border-bottom:0;background:#1b2013;
 color:#dcc89e;font:11px/28px var(--font);
}
body.desktop-client.touch-client #chat-box .chat-recipient-row input{min-width:0;width:100%;height:28px;min-height:28px;padding:2px 5px;background:#090f09;color:#f5e6c7}
body.desktop-client.touch-client #chat-box .chat-recipient-row[hidden],
body.desktop-client.touch-client #chat-box.collapsed .chat-recipient-row{display:none}
body.desktop-client.touch-client #chat-box form{
 height:36px;margin:0 10px 4px;padding:2px;gap:3px;
 border:1px solid #9d824e88;background:#0a100a;
 box-shadow:inset 0 1px 3px #0008;
}
body.desktop-client.touch-client #chat-box input{
 height:30px;min-height:30px;padding:3px 7px;border:0;border-radius:0;background:none;
 color:#fff0cf;font:16px/24px var(--font);box-shadow:none;
}
body.desktop-client.touch-client #chat-box input::placeholder{color:#b3af96;font:12px/24px var(--font)}
body.desktop-client.touch-client #chat-box form button{
 height:30px;min-height:30px;min-width:42px;padding:0 8px;border:0;border-left:1px solid #a0875466;
 border-radius:0;background:linear-gradient(#68503355,#34291c55),url('/assets/ui/native-detail-wood.png') center;
 color:#ffe5af;font:600 12px/30px var(--font-title);text-shadow:0 1px #000;box-shadow:inset 0 1px #dac18b24;
}
body.desktop-client.touch-client #chat-box :is(.chat-tabs button,form button,#chat-collapse):active{filter:brightness(1.18)}
body.desktop-client.touch-client #chat-box .chat-resize{width:11px;color:#c4a66a}
body.desktop-client.touch-client #chat-box .chat-resize::before{opacity:.7;background-color:#c4a66a;box-shadow:1px 0 #0c1009}
body.desktop-client.touch-client #chat-box.collapsed .chat-header{border-bottom:0}
body.desktop-client.touch-client #chat-box :is(button,input):focus-visible{outline:1px solid #e4c582;outline-offset:-2px}

/* Readable phone dock: an intact tiled wood frame, never a squeezed sheet. */
body.desktop-client.touch-client #chat-box.chat-box{
 display:flex;flex-direction:column;max-height:calc(100dvh - 66px);
 border:4px solid transparent;border-image:url('/assets/ui/native-detail-frame.png') 7 / 4px / 0 round;
 border-radius:0;background:#11180fee;box-shadow:0 -2px 10px #0006,inset 0 0 0 1px #9c80583d;
}
body.desktop-client.touch-client #chat-box::before,body.desktop-client.touch-client #chat-box::after,
body.desktop-client.touch-client #chat-box .chat-header::before,body.desktop-client.touch-client #chat-box .chat-header::after{display:none!important;content:none}
body.desktop-client.touch-client #chat-box .chat-header{
 flex:none;height:36px;min-height:36px;padding:0 7px 0 16px;border:0;border-image:none;
 background:linear-gradient(#4b382744,#1d170ba8),url('/assets/ui/native-detail-wood.png') center/auto repeat;
 box-shadow:inset 0 1px #e4c89355,inset 0 -1px #9b805755;font:600 13px/1.2 var(--font);letter-spacing:.5px;
}
body.desktop-client.touch-client #chat-box #chat-collapse{width:32px;height:32px;min-height:32px;flex:0 0 32px;background:url('/assets/ui/native-round-bezel.png') center/26px 26px no-repeat;font:20px/32px var(--font)}
body.desktop-client.touch-client #chat-box .chat-tabs{flex:none;height:32px;margin:0 10px;background:none}
body.desktop-client.touch-client #chat-box .chat-tabs button{height:32px;min-height:32px;padding:0 2px;background-image:none;font:13px/32px var(--font)}
body.desktop-client.touch-client #chat-box .chat-tabs button.active{background:#bb9c5122;box-shadow:inset 0 -2px #d7b878}
body.desktop-client.touch-client #chat-box .chat-messages{flex:1 1 auto;height:clamp(64px,24dvh,100px);min-height:48px;max-height:100px;margin:0 10px;padding:8px 5px;background:none;border:0;color:#f1ead4;font:13px/20px var(--font)}
body.desktop-client.touch-client #chat-box form{flex:none;height:38px;margin:0 10px 6px;padding:2px 3px;background:#090f0cd9;border:1px solid #8e79526b}
body.desktop-client.touch-client #chat-box input{height:32px;min-height:32px;font:16px/26px var(--font)}
body.desktop-client.touch-client #chat-box form button{height:32px;min-height:32px;font:13px/32px var(--font);padding:0 10px}
body.desktop-client.touch-client #chat-box.collapsed .chat-header{height:36px;min-height:36px;padding-left:16px}
body.desktop-client.touch-client #chat-box.collapsed .chat-resize{display:block}

body.desktop-client.touch-client #chat-box .chat-tabs button[data-chat-tab]{flex:1 0 48px;min-width:48px;height:32px;min-height:32px;padding:0 2px;background-image:none;font:13px/32px var(--font)}

/* The two grips work in both states. A solid wood header and tiled border
   keep their proportions while the phone dock grows or shrinks. */
body.desktop-client.touch-client #chat-box .chat-resize{width:18px;min-width:18px;touch-action:none;cursor:ew-resize}
body.desktop-client.touch-client #chat-box .chat-resize-left{left:-3px}
body.desktop-client.touch-client #chat-box .chat-resize-right{right:-3px}
body.desktop-client.touch-client #chat-box .chat-resize::before{height:16px;opacity:.85}
body.desktop-client.touch-client #chat-box .chat-header{padding-left:22px;padding-right:18px}
body.desktop-client.touch-client #chat-box.collapsed .chat-header{padding-left:22px}