/* ============================================================
   主題：Bare — 無卡無框，插圖浮在白底；前3名滑過浮現箭頭插入鈕；
   更多建議＝三張並排小縮圖（點擊放大）；底部＝灰黑果凍玻璃浮島，
   平常縮成一側膠囊，hover／聚焦才展開。疊在 taskpane-a.css 之後。
   ============================================================ */
:root{--r-card:10px; --r-ctl:10px}

.stage{padding:0 18px;padding-bottom:calc(var(--dock-h) + 18px)}
.statusline{padding:14px 0 12px}
.top3{gap:18px;min-height:340px}

/* 卡片＝透明，只剩浮起的圖 */
.card{border-color:transparent;background:transparent;box-shadow:none;overflow:visible}
.card:hover{box-shadow:none;transform:none}
.thumb{background:var(--white);border-radius:var(--r-card);box-shadow:0 1px 0 rgba(0,0,0,.04);transition:box-shadow .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1)}
.card:hover .thumb{box-shadow:0 14px 34px rgba(0,0,0,.13);transform:translateY(-2px)}

/* 前3名：滑過浮現「插入」＝金色圓形箭頭鈕（指令3），SVG 為小膠囊 */
.cardact{position:absolute;left:50%;bottom:10px;transform:translateX(-50%) translateY(8px);
  width:auto;padding:0;border-top:none;gap:7px;opacity:0;pointer-events:none;z-index:3;
  transition:.35s cubic-bezier(.16,1,.3,1)}
.card:hover .cardact,.card:focus-within .cardact{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.cardact button{flex:none;border:1px solid transparent;border-radius:999px;font-size:11.5px;box-shadow:0 4px 16px rgba(0,0,0,.22)}
.cardact button.copy{background:var(--gold);color:var(--carbon);border-color:var(--gold);
  width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center}
.cardact button.copy i{display:block;width:19px;height:19px}
.cardact button.copy .ct{display:none}
.cardact button.dl{background:rgba(255,255,255,.94);color:var(--ink);padding:8px 14px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cardact button.dl:hover{border-color:var(--ink)}

/* 名次：低調白底圓點 */
.rankbadge,.rankbadge.r2,.rankbadge.r3{background:rgba(255,255,255,.92);color:var(--ink);border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.14);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* 指令6：更多建議／最近＝三張並排小縮圖，只點擊放大（無插入鈕） */
.grid{grid-template-columns:repeat(3,1fr);gap:10px}
.grid .thumb{height:76px;padding:8px}
.grid .cardact{display:none}

/* ============ 指令2：頂部 Eureka+ 字標 ============ */
.topbar .brand-logo{height:20px;width:auto;display:block}

/* ============ 指令1：模式頁籤＝靠右兩小圖示，hover 展開文字 ============ */
.topbar .tabs{gap:4px}
.tab{display:flex;align-items:center;gap:0;border:none;background:transparent;padding:7px;border-radius:999px;color:var(--kicker-grey);transition:.3s cubic-bezier(.16,1,.3,1)}
.tab i{width:18px;height:18px;display:block;flex:none}
.tab .tab-label{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;font-size:12px;font-weight:700;transition:.3s cubic-bezier(.16,1,.3,1)}
.tab:hover{background:var(--zebra);color:var(--ink)}
.tab:hover .tab-label{max-width:110px;opacity:1;margin-left:6px}
.tab.on{display:none}

/* ============ 指令4：版面形狀＝色票右側、去框、純圖示 ============ */
.dock-row .segs{gap:2px;background:transparent;border-radius:0}
.dock-row .seg{border:none;background:transparent;padding:7px;min-width:0;color:rgba(255,255,255,.6);border-radius:8px}
.dock-row .seg:hover{background:rgba(255,255,255,.12);color:#fff}
.dock-row .seg.on{background:transparent;color:var(--gold)}

/* ============ 指令5＋7：灰黑果凍玻璃浮島，平常縮側膠囊，hover/聚焦展開 ============ */
.dock{left:auto;right:14px;bottom:14px;width:auto;max-width:calc(100% - 28px);
  border:1px solid rgba(255,255,255,.16);background:rgba(28,28,30,.5);
  -webkit-backdrop-filter:blur(28px) saturate(1.7);backdrop-filter:blur(28px) saturate(1.7);
  box-shadow:0 18px 52px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 1px rgba(0,0,0,.18);
  border-radius:999px;padding:0;
  transition:border-radius .4s cubic-bezier(.16,1,.3,1),background .4s,padding .4s}
.dock-handle{display:flex;align-items:center;gap:9px;padding:13px 19px;color:#fff;font-size:13px;font-weight:400;letter-spacing:.06em;white-space:nowrap;cursor:pointer;max-height:54px;overflow:hidden;transition:max-height .3s cubic-bezier(.16,1,.3,1),opacity .2s,padding .3s}
.dock-handle i{width:18px;height:18px;display:block;color:var(--gold);flex:none}
.dock-inner{max-height:0;opacity:0;overflow:hidden;transition:max-height .42s cubic-bezier(.16,1,.3,1),opacity .3s}
.dock:focus-within,.dock.is-open{left:14px;right:14px;border-radius:22px;padding:12px 15px;background:rgba(28,28,30,.55)}
.dock:focus-within .dock-handle,.dock.is-open .dock-handle{max-height:0;opacity:0;padding-top:0;padding-bottom:0}
.dock:focus-within .dock-inner,.dock.is-open .dock-inner{max-height:540px;opacity:1}

/* dock 內控制項＝深底淺色 */
.dock textarea#ctx{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.dock textarea#ctx::placeholder{color:rgba(255,255,255,.5)}
.dock textarea#ctx:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,180,0,.26)}
.sw{border-color:rgba(40,40,42,.95);box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.sw.on{box-shadow:0 0 0 2px rgba(28,28,30,.95),0 0 0 4px currentColor}
.iconbtn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.85)}
.iconbtn:hover{border-color:#fff;color:#fff}
.dock-adv{border-top-color:rgba(255,255,255,.14)}
.dock-adv>summary{color:rgba(255,255,255,.6)}
.dock-adv>summary:hover{color:#fff}
.adv-lbl{color:rgba(255,255,255,.6)}
.chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.82)}
.chip:hover{border-color:#fff;color:#fff}
.chip.on{background:var(--gold);border-color:var(--gold);color:var(--carbon)}
.adv-field .seg{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.85)}
.adv-field .seg.on{background:var(--gold);color:var(--carbon);border-color:var(--gold)}
.adv-field .seg.on + .seg{border-left-color:rgba(255,255,255,.16)}
.adv-field .btn.ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.adv-field .btn.ghost:hover{border-color:#fff}
.sel{background-color:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff;
  background-repeat:no-repeat;background-position:right 11px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.sel option,.sel optgroup{color:#1b1d22;background:#fff}
/* 瀏覽全部的搜尋框在白底 #browseBar 上，需用深色字（避免白字隱形） */
#browseSearch{color:var(--ink);background:#fff;border-color:var(--line);background-image:none}
#browseSearch::placeholder{color:#9aa0aa}

.section-title{justify-content:flex-start}

/* 指令6批次：文字輸入框右側 Send 按鈕（黑底白字）＋圖示尺寸＋插入箭頭朝左 */
.ctx-row{display:flex;gap:8px;align-items:stretch}
.ctx-row textarea#ctx{flex:1;height:46px}
.send{flex:none;width:48px;border:none;border-radius:var(--r-ctl);background:#000;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.send:hover{background:#222}
.send svg{width:19px;height:19px;display:block}
.tab svg,.dock-handle svg{width:18px;height:18px}
.dock-row .seg svg{width:18px;height:18px}
.iconbtn svg{width:16px;height:16px}
.cardact button.copy svg{width:19px;height:19px;display:block;transform:rotate(180deg)}

/* 類別篩選：以乾淨 chip 列取代原生 select（避免預覽中原生下拉的條紋） */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cat-chips{display:flex;gap:6px;overflow-x:auto;flex:1;min-width:0;padding-bottom:2px;scrollbar-width:thin}
.cat-chips::-webkit-scrollbar{height:5px}
.cat-chips::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:9px}
.cat-chip{flex:none;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:rgba(255,255,255,.82);border-radius:999px;padding:5px 11px;font-size:11.5px;white-space:nowrap;cursor:pointer;transition:.15s}
.cat-chip:hover{border-color:#fff;color:#fff}
.cat-chip.on{background:var(--gold);border-color:var(--gold);color:var(--carbon);font-weight:700}