/* 页 1 · 悬浮团团（设计 3.3）：入口是 regular 玻璃，气泡是纸，提醒是墨点。猫静止，黄不出现。
   位置由 floating.js 写 transform；按压与拖起用独立的 scale 属性，不与定位抢 transform。 */
.tt-fl {
  position: fixed; left: 0; top: 0; z-index: var(--b-z-fab);
  display: inline-flex; align-items: center; gap: var(--b-sp-1);
  height: var(--b-fab-size); padding: 0 var(--b-sp-4) 0 var(--b-sp-1);
  border-radius: var(--b-radius-pill);
  font-size: var(--b-fs-13); font-weight: 500; color: var(--b-text-2);
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform var(--m-smooth-t) var(--m-spring-smooth), scale var(--m-snappy-t) var(--m-spring-snappy),
    opacity var(--m-fast) linear, visibility 0s linear 0s, color var(--m-snappy-t) var(--m-spring-snappy);
}
.tt-fl img { width: 36px; height: 36px; filter: var(--b-mascot-shadow); pointer-events: none; }
.tt-fl:hover { color: var(--b-text-1); }
.tt-fl:active:not(.is-drag) { scale: var(--m-press); }
.tt-fl.is-drag { cursor: grabbing; scale: 1.04; transition: scale var(--m-snappy-t) var(--m-spring-snappy); }
.tt-fl.is-instant { transition: none; }
.tt-fl.is-away { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--m-fast) linear, visibility 0s linear var(--m-fast); }
.tt-fl:focus-visible { outline: 2px solid var(--b-focus); outline-offset: 3px; }

/* 纯图标形态（演示设置对比项①）：52 圆，猫 40 */
.tt-fl[data-form="icon"] { width: 52px; height: 52px; padding: 0; justify-content: center; }
.tt-fl[data-form="icon"] img { width: 40px; height: 40px; }
.tt-fl[data-form="icon"] .tt-fl-name { display: none; }

/* 墨点：4px，挂在入口右上，「有话没说完」 */
.tt-fl .tt-fl-dot { position: absolute; z-index: 3; top: 9px; right: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--b-text-1); box-shadow: 0 0 0 2px var(--b-glass-bg-thick); }
.tt-fl[data-form="icon"] .tt-fl-dot { top: 8px; right: 8px; }
.tt-fl .tt-fl-dot[hidden] { display: none; }

/* 气泡：纸，贴在入口朝页面中间的一侧；外层定位，内层入场 */
.tt-fl-bubble { position: fixed; left: 0; top: 0; z-index: var(--b-z-fab); width: max-content; max-width: 280px; cursor: pointer; }
.tt-fl-bubble.is-leaving { pointer-events: none; }
.tt-fl-bubble-in {
  position: relative; padding: 9px 34px 10px 14px; border-radius: 14px;
  background: var(--b-bg-card); box-shadow: inset 0 0 0 1px var(--b-line), var(--b-glass-shadow-thick);
  animation: m-rise var(--m-snappy-t) var(--m-spring-smooth) both;
}
.tt-fl-bubble-body { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.tt-fl-bubble-body:focus-visible { outline: 2px solid var(--b-focus); outline-offset: 4px; border-radius: 6px; }
/* 项目名作句首小标题单占一行：长项目名不再挤断正文（「逾期 1 / 天」那种断行） */
.tt-fl-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--b-fs-12); font-weight: 600; line-height: 18px; color: var(--b-text-3); }
.tt-fl-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--b-fs-15); line-height: 1.5; color: var(--b-text-1); text-wrap: pretty; }
/* 按逗号分句：每个分句整体换行，不把「小鹿插画」这类名字拆开 */
.tt-fl-seg { display: inline-block; }
.tt-fl-more.is-weak { font-weight: 500; color: var(--b-text-3); }
.tt-fl-bubble:hover .tt-fl-more.is-weak { color: var(--b-text-1); }
.tt-fl-more { align-self: flex-start; margin-top: 2px; font-size: var(--b-fs-13); font-weight: 600; color: var(--b-text-1); white-space: nowrap; }
.tt-fl-bubble-in { transition: box-shadow var(--m-snappy-t) var(--m-spring-snappy); }
.tt-fl-bubble:hover .tt-fl-bubble-in { box-shadow: inset 0 0 0 1px var(--b-line-strong), var(--b-glass-shadow-thick); }
.tt-fl-bubble:hover .tt-fl-more { text-decoration: underline; text-underline-offset: 3px; }
.tt-fl-x { position: absolute; z-index: 1; top: 7px; right: 7px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--b-radius-pill); color: var(--b-text-3); transition: background-color var(--m-snappy-t) var(--m-spring-snappy), color var(--m-snappy-t) var(--m-spring-snappy); }
.tt-fl-x svg { width: 12px; height: 12px; stroke-width: 1.8; }
.tt-fl-x:hover { color: var(--b-text-1); background: var(--b-neutral-tint); }

@media (prefers-reduced-motion: reduce) {
  .tt-fl, .tt-fl.is-away { transition: none; }
  .tt-fl-bubble-in { animation: none; }
}
html[data-reduced="1"] .tt-fl, html[data-reduced="1"] .tt-fl.is-away { transition: none; }
html[data-reduced="1"] .tt-fl-bubble-in { animation: none; }