/* כלי האזנה בנגן המלא (tools.js): שיפור קול, חיתוך קטע, שיתוף מהרגע, "התמלול בדרך".
   נשען על הטוקנים של style.css (זכוכית, ענבר #F9AE00, Assistant). */

/* ---- שורת הכלים מתחת לכפתורי הנגינה ---- */
.sheet-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}
.sheet-tools:empty{display:none}
.tl-b{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px 0 12px;padding-inline:12px 14px;border-radius:999px;
  font:600 14px/1 var(--f-meta);color:var(--text);white-space:nowrap;
  background:var(--glass-fill);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat))}
.tl-b svg{width:18px;height:18px;color:var(--muted);transition:color .2s}
.tl-b:hover{border-color:rgba(255,255,255,.4)}
.tl-b:hover svg{color:var(--text)}
.tl-b.on{background:linear-gradient(145deg,rgba(255,201,60,.3),rgba(241,136,0,.16));border-color:rgba(249,174,0,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 26px -14px rgba(241,136,0,.9)}
.tl-b.on svg{color:var(--primary)}
#tEnh.on svg{animation:tlPulse 2.4s ease-in-out infinite;transform-origin:50% 50%}
@keyframes tlPulse{50%{transform:scaleY(.72)}}
.sheet.paused #tEnh.on svg{animation:none}
/* החזקה = המקור: אותו כפתור, מצב "מקור · משמיע" */
#tEnh{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;transition:background .18s,border-color .18s,color .18s,transform .3s var(--lg-spring)}
#tEnh.held{background:#fff;color:#0B2A4A;border-color:#fff;transform:scale(.97);box-shadow:0 0 0 4px rgba(255,255,255,.18)}
#tEnh.held svg{color:#0B2A4A;animation:none}
.tl-b:active{transform:scale(.94);transition-duration:.08s}
#tEnh.held:active{transform:scale(.97)}

/* ---- חיתוך קטע ---- */
.trim{margin-top:14px;border-radius:24px;padding:12px 14px 14px;animation:findIn .4s var(--lg-spring) both}
.trim header{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px}
.trim header>div{flex:1;min-width:0;padding-top:4px}
.trim header b{display:block;font-weight:800;font-size:17px;line-height:1.25}
.trim header small{display:block;font:300 13.5px/1.4 var(--f-meta);color:var(--muted)}
.trim header .ic{width:36px;height:36px;color:var(--muted);margin:-2px -4px 0 0}
.trim header .ic svg{width:20px;height:20px}

/* הציר: צורת גל של הסביבה, הקטע מודגש בענבר, שתי ידיות */
.tr-tl{position:relative;height:76px;border-radius:16px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.12);
  touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none;margin:0 6px}
.tr-tl canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;transition:opacity .3s}
.tr-tl.loading canvas{opacity:.45;animation:trBreath 1.2s ease-in-out infinite alternate}
@keyframes trBreath{to{opacity:.25}}
.tr-sel{position:absolute;top:0;bottom:0;background:rgba(249,174,0,.14);box-shadow:inset 0 2px 0 #F9AE00,inset 0 -2px 0 #F9AE00;pointer-events:none}
.tr-ph{position:absolute;top:6px;bottom:6px;width:2px;margin-left:-1px;border-radius:1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
.tr-h{position:absolute;top:-8px;bottom:-8px;width:28px;margin-left:-14px;display:grid;place-items:center;cursor:ew-resize;touch-action:none;z-index:2}
.tr-h i{display:block;width:10px;height:100%;border-radius:6px;background:linear-gradient(180deg,#FFD36B,#F9AE00);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 12px -4px rgba(0,0,0,.7);position:relative;transition:transform .3s var(--lg-spring)}
.tr-h i::before{content:"";position:absolute;inset:38% 3px;border-inline:1px solid rgba(35,20,0,.45)}
.tr-h:hover i,.tr-tl.dragging .tr-h i{transform:scaleX(1.25)}
.tr-h:focus-visible{outline:none}
.tr-h:focus-visible i{box-shadow:0 0 0 3px rgba(249,174,0,.45),0 4px 12px -4px rgba(0,0,0,.7)}
.tr-ax{display:flex;justify-content:space-between;margin:6px 6px 0;font:500 12px/1.3 var(--f-meta);color:var(--faint);font-variant-numeric:tabular-nums}

.tr-ends{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.tr-end{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px 8px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.tr-end small{font:600 12.5px/1.3 var(--f-meta);color:var(--warm)}
.tr-end b{font-weight:200;font-size:32px;line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.tr-adj{display:flex;gap:2px;margin-top:4px}
.tr-adj .pill{height:34px;min-width:44px;padding:0 10px;color:var(--text);font-weight:600}
.tr-adj .pill.here{color:var(--warm)}

.tr-said{margin:12px 4px 0;padding:8px 12px;border-radius:14px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.12);font-size:16px;line-height:1.9;font-weight:400;color:rgba(255,255,255,.72);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.tr-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 4px 0}
.tr-len{font:400 14px/1.3 var(--f-meta);color:var(--muted)}
.tr-len b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.tr-pv{display:inline-flex;align-items:center;gap:6px;color:var(--text)}
.tr-pv svg{width:18px;height:18px;color:var(--primary)}
.tr-pv.on{background:rgba(249,174,0,.16)}
.tr-go{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;margin-top:10px}
.tr-go button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:16px;font:700 16px/1 var(--f-body)}
.tr-go svg{width:20px;height:20px}
.tr-dl{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:var(--text)}
.tr-dl:hover{background:rgba(255,255,255,.16)}
.tr-go .btn{padding:0}
.trim.busy .tr-go button{opacity:.55;pointer-events:none}
.tr-st{min-height:18px;margin:8px 4px 0;text-align:center;font:500 13.5px/1.4 var(--f-meta);color:var(--warm);font-variant-numeric:tabular-nums}
.tr-st:empty{min-height:0;margin:0}

/* ---- התמלול בדרך: עדין, במקום שבו התמלול יופיע ---- */
.tx-soon{display:flex;align-items:flex-start;gap:12px;margin-top:16px;padding:12px 16px;border-radius:24px;border:1px dashed rgba(255,255,255,.28);background:linear-gradient(180deg,rgba(22,40,62,.6),rgba(8,18,30,.7));color:var(--muted)}
.tx-soon svg{flex:none;width:22px;height:22px;margin-top:2px;color:var(--faint)}
.tx-soon b{display:block;font-weight:650;font-size:15.5px;color:rgba(255,255,255,.86);line-height:1.35}
.tx-soon small{display:block;font:300 13.5px/1.5 var(--f-meta)}

/* תג תמלול על כרטיס */
.card .art{position:relative}
.txb.tx-card{position:absolute;top:8px;inset-inline-start:8px;background:rgba(8,22,38,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(110,231,183,.35);pointer-events:none}

/* מחשב רחב עם תמלול: הטור השמאלי דביק — כשהחיתוך פתוח העטיפה מתכווצת כדי שהכל ייכנס */
@media (min-width:1100px){
  .sheet-in:has(.sheet-tx:not([hidden])):has(#sTrim:not([hidden])) .sheet-cover .cv{width:min(220px,24vh);height:min(220px,24vh)}
  .sheet-in:has(.sheet-tx:not([hidden])):has(#sTrim:not([hidden])) .sheet-cover{margin:0 0 12px}
  /* הטור כבר גבוה מהמסך — מבטלים את ההדבקה כדי שכפתורי ההורדה והשיתוף יהיו נגישים בגלילה */
  .sheet-in:has(.sheet-tx:not([hidden])):has(#sTrim:not([hidden])) .sheet-main{position:static}
}
@media (max-width:420px){
  .tl-b{padding-inline:10px 12px;gap:6px;font-size:13.5px}
  /* טלפון צר: "מהרגע הזה" כאייקון בלבד, כדי שכל הכלים ייכנסו בשורה אחת */
  #tMoment{width:40px;padding:0;justify-content:center}
  #tMoment span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tr-end b{font-size:28px}
}
@media (prefers-reduced-motion:reduce){#tEnh.on svg,.tr-tl.loading canvas{animation:none}}
/* שיפור קול פעיל אבל מושהה (Safari במהירות שאינה 1×) */
.tl-b.on.idle{background:var(--glass-fill);border-style:dashed;box-shadow:none}
.tl-b.on.idle svg{animation:none;color:var(--muted)}

.tx-soon .tx-ask{margin-top:10px}
.tx-soon .tx-ask:disabled{opacity:.7;cursor:default}