/* Giao dịch: cùng phong cách game, vùng chạm rộng trên mobile. */
#friend-popover #trade-target-action{background:#365d86;border-color:#8ab7dd;color:#fff}
#friend-popover #trade-target-action:hover{background:#4777a9}
#friend-popover #trade-target-action:disabled{opacity:.6}
#friend-popover #trade-target-action[aria-disabled="true"]{opacity:.65;background:#343c48;border-color:#808894;cursor:not-allowed}
#panel.trade-panel{z-index:85;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
#panel.trade-panel .panel-card{width:min(820px,100%);max-width:820px;max-height:calc(var(--visual-height,100dvh) - 24px);padding:22px;border:1px solid #86b3c6;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.trade-panel .panel-head h2{font-size:23px;letter-spacing:.2px;margin-bottom:4px}
.trade-panel #close-panel{min-width:40px;min-height:40px}
.trade-info{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 16px;color:#b9d4e3;font-size:12px}
.trade-step{letter-spacing:1.6px;font-weight:800;color:#8ee6d1}
.trade-timer{font-variant-numeric:tabular-nums}
.trade-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.trade-column{background:#0c2433b8;border:1px solid #44687c;border-radius:14px;padding:16px;min-width:0}
.trade-receive{background:#173a427d;border-color:#487b80}
.trade-column-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.trade-column h3{font-size:18px;margin:0;color:#f4fbff}
.trade-badge{font-size:10px;letter-spacing:.2px;padding:5px 7px;border-radius:12px;background:#344a5b;color:#d1deea;white-space:nowrap}
.trade-badge.is-ready{background:#155c4c;color:#aaf2d5}
.trade-balance,.trade-partner{font-size:12px;line-height:1.5;color:#accbd9;margin:8px 0 16px;overflow-wrap:anywhere}
.trade-money-label{font-size:12px;display:block;margin:0 0 7px;font-weight:700}
.trade-panel input{box-sizing:border-box;border:1px solid #66889f;border-radius:9px;background:#0a1d2a;color:#f3fbff;min-height:42px;font-size:16px;padding:8px 10px;max-width:100%;font-variant-numeric:tabular-nums}
.trade-panel input:focus-visible{outline:2px solid #58cdb7;outline-offset:2px}
.trade-money-input{width:100%}
.trade-money-editor>small{display:block;min-height:18px;margin-top:5px}
.trade-picker{margin-top:10px}
.trade-item-row{display:grid;grid-template-columns:minmax(0,1fr) 70px;gap:10px;align-items:center;border-top:1px solid #375265;padding:10px 0}
.trade-item-info{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:13px;overflow-wrap:anywhere}
.trade-quantity{width:70px;text-align:center}
.trade-muted{color:#b3c9d6;font-size:12px;line-height:1.6}
.trade-update{width:100%;min-height:40px;margin-top:8px;border-radius:9px;font-size:13px;background:#285771;border:1px solid #87b5cf;color:#ecfaff}
.trade-draft-note{font-size:11px;line-height:1.6;color:#c4d6df;margin:9px 0 0;min-height:18px}
.trade-summary-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #385769;font-size:13px}
.trade-summary-name{overflow-wrap:anywhere;min-width:0}.trade-summary-row strong{font-variant-numeric:tabular-nums;white-space:nowrap;color:#8fe9c3}
.trade-warning{background:#6f542c44;border:1px solid #a78b4d;border-radius:9px;padding:10px;color:#ffe1a2;font-size:12px;line-height:1.6}
.trade-live-status{color:#b6e5dc;font-size:13px;line-height:1.5;margin:14px 0 10px}
.trade-footer{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding-top:4px}
.trade-footer button{min-height:44px;padding:10px 16px;border-radius:10px;border:1px solid #7597ab;font-weight:750;font-size:13px}
.trade-primary{background:#23846e;color:#fff!important;border-color:#8dd5bc!important}
.trade-secondary{background:#223f53;color:#dbe9f2}
.trade-panel button:disabled{cursor:default;opacity:.55}
.trade-saving{font-size:14px;color:#b9ead9}
.trade-footnote{font-size:11px;color:#9ab6c7;margin:12px 0 0;line-height:1.6}
.trade-error{border-left:3px solid #f19a92;padding:8px 10px;background:#522a3540;color:#ffd6d0;font-size:13px;line-height:1.5}
.trade-invite-name{font-size:22px;overflow-wrap:anywhere;color:#dcfff5;margin:20px 0 8px}
body.trade-open #friend-popover{display:none!important}
@media(max-width:620px){
 #panel.trade-panel .panel-card{padding:16px;border-radius:15px}
 .trade-columns{grid-template-columns:minmax(0,1fr);gap:10px}
 .trade-column{padding:13px}.trade-info{margin-bottom:10px}
 .trade-panel .panel-head h2{font-size:21px}
 .trade-footer{position:sticky;bottom:-16px;margin:0 -8px;padding:12px 8px;background:#143042f5;border-top:1px solid #496879;backdrop-filter:blur(8px)}
 .trade-footer button{flex:1;min-width:100px}
}
@media(orientation:landscape) and (max-height:550px){
 #panel.trade-panel .panel-card{padding:12px 16px;max-height:calc(var(--visual-height,100dvh) - 18px)}
 .trade-info{margin:2px 0 8px}.trade-column{padding:12px}.trade-panel .panel-head h2{font-size:20px}
}


/* Bảng giao dịch gọn trên điện thoại. PC lớn vẫn dùng bố cục hiện có.
   Tiêu đề + hàng trạng thái + nút cuối nằm ngoài vùng cuộn. */
#panel.trade-panel.trade-compact-viewport{
  --trade-pad-top:max(8px,env(safe-area-inset-top,0px));
  --trade-pad-bottom:max(8px,env(safe-area-inset-bottom,0px));
  --trade-pad-left:max(10px,env(safe-area-inset-left,0px));
  --trade-pad-right:max(10px,env(safe-area-inset-right,0px));
  box-sizing:border-box;
  padding:var(--trade-pad-top) var(--trade-pad-right) var(--trade-pad-bottom) var(--trade-pad-left);
  overflow:hidden;
  align-items:center;
  justify-content:center;
}
#panel.trade-panel.trade-compact-viewport .panel-card{
  display:flex;
  flex-direction:column;
  width:min(620px,100%);
  max-width:620px;
  max-height:min(620px,calc(var(--trade-available-height,var(--visual-height,100dvh)) - var(--trade-pad-top) - var(--trade-pad-bottom)));
  min-height:0;
  min-width:0;
  box-sizing:border-box;
  padding:12px;
  margin:0;
  overflow:hidden;
}
#panel.trade-panel.trade-compact-viewport[data-trade-phase="invite"] .panel-card{width:min(360px,100%)}
#panel.trade-panel.trade-compact-viewport .panel-head{
  flex:0 0 auto;
  align-items:center;
  gap:8px;
  margin-bottom:0;
}
#panel.trade-panel.trade-compact-viewport .panel-head h2{font-size:18px;line-height:1.25;margin:0;letter-spacing:0}
#panel.trade-panel.trade-compact-viewport #close-panel{width:36px;height:36px;min-width:36px;min-height:36px;padding:0;font-size:20px;line-height:1}
#panel.trade-panel.trade-compact-viewport #panel-content{
  display:flex;
  flex:0 1 auto;
  flex-direction:column;
  min-height:0;
  min-width:0;
  overflow:hidden;
}
#panel.trade-panel.trade-compact-viewport .trade-content{
  display:flex;
  flex-direction:column;
  min-height:0;
  min-width:0;
  overflow:hidden;
}
#panel.trade-panel.trade-compact-viewport .trade-info{flex:0 0 auto;margin:3px 0 8px;gap:6px;font-size:11px;line-height:1.3}
#panel.trade-panel.trade-compact-viewport .trade-step{letter-spacing:1px;font-size:10px}
#panel.trade-panel.trade-compact-viewport .trade-timer{white-space:nowrap}
#panel.trade-panel.trade-compact-viewport .trade-scroll{
  flex:0 1 auto;
  min-height:0;
  min-width:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#99999f #101014;
  padding:2px 3px 3px 2px;
  scroll-padding:8px;
  touch-action:pan-y;
}
#panel.trade-panel.trade-compact-viewport .trade-scroll:focus-visible{outline:1px solid #eee;outline-offset:-1px}
#panel.trade-panel.trade-compact-viewport .trade-scroll::-webkit-scrollbar{width:5px}
#panel.trade-panel.trade-compact-viewport .trade-scroll::-webkit-scrollbar-thumb{background:#99999f;border:1px solid #101014}
#panel.trade-panel.trade-compact-viewport .trade-columns{gap:8px;align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#panel.trade-panel.trade-compact-viewport .trade-column{padding:10px;min-height:0;overflow-wrap:anywhere}
#panel.trade-panel.trade-compact-viewport .trade-column-head{gap:5px}
#panel.trade-panel.trade-compact-viewport .trade-column h3{font-size:14px;line-height:1.3}
#panel.trade-panel.trade-compact-viewport .trade-badge{font-size:9px;padding:3px 5px;line-height:1.2;letter-spacing:0;white-space:normal}
#panel.trade-panel.trade-compact-viewport .trade-balance,
#panel.trade-panel.trade-compact-viewport .trade-partner{margin:5px 0 9px;font-size:11px;line-height:1.4}
#panel.trade-panel.trade-compact-viewport .trade-money-label{margin-bottom:5px;font-size:11px;line-height:1.3}
#panel.trade-panel.trade-compact-viewport input{min-height:38px;height:38px;font-size:16px;line-height:1.2;padding:6px 8px}
#panel.trade-panel.trade-compact-viewport .trade-money-editor>small{font-size:10px;min-height:14px;margin-top:4px}
#panel.trade-panel.trade-compact-viewport .trade-picker{margin-top:5px}
#panel.trade-panel.trade-compact-viewport .trade-item-row{grid-template-columns:minmax(0,1fr) 56px;gap:6px;padding:7px 0}
#panel.trade-panel.trade-compact-viewport .trade-item-info{gap:2px;font-size:12px;line-height:1.3}
#panel.trade-panel.trade-compact-viewport .trade-quantity{width:56px}
#panel.trade-panel.trade-compact-viewport .trade-muted{font-size:11px;line-height:1.45}
#panel.trade-panel.trade-compact-viewport .trade-summary-row{padding:8px 0;gap:6px;font-size:12px;line-height:1.4;flex-wrap:wrap}
#panel.trade-panel.trade-compact-viewport .trade-update{min-height:38px;margin-top:6px;padding:6px 8px;font-size:12px;line-height:1.3}
#panel.trade-panel.trade-compact-viewport .trade-draft-note{font-size:10px;line-height:1.45;margin:6px 0 0;min-height:14px}
#panel.trade-panel.trade-compact-viewport .trade-live-status{font-size:11px;line-height:1.4;margin:8px 0 3px}
#panel.trade-panel.trade-compact-viewport .trade-warning,
#panel.trade-panel.trade-compact-viewport .trade-error{padding:7px;font-size:11px;line-height:1.4;margin:8px 0 0}
#panel.trade-panel.trade-compact-viewport .trade-footer{
  position:static;
  flex:0 0 auto;
  display:flex;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
  min-width:0;
  margin:8px 0 0;
  padding:8px 0 0;
  border-top:1px solid rgba(255,255,255,.24);
  backdrop-filter:none;
}
#panel.trade-panel.trade-compact-viewport .trade-footer button{
  flex:1 1 0;
  width:auto;
  min-width:0;
  min-height:40px;
  padding:7px 8px;
  font-size:12px;
  line-height:1.35;
  white-space:normal;
  overflow-wrap:break-word;
  touch-action:manipulation;
}
#panel.trade-panel.trade-compact-viewport .trade-footer .trade-primary{font-weight:800}
#panel.trade-panel.trade-compact-viewport .trade-saving{font-size:12px;line-height:1.4}
#panel.trade-panel.trade-compact-viewport .trade-footnote{
  flex:0 0 auto;
  font-size:10px;
  line-height:1.35;
  margin:6px 0 0;
}
#panel.trade-panel.trade-compact-viewport .trade-invite-name{font-size:17px;line-height:1.4;margin:6px 0 8px}
#panel.trade-panel.trade-compact-viewport[data-trade-phase="invite"] .trade-scroll>.trade-muted{margin:0 0 5px}

@media(max-width:540px){
 #panel.trade-panel.trade-compact-viewport .panel-card{width:min(360px,100%);padding:11px}
 #panel.trade-panel.trade-compact-viewport .trade-columns{grid-template-columns:minmax(0,1fr)}
 #panel.trade-panel.trade-compact-viewport .trade-footer button{font-size:12px}
 #panel.trade-panel.trade-compact-viewport[data-trade-phase="review"] .trade-footer .trade-primary{flex-basis:100%}
}
@media(orientation:landscape) and (max-height:550px){
 #panel.trade-panel.trade-compact-viewport .panel-card{padding:9px 12px}
 #panel.trade-panel.trade-compact-viewport .panel-head h2{font-size:17px}
 #panel.trade-panel.trade-compact-viewport .trade-info{margin:1px 0 6px}
 #panel.trade-panel.trade-compact-viewport .trade-footer{margin-top:6px;padding-top:6px}
 #panel.trade-panel.trade-compact-viewport .trade-column{padding:8px}
 #panel.trade-panel.trade-compact-viewport .trade-footnote{display:none}
}
/* Khi bàn phím mở trên mobile, ưu tiên vùng nhập và hàng nút chính. */
body.keyboard-open #panel.trade-panel.trade-compact-viewport .trade-footnote{display:none}