/* 回饋問卷（前台）的樣式。與 feedback.js 配套；⚠ 學習與梳理用同一份，改的時候兩邊一起改。
   顏色一律取頁面自己的 --accent、--surface 等變數，放在哪個小慢就是那個小慢的配色。 */

/* 輸入列的「給回饋」：一開始是灰的，聊滿輪數才亮起來（比照覺察的 .feedback-btn） */
.xmfb-open{height:32px;padding:0 .6rem;font-family:'DM Mono',monospace;font-size:.72rem;letter-spacing:.02em;border-radius:8px;border:1px solid var(--green);background:none;color:var(--green);cursor:pointer;transition:all .15s;display:flex;align-items:center;flex-shrink:0;white-space:nowrap;}
.xmfb-open:disabled{opacity:.3;cursor:default;}
.xmfb-open.lit{background:var(--green);border-color:var(--green);color:#fff;animation:xmfb-glow 2.6s ease-in-out 3;}
.xmfb-open.lit:hover{opacity:.85;}
@keyframes xmfb-glow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 5px color-mix(in srgb, var(--green) 30%, transparent)}}
.xmfb-open-text{margin-left:.35em;}
/* 手機上輸入列放不下：只留 ✨，文字靠 title／aria-label */
@media (max-width:768px){.xmfb-open{padding:0 .5rem;}.xmfb-open-text{display:none;}}
/* 會動的東西對部分使用者是負擔；關掉動畫後靠顏色本身仍然夠明顯。 */
@media (prefers-reduced-motion: reduce){.xmfb-open.lit{animation:none;}}

.xmfb-overlay{position:fixed;inset:0;z-index:10050;background:rgba(51,37,29,.5);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1rem;}
.xmfb-box{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.9rem 2.1rem 1.6rem;max-width:520px;width:100%;box-shadow:0 8px 32px rgba(51,37,29,.15);max-height:88vh;overflow-y:auto;text-align:left;}
.xmfb-close{position:absolute;top:.6rem;right:.75rem;border:none;background:transparent;color:var(--muted);font-size:1.4rem;line-height:1;padding:.2rem .45rem;cursor:pointer;border-radius:6px;}
.xmfb-close:hover{background:var(--surface2);color:var(--accent);}
.xmfb-title{font-family:'Cormorant Garamond','Noto Serif TC',serif;font-size:1.3rem;color:var(--accent);margin-bottom:.75rem;}
.xmfb-intro{font-family:'Noto Serif TC',serif;font-size:.88rem;line-height:1.9;color:var(--text);margin-bottom:1.3rem;}

/* 留好邊框位置，框紅時版面不跳動 */
.xmfb-q{margin:0 -.6rem 1.25rem;border:1px solid transparent;border-radius:10px;padding:.5rem .6rem;transition:border-color .15s,background .15s;}
.xmfb-q.is-missing{border-color:#b0413e;background:rgba(176,65,62,.04);}
.xmfb-missing{font-size:.76rem;color:#b0413e;margin:.35rem 0 0;}
.xmfb-label{font-family:'Noto Serif TC',serif;font-size:.9rem;line-height:1.75;color:var(--text);margin-bottom:.6rem;}
.xmfb-scale{display:flex;gap:.45rem;flex-wrap:wrap;}
.xmfb-num{width:2.6rem;height:2.3rem;font-family:'DM Mono',monospace;font-size:.88rem;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.xmfb-na{height:2.3rem;padding:0 .8rem;font-family:'Noto Serif TC',serif;font-size:.8rem;border:1px dashed var(--border);border-radius:8px;background:#fff;color:var(--muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.xmfb-num:hover,.xmfb-na:hover{border-color:var(--accent);color:var(--accent);}
.xmfb-num.is-on,.xmfb-na.is-on{background:var(--accent);border-color:var(--accent);border-style:solid;color:#fff;}
.xmfb-anchors{display:flex;gap:1.4rem;margin-top:.4rem;font-size:.76rem;color:var(--muted);}

.xmfb-warn{font-size:.78rem;line-height:1.7;color:#b0413e;margin:-.25rem 0 0;}
.xmfb-text{width:100%;box-sizing:border-box;margin-top:.55rem;font-family:'Noto Serif TC',serif;font-size:.88rem;line-height:1.8;padding:.6rem .8rem;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);outline:none;resize:vertical;min-height:0;max-height:none;transition:border-color .15s;}
.xmfb-text:focus{border-color:var(--accent);}
.xmfb-text::placeholder{font-size:.8rem;color:var(--dim);}
.xmfb-note{font-size:.76rem;line-height:1.7;color:var(--muted);margin:0 0 1rem;}
.xmfb-error{font-size:.8rem;color:#8a3020;margin:0 0 .8rem;}

.xmfb-actions{display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap;}
.xmfb-btn{font-family:'DM Mono','Noto Serif TC',monospace;font-size:.78rem;letter-spacing:.04em;padding:.55rem 1.2rem;border-radius:8px;cursor:pointer;transition:opacity .15s,color .15s,border-color .15s;}
.xmfb-btn-primary{background:var(--accent);border:1px solid var(--accent);color:#fff;}
.xmfb-btn-primary:not(:disabled):hover{opacity:.85;}
.xmfb-btn-primary:disabled{opacity:.35;cursor:default;}
.xmfb-btn-ghost{background:none;border:1px solid var(--border);color:var(--muted);}
.xmfb-btn-ghost:hover{border-color:var(--accent);color:var(--accent);}

@media (max-width:480px){
  .xmfb-box{padding:1.5rem 1.2rem 1.2rem;}
  .xmfb-actions{justify-content:stretch;}
  .xmfb-btn{flex:1 1 auto;text-align:center;}
}

.xmfb-fade-enter-active,.xmfb-fade-leave-active{transition:opacity .18s ease;}
.xmfb-fade-enter-from,.xmfb-fade-leave-to{opacity:0;}