/* 萬用輸入（public/tools/_kit/understand.js）：一個白卡收所有東西；送出時鍋蓋蓋上（爆品公式「蓋鍋子」，Joey 10/18 02:59），
   回來時「我聽到的」從鍋裡一條一條冒出來，掀蓋看到成品。品牌藍 #02539C、琥珀 #E8A13A。 */
.un { position: relative; background: var(--card, #fff); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 22px 18px; overflow: hidden; }
.un.un-drag { box-shadow: 0 0 0 3px #E8A13A, var(--shadow); }
.un-h { margin: 0; font: 900 22px/1.3 var(--font-head); color: var(--ink); }
.un-eg { margin: 4px 0 14px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.un-btns { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.un-mic, .un-cam span { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; border-radius: 16px; font: 700 17px/1.3 var(--font-body); cursor: pointer; text-align: center; padding: 8px 12px; box-sizing: border-box; }
.un-mic { border: 0; background: #02539C; color: #fff; }
.un-mic:focus-visible, .un-cam:focus-within span, .un-send:focus-visible { outline: 3px solid #E8A13A; outline-offset: 2px; }
.un-dot { width: 14px; height: 14px; border-radius: 50%; background: #E8A13A; box-shadow: 0 0 0 4px rgba(232, 161, 58, .25); flex: none; }
.un.un-rec .un-mic { background: #B3261E; }
.un.un-rec .un-dot { background: #fff; animation: un-blink 1s ease-in-out infinite; }
.un-cam span { background: #fff; color: #02539C; box-shadow: 0 0 0 2px #02539C inset; height: 100%; }
.un-chat { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; padding: 6px 6px 6px 14px; border-radius: 16px; background: var(--paper, #F2F6FA); box-shadow: 0 0 0 1px var(--line) inset; }
.un-chat textarea { flex: 1; border: 0; background: transparent; resize: none; font: 16px/1.6 var(--font-body); color: var(--ink); padding: 8px 0; min-height: 28px; outline: none; box-shadow: none; }
.un-send { flex: none; border: 0; border-radius: 12px; background: #0E141B; color: #fff; font-weight: 700; padding: 10px 16px; cursor: pointer; }
.un-fine { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }
.un-ask { margin: 14px 0 0; padding: 12px 16px; border-radius: 16px 16px 16px 4px; background: #FBEBD2; color: #2B1A00; font-weight: 700; font-size: 16px; }
.un-ask[hidden], .un-heard[hidden] { display: none; }

/* 我聽到的 */
.un-heard { margin-top: 16px; }
.un-heard-h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; font-weight: 700; color: #02539C; font-size: 15px; }
.un-reset { border: 0; background: none; color: var(--ink-soft); text-decoration: underline; cursor: pointer; font-size: 14px; }
.un-heard ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.un-heard li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px; background: #E1ECF6; max-width: 100%; }
.un-heard li b { font-size: 15px; color: var(--ink); }
.un-heard li span { font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.un-heard li.un-as { background: #FBEBD2; }
.un.un-pop .un-heard li { animation: un-up .45s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(var(--i) * 140ms); }

/* 鍋子：平常收起，送出時蓋上 */
.un-pot { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(circle at 50% 60%, rgba(242, 246, 250, .97), rgba(225, 236, 246, .96)); }
.un.un-busy .un-pot { opacity: 1; pointer-events: auto; }
.un-lid { position: relative; width: 190px; height: 96px; border-radius: 190px 190px 14px 14px / 96px 96px 14px 14px; background: linear-gradient(160deg, #3A7BC0 0%, #02539C 55%, #013A6E 100%); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .18), 0 22px 30px -18px rgba(2, 40, 80, .7); transform: translateY(-160%); }
.un-lid:before { content: ""; position: absolute; left: 50%; top: -16px; width: 30px; height: 20px; margin-left: -15px; border-radius: 10px 10px 4px 4px; background: #E8A13A; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.un-lid:after { content: ""; position: absolute; left: -14px; right: -14px; bottom: -10px; height: 12px; border-radius: 8px; background: #0E141B; opacity: .85; }
.un.un-busy .un-lid { animation: un-drop .45s cubic-bezier(.3, 1.4, .5, 1) forwards, un-wobble 1.1s ease-in-out .5s infinite; }
.un-steam { position: absolute; top: calc(50% - 110px); width: 10px; height: 34px; border-radius: 10px; background: rgba(2, 83, 156, .18); opacity: 0; }
.un-steam:nth-child(1) { left: calc(50% - 40px); } .un-steam:nth-child(2) { left: calc(50% - 5px); } .un-steam:nth-child(3) { left: calc(50% + 30px); }
.un.un-busy .un-steam { animation: un-steam 1.4s ease-out .5s infinite; }
.un.un-busy .un-steam:nth-child(2) { animation-delay: .8s; } .un.un-busy .un-steam:nth-child(3) { animation-delay: 1.1s; }
/* 他剛講的關鍵字在鍋邊飄（讓等待本身看得到「它在聽」） */
.un-words { position: absolute; left: 0; right: 0; bottom: 7%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0 16px; }
.un-words i { font-style: normal; font-weight: 700; font-size: 14px; color: #02539C; background: #fff; border-radius: 999px; padding: 3px 10px; box-shadow: 0 2px 8px -4px rgba(2, 40, 80, .5); opacity: 0; }
.un.un-busy .un-words i { animation: un-up .5s ease-out both, un-float 2.4s ease-in-out infinite; animation-delay: calc(.35s + var(--i) * .18s), calc(.85s + var(--i) * .18s); }

@keyframes un-drop { to { transform: translateY(0); } }
@keyframes un-wobble { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-3px) rotate(-2deg); } 75% { transform: translateY(-2px) rotate(2deg); } }
@keyframes un-steam { 0% { opacity: 0; transform: translateY(10px) scaleY(.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px) scaleY(1.2); } }
@keyframes un-up { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes un-float { 50% { transform: translateY(-4px); } }
@keyframes un-blink { 50% { opacity: .3; } }

/* 下一步 */
.un-next { margin-top: 14px; padding: 16px; border-radius: var(--radius); background: #0E141B; color: #F2F6FA; }
.un-next[hidden] { display: none; }
.un-next-h { margin: 0 0 10px; font-weight: 700; font-size: 16px; display: flex; flex-direction: column; gap: 2px; }
.un-next-h span { font-weight: 400; font-size: 14px; color: #B3CBE1; }
.un-next-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.un-next-btns .btn { flex: 1 1 auto; text-align: center; }
.un-next-btns .btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.un-next-btns .un-line { background: #06C755; border-color: #06C755; color: #fff; }
.un-next.un-show { animation: un-up .45s ease-out both; }

@media (max-width: 860px) {
  .un { padding: 18px 16px 14px; }
  .un-h { font-size: 20px; }
  .un-btns { grid-template-columns: 1fr 1fr; }
  .un-mic, .un-cam span { font-size: 16px; min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .un *, .un-next { animation: none !important; transition: none !important; }
  .un.un-busy .un-lid { transform: none; }
  .un.un-busy .un-words i { opacity: 1; }
  .un.un-busy .un-pot:after { content: "正在聽懂⋯"; position: absolute; bottom: 30%; font-weight: 700; color: #02539C; }
}
.un-fine a { color: var(--ink-soft); margin-left: 6px; }
.un-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.un-choices button { font: 700 17px/1 var(--font-body); padding: 12px 22px; border-radius: 999px; border: 0; background: #02539C; color: #fff; cursor: pointer; min-height: 46px; }
.un-choices button:focus-visible { outline: 3px solid #0E141B; outline-offset: 2px; }
.un-or { display: block; margin-top: 8px; font-weight: 400; font-size: 14px; color: #5A4520; }

/* ---- 蓋鍋子 v2（public/tools/_kit/pot.js，GSAP；Atlas 10/18 第二輪：整個畫面只留鍋子、品牌藍＋米白、光從縫裡透出來） ---- */
html.pot-on .un-pot { display: none; }                /* 有 GSAP 版就不跑 CSS 版 */
html.pot-on { overflow: hidden; }
/* 版面：W＝餐蓋寬；餐蓋框高約 0.694W（SVG 360×250）。蓋子與盤子之間那道縫在框高 78%，光、光芒都以它為中心 */
.pot-stage { position: fixed; inset: 0; z-index: 80; pointer-events: none; --W: min(78vw, 400px); }
.pot-bg { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 52%, #FFFBF3 0%, #F6EFE2 55%, #EBE2D1 100%); }
.pot-box { position: absolute; width: var(--W); left: calc(50% - var(--W) / 2); top: calc(50% - var(--W) * .45); }
.pot-glow, .pot-rays { position: absolute; left: 50%; top: calc(50% + var(--W) * .094); border-radius: 50%; pointer-events: none; }
.pot-glow { width: calc(var(--W) * 1.5); aspect-ratio: 1; margin: calc(var(--W) * -.75) 0 0 calc(var(--W) * -.75); background: radial-gradient(circle, rgba(246, 196, 107, .6), rgba(232, 161, 58, .2) 36%, rgba(232, 161, 58, 0) 64%); opacity: 0; }
/* 掀蓋時從縫裡射出來的光芒：一圈放射狀的暖光條，外緣淡掉 */
.pot-rays { width: calc(var(--W) * 2.4); aspect-ratio: 1; margin: calc(var(--W) * -1.2) 0 0 calc(var(--W) * -1.2); opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 236, 190, .9) 0deg 5deg, rgba(255, 236, 190, 0) 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 8%, rgba(0, 0, 0, .55) 30%, transparent 62%); mask: radial-gradient(circle, #000 8%, rgba(0, 0, 0, .55) 30%, transparent 62%); }
.pot-svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 24px 28px rgba(2, 40, 80, .22)); }
.pot-steam { position: absolute; top: 2%; width: 9px; height: 40px; border-radius: 9px; background: linear-gradient(rgba(255, 251, 243, 0), rgba(176, 196, 216, .7), rgba(255, 251, 243, 0)); filter: blur(2px); opacity: 0; }
.pot-steam:nth-of-type(1) { left: 42%; } .pot-steam:nth-of-type(2) { left: 50%; } .pot-steam:nth-of-type(3) { left: 58%; }
.pot-say { position: absolute; left: 0; right: 0; top: calc(50% + var(--W) * .3); margin: 0; text-align: center; font: 700 15px/1.4 var(--font-body); letter-spacing: .12em; color: #6B5B3E; opacity: 0; }
.pot-words i { position: fixed; left: 0; top: 0; font-style: normal; font: 700 15px/1 var(--font-body); color: #02539C; background: #FFFDF8; border-radius: 999px; padding: 8px 14px; box-shadow: 0 0 0 1px rgba(2, 83, 156, .14), 0 10px 22px -12px rgba(2, 40, 80, .55); white-space: nowrap; will-change: transform; }

/* 手機第一屏要放得下「輸入框＋範例成品」（Atlas 10/18 hardcheck r3 決定②，circuit）：手機版壓矮，按鈕仍 ≥44px */
@media (max-width: 959px) {
  .un { padding: 14px 16px 9px; }
  .un-h { display: inline; margin-right: 6px; font-size: 17px; }   /* 標題跟例句接成同一段，少一行 */
  .un-eg { display: inline; margin: 0; font-size: 14px; line-height: 1.5; }
  .un-btns { margin-top: 8px; }
  .un-mic, .un-cam span { min-height: 46px; font-size: 16px; padding: 6px 10px; }
  .un-chat { margin-top: 8px; padding: 4px 4px 4px 12px; }
  .un-chat textarea { padding: 6px 0; }
  .un-send { padding: 8px 14px; }
  .un-fine { margin-top: 6px; font-size: 12px; }
}