/* 問題回報（js/support.js）：討論版頁面右下角的線上客服——圓鈕＋對話窗 */
#support { position: fixed; right: 16px; bottom: 16px; z-index: 1050; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none;
  font-family: inherit; }
.support-on #guide-body { padding-bottom: 90px; }   /* 攻略・討論每頁最下面的東西捲得到按鈕上面 */
#support.hidden { display: none; }
#support > * { pointer-events: auto; }

/* 按鈕：平面的金色膠囊（對話泡泡＋「回報問題」），柔和陰影，滑過稍微浮起；手機小一號，字照樣寫（只有泡泡會看成發文） */
#support #support-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 48px; min-width: 0; padding: 0 20px 0 16px;
  border-radius: 24px; border: 0; background: #e2b24c; color: #22160a; font: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.04em;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35); cursor: pointer; text-shadow: none; transition: transform 0.15s, background 0.15s, box-shadow 0.15s; }
#support #support-btn:hover { background: #efc260; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.35); }
#support #support-btn:active { transform: translateY(0); }
#support #support-btn.hidden { display: none; }
#support-btn svg { width: 22px; height: 22px; flex: none; }
#support-btn span { line-height: 1; white-space: nowrap; }
.sp-dot { position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%; background: #ef4433; border: 2px solid #16110b; }
html.mobile #support #support-btn { height: 42px; gap: 6px; padding: 0 15px 0 12px; border-radius: 21px; font-size: 14px; }
html.mobile #support-btn svg { width: 19px; height: 19px; }
.sp-dot.hidden { display: none; }

#support-panel { display: flex; flex-direction: column; width: min(340px, calc(100vw - 24px)); max-height: min(520px, var(--sp-max, 60vh)); overflow: hidden;
  background: #16110b; color: #e8dcc0; border: 1px solid #6a5424; border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75); font-size: 14px; text-align: left; }
#support-panel.hidden { display: none; }
#support-panel header { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 12px; background: linear-gradient(#3a2c12, #241a0c); border-bottom: 1px solid #4a3a1c; }
.sp-av { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #e2b24c; color: #22160a; }
.sp-av svg { width: 19px; height: 19px; }
#support-panel header div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
#support-panel header b { color: #ffe08a; font-size: 15px; }
#support-panel header small { color: #b8a478; font-size: 12px; }
#support-panel header small::before { content: '● '; color: #7fe07f; }
#support #support-x { min-width: 0; padding: 4px 8px; background: none; border: 0; box-shadow: none; color: #c8b088; font-size: 16px; cursor: pointer; }
#support #support-x:hover { color: #fff; }

#support-log { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 150px; overflow-y: auto; padding: 12px; overscroll-behavior: contain; }
.sp-msg { display: flex; flex-direction: column; max-width: 86%; }
.sp-msg p { margin: 0; padding: 8px 11px; border-radius: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.sp-msg time { margin-top: 2px; padding: 0 4px; font-size: 11px; color: #8a7a5c; }
.sp-msg.cs { align-self: flex-start; }
.sp-msg.cs p { background: #2a2216; border: 1px solid #3e3220; border-top-left-radius: 4px; }
.sp-msg.me { align-self: flex-end; align-items: flex-end; }
.sp-msg.me p { background: #5a4414; color: #fff2cc; border-top-right-radius: 4px; }
.sp-msg.st-queued p { border-color: #6a5424; }
.sp-msg.st-done p { background: #1c2e1a; border-color: #3a7a3a; color: #d8f5d0; }
.sp-msg.st-skip p { color: #b8ac98; }

#support-panel footer { display: flex; gap: 8px; padding: 10px; background: #120e09; border-top: 1px solid #3a2c1a; }
#support-body { flex: 1; min-width: 0; min-height: 42px; max-height: 120px; resize: none; padding: 8px; background: #1c160e; color: inherit; border: 1px solid #4a3a1c; border-radius: 8px;
  font: inherit; font-size: 14px; }
#support-body:focus { outline: 0; border-color: #a8873a; }
#support #support-send { align-self: flex-end; min-width: 0; padding: 8px 14px; border-radius: 8px; }
html.mobile #support-body { font-size: 16px; }   /* 手機：小於 16px 會被放大 */

/* 交易版還沒開放（js/market.js，新開伺服器還沒有玩家到門檻） */
.mk-closed { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 18px 0; padding: 28px 16px; border-radius: 12px; text-align: center;
  background: #1c160e; border: 1px dashed #6a5424; }
.mk-closed b { color: #ffe08a; font-size: 18px; }
.mk-closed span { color: #c8b088; font-size: 15px; }