/* delo.css — Indikator dela (thinking pad): iskra, valovnica, poskakujoč napis.
   (razbito iz enotnega styles.css; vrstni red povezav v index.html je pomemben) */
/* Thinking pad = Claudov znak (koralna iskra, poskakuje) + valovnica + napis koraka.
   Pad je obstojen element (izris ga ne ustvarja znova), zato animacije tečejo
   neprekinjeno tudi med menjavanjem koraka. */
.bubble.tipka .dela-claude {
  position: relative; display: block; width: 24px; height: 27px; flex-shrink: 0;
}
.bubble.tipka .dela-claude svg {
  display: block; width: 24px; height: 24px;
  fill: #d97757;                                  /* uradna koralna barva Claude Code */
  transform-origin: 50% 100%;
  filter: drop-shadow(0 1px 4px rgba(217,119,87,0.4));
  animation: claudeSkok 0.95s cubic-bezier(0.33, 0, 0.3, 1) infinite,
             claudeNagib 1.9s ease-in-out infinite;   /* rahlo zibanje v ritmu skoka */
}
/* Senca pod znakom: v zraku se stisne in zbledi, ob pristanku razširi. */
.bubble.tipka .claude-senca {
  position: absolute; left: 50%; bottom: 0; width: 14px; height: 3px; margin-left: -7px;
  border-radius: 50%; background: rgba(217,119,87,0.45); filter: blur(1.5px);
  animation: claudeSenca 0.95s cubic-bezier(0.33, 0, 0.3, 1) infinite;
}
@keyframes claudeSkok {
  0%   { transform: translateY(0) scale(1, 0.94); }
  18%  { transform: translateY(-6px) scale(0.97, 1.05); }
  46%  { transform: translateY(-7px) scale(1, 1.02); }
  74%  { transform: translateY(0) scale(1.07, 0.9); }
  88%  { transform: translateY(-1px) scale(1, 1); }
  100% { transform: translateY(0) scale(1, 0.94); }
}
@keyframes claudeNagib { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes claudeSenca {
  0%, 100% { transform: scaleX(1); opacity: 0.45; }
  46%      { transform: scaleX(0.55); opacity: 0.15; }
  74%      { transform: scaleX(1.15); opacity: 0.55; }
}
/* Ločnica med ikono in napisom */
.bubble.tipka .tipka-locnica {
  width: 1px; height: 22px; flex-shrink: 0;
  background: linear-gradient(180deg, transparent, rgba(70,197,150,0.5), transparent);
}
/* Valovnica: polzi naprej, konca pa se z masko stopita v nič — nič škatle, prosto plava. */
.bubble.tipka .dela-val { display: block; flex-shrink: 0; width: 58px; height: 14px; }
.bubble.tipka .dela-val svg {
  display: block; width: 58px; height: 14px; overflow: visible;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.bubble.tipka .val-premik { animation: valDrsi 1.9s linear infinite; }
.bubble.tipka .dela-val path {
  fill: none; stroke: var(--green-bright); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
  animation: valGlow 2.4s ease-in-out infinite;
}
@keyframes valDrsi { from { transform: translateX(0); } to { transform: translateX(-58px); } }
@keyframes valGlow {
  0%, 100% { stroke: #2f906f; }
  50%      { stroke: var(--glow); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--glow) 70%, transparent)); }
}
/* Napis: črke poskakujejo v zaporedju — val teče skozi besedo. */
.bubble.tipka .crke { display: inline-flex; white-space: pre; }
.bubble.tipka .crke span {
  display: inline-block; will-change: transform;
  animation: crkaSkok 1.7s ease-in-out infinite;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes crkaSkok { 0%, 62%, 100% { transform: translateY(0); } 28% { transform: translateY(-2.6px); } }
@keyframes utrip { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
@keyframes tipkaPulz { 0%, 100% { box-shadow: 0 0 0 0 rgba(70,197,150,0); } 50% { box-shadow: 0 0 0 5px rgba(70,197,150,0.13); } }
@keyframes tipkaVstop {
  from { opacity: 0; transform: translateY(8px) scale(0.94); filter: blur(2px); }
  60%  { opacity: 1; filter: blur(0); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .bubble.tipka { animation: none; }
  .bubble.tipka .tipka-label { transition: none; opacity: 0.9; }
  .bubble.tipka .crke { animation: none; }
  .bubble.tipka .dela-claude svg, .bubble.tipka .claude-senca,
  .bubble.tipka .val-premik, .bubble.tipka .dela-val path,
  .bubble.tipka .crke span { animation: none; }
  .bubble.tipka .dela-val path { stroke: var(--green-bright); opacity: 0.6; }
}

/* Ikona seznama nalog (prej emoji 📝). */
.nal-znak { display: inline-flex; align-items: center; color: var(--green-bright); flex: none; }
.nal-znak svg { width: 15px; height: 15px; display: block; }
/* Ikona v gumbu „Nalagam starejša" (prej ⏳). */
.starejsa .star-ik { display: inline-flex; align-items: center; margin-right: 0.3rem; }
.starejsa .star-ik svg { width: 14px; height: 14px; display: block; }