/* tools — ศูนย์เครื่องมืออัจฉริยะ (prefix .tl-) */
.tl-wrap{padding:2px 18px 24px;display:flex;flex-direction:column;gap:16px}
.tl-tagline{font-size:13.5px;line-height:1.55}

.tl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

.tl-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  padding:16px 14px;text-align:left;color:inherit;position:relative;overflow:hidden;
  animation:tlCardIn .45s cubic-bezier(.22,.8,.3,1) both;
  transition:transform .15s ease, box-shadow .25s ease, border-color .25s ease;
}
@keyframes tlCardIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}

.tl-card::after{ /* ประกายเรืองแสงมุมบนตอน hover */
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(80% 60% at 20% 0%,rgba(87,230,168,.16),transparent 70%);
  opacity:0;transition:opacity .25s ease;
}
.tl-card:hover{border-color:var(--glass-brd-hi);box-shadow:var(--glow);transform:translateY(-2px)}
.tl-card:hover::after{opacity:1}
.tl-card:active{transform:scale(.97)}

/* แผ่นไอคอน = กระจกสีอ่อน + ไอคอนสีเดียวกัน (สงบตา ไม่ใช่บล็อกสีจัด 12 สี) */
.tl-ico{
  width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:24px;line-height:1;
  background:rgba(var(--c,120,120,200),.14);
  border:1px solid rgba(var(--c,120,120,200),.3);
  color:rgb(var(--c,120,120,200));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.tl-ico svg{width:22px;height:22px}
/* ธีมมืด: เพิ่มความสว่างไอคอนให้อ่านชัดบนพื้นสด */
html[data-wtheme="night"] .tl-ico,
html[data-wtheme="power"] .tl-ico,
html[data-wtheme="duo"] .tl-ico{
  background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);
  color:#fff;filter:brightness(1.15)}
html[data-wtheme] .tl-name{color:var(--card-ink)}
html[data-wtheme] .tl-desc{color:var(--card-ink-dim)}
.tl-name{font-size:14px;font-weight:700}
.tl-desc{font-size:11.5px;color:var(--ink-dim);line-height:1.45}

@media (max-width:360px){
  .tl-wrap{padding:2px 14px 20px}
  .tl-grid{gap:10px}
  .tl-card{padding:14px 12px}
}

/* ============================================================
 * bottom-sheet กลางของกลุ่มเครื่องมือ AI (prefix .zsheet-)
 * ใช้โดย App.tools.pickChat / App.tools.infoSheet
 * ============================================================ */
.zsheet-root{position:fixed;inset:0;z-index:140}
.zsheet-backdrop{position:absolute;inset:0;background:rgba(4,12,26,.62);
  opacity:0;transition:opacity .25s ease;backdrop-filter:blur(2px)}
.zsheet-backdrop.show{opacity:1}
.zsheet-holder{position:absolute;inset:0;max-width:480px;margin:0 auto;
  display:flex;align-items:flex-end;pointer-events:none}
.zsheet-panel{pointer-events:auto;width:100%;max-height:80%;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#ffffff,#f2f4ff);
  border:1px solid rgba(16,6,159,.15);border-bottom:none;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:0 -12px 40px rgba(16,6,159,.25);
  transform:translateY(100%);transition:transform .3s cubic-bezier(.22,.8,.3,1)}
/* ธีมมืด (night) → แผงมืดตัวหนังสือสว่าง */
html[data-wtheme="night"] .zsheet-panel{
  background:linear-gradient(180deg,#1b12a8,#0a0655);color:#fafbff;
  border-color:rgba(150,150,255,.4);box-shadow:0 -12px 40px rgba(0,0,25,.55)}
html[data-wtheme="night"] .zsheet-grip span{background:rgba(180,180,255,.4)}
.zsheet-panel.show{transform:translateY(0)}
.zsheet-grip{display:flex;justify-content:center;padding:10px 0 2px;flex:none}
.zsheet-grip span{width:40px;height:5px;border-radius:var(--r-pill);background:rgba(160,200,255,.3)}
.zsheet-head{display:flex;align-items:center;gap:8px;padding:8px 18px 6px;flex:none}
.zsheet-title{flex:1;font-size:15px;font-weight:700;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zsheet-x{width:32px;height:32px;border-radius:50%;flex:none;
  background:var(--glass-2);border:1px solid var(--glass-brd);color:inherit;
  display:flex;align-items:center;justify-content:center;transition:transform .15s ease}
.zsheet-x:active{transform:scale(.9)}
.zsheet-x svg{width:15px;height:15px}
.zsheet-content{overflow-y:auto;padding:4px 16px calc(20px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:6px;-ms-overflow-style:none;scrollbar-width:none}
.zsheet-content::-webkit-scrollbar{display:none}
.zsheet-msg{padding:22px 4px;text-align:center;font-size:13.5px}

.zsheet-row{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;
  border-radius:var(--r-md);background:var(--glass);border:1px solid var(--glass-brd);
  color:inherit;text-align:left;transition:background .15s ease,transform .12s ease}
.zsheet-row:hover{background:var(--glass-2)}
.zsheet-row:active{transform:scale(.985)}
.zsheet-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.zsheet-row-name{font-size:14px;font-weight:600}
.zsheet-row-sub{font-size:11.5px}
.zsheet-row > svg{width:16px;height:16px;flex:none;color:var(--ink-faint)}

/* บล็อกเนื้อหาทั่วไปใน infoSheet */
.zsheet-p{font-size:13px;line-height:1.6;color:var(--ink-dim)}
.zsheet-h{font-size:13.5px;font-weight:700;margin-top:6px}
.zsheet-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--glass-brd);font-size:13px}
.zsheet-item .grow{flex:1;min-width:0}
.zsheet-item-sub{font-size:11.5px;color:var(--ink-faint)}