/* 
 * 画面デザイン・スタイルシート
 * このファイルはアプリケーション全体の装飾（CSS）を担当します。
 */
      @keyframes wave-shine {
        0% {
          background-position: 0% 100%;
          opacity: 0;
        }
        10% {
          opacity: 1;
        }
        90% {
          opacity: 1;
        }
        100% {
          background-position: 100% 0%;
          opacity: 0;
        }
      }
      .tile-wave-container::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
          to top right,
          transparent 0%,
          rgba(59, 130, 246, 0) 40%,
          rgba(59, 130, 246, 0.4) 50%,
          rgba(59, 130, 246, 0) 60%,
          transparent 100%
        );
        background-size: 300% 300%;
        background-position: 0% 100%;
        opacity: 0;
        z-index: 10;
        mix-blend-mode: screen;
        border-radius: inherit;
      }
      .tile-wave-active::after {
        animation: wave-shine 0.8s ease-out forwards;
      }
      .tile-delay-0::after {
        animation-delay: 0s;
      }
      .tile-delay-1::after {
        animation-delay: 0.1s;
      }
      .tile-delay-2::after {
        animation-delay: 0.2s;
      }
      .tile-delay-3::after {
        animation-delay: 0.3s;
      }
      body {
        font-family:
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
      }
      ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }
      ::-webkit-scrollbar-track {
        background: #020617;
      }
      ::-webkit-scrollbar-thumb {
        background: #1e293b;
        border-radius: 4px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #334155;
      }
      .pmda-badge {
        background-color: #006eb7;
        width: 64px;
        transition: all 0.2s;
      }
      .pmda-badge:hover {
        opacity: 0.8;
        transform: translateY(-1px);
      }
      .pmda-badge-search {
        background-color: #3b82f6;
        width: 64px;
        transition: all 0.2s;
      }
      .pmda-badge-search:hover {
        opacity: 0.8;
        transform: translateY(-1px);
      }
      .generic-tag {
        background: #064e3b;
        color: #34d399;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 700;
      }
      .expired-row {
        background-color: rgba(30, 41, 59, 0.3);
        color: #64748b;
      }
      th,
      td {
        white-space: nowrap;
      }
      @keyframes pulse-red {
        0%,
        100% {
          opacity: 1;
          transform: scale(1);
        }
        50% {
          opacity: 0.7;
          transform: scale(1.2);
        }
      }
      @keyframes pulse-amber {
        0%,
        100% {
          opacity: 1;
          transform: scale(1);
        }
        50% {
          opacity: 0.7;
          transform: scale(1.1);
        }
      }
      .mic-listening {
        color: #ef4444 !important;
      }
      .mic-listening i {
        animation: pulse-red 1.5s infinite;
      }
      .mic-preparing {
        color: #f59e0b !important;
      }
      .mic-preparing i {
        animation: pulse-amber 1.5s infinite;
      }
      #fuzzy-label {
        font-size: 14px;
        padding: 4px 14px;
        background: linear-gradient(
          135deg,
          rgba(245, 158, 11, 0.2),
          rgba(245, 158, 11, 0.05)
        );
        border: 1px solid rgba(245, 158, 11, 0.4);
        box-shadow: 0 0 15px rgba(245, 158, 11, 0.1);
        text-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
        letter-spacing: 0.1em;
        transition: all 0.3s ease;
      }
      .shrink-text {
        display: inline-block;
        white-space: nowrap;
        transform-origin: center;
      }
      .shelf-text {
        color: #cbd5e1 !important;
      }
      #search-canvas-container {
        position: absolute;
        top: -60px;
        left: -60px;
        width: calc(100% + 120px);
        height: calc(100% + 120px);
        pointer-events: none;
        z-index: 101;
        opacity: 1;
        transition: opacity 0.6s ease;
      }
      #search-input:placeholder-shown:not(:focus) ~ #search-canvas-container {
        opacity: 1;
      }
      #search-input:placeholder-shown:not(:focus) {
        border-color: transparent !important;
        box-shadow: none !important;
      }
      .pin-effect-gather {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 24px;
        margin-top: -12px;
        margin-left: -12px;
        border-radius: 50%;
        background-color: currentColor;
        pointer-events: none;
        z-index: 0;
        animation: pin-gather 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }
      .pin-effect-diffuse {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 24px;
        margin-top: -12px;
        margin-left: -12px;
        border-radius: 50%;
        background-color: transparent;
        border: 2px solid currentColor;
        pointer-events: none;
        z-index: 0;
        animation: pin-diffuse 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }
      @keyframes pin-gather {
        0% {
          transform: scale(2.5);
          opacity: 0;
        }
        50% {
          transform: scale(1);
          opacity: 0.8;
        }
        100% {
          transform: scale(0.2);
          opacity: 0;
        }
      }
      @keyframes pin-diffuse {
        0% {
          transform: scale(0.2);
          opacity: 0.8;
        }
        100% {
          transform: scale(2.5);
          opacity: 0;
        }
      }

      /* チュートリアルモーダル用追加スタイル */
      #app-body-wrapper {
        transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        transform-origin: bottom center;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .app-scaled-down {
        transform: scale(0.8);
      }
      .tutorial-backdrop {
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.1);
        pointer-events: auto;
      }
      .pop-tooltip {
        position: absolute;
        background: #ffffff;
        border: 3px solid #3b82f6;
        border-radius: 16px;
        padding: 16px 20px;
        color: #1e293b;
        font-weight: 700;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        z-index: 10000;
        font-size: 16px;
        line-height: 1.5;
        pointer-events: auto;
      }
      .pop-tooltip p {
        margin: 0;
      }
      .pop-tooltip .tooltip-title {
        font-size: 18px;
        color: #2563eb;
        margin-bottom: 6px;
        display: block;
      }
      .pop-tooltip .tooltip-desc {
        font-size: 15px;
        color: #475569;
        font-weight: normal;
      }

      /* 吹き出しのしっぽ（Tail）定義 */
      .pop-tooltip:not(.multi-tail)::after {
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        background: #ffffff;
        border-style: solid;
        border-color: #3b82f6;
        border-width: 0 3px 3px 0; /* 右と下のボーダーのみ */
        border-radius: 2px;
      }

      .tooltip-tail {
        position: absolute;
        width: 14px;
        height: 14px;
        background: #ffffff;
        border-style: solid;
        border-color: #3b82f6;
        border-width: 0 3px 3px 0;
        border-radius: 2px;
        bottom: -9px;
        transform: rotate(45deg);
      }

      /* 方向 */
      .tail-down::after {
        bottom: -9px;
        transform: rotate(45deg);
      }
      .tail-up::after {
        top: -9px;
        transform: rotate(225deg);
      }
      .tail-right::after {
        right: -9px;
        transform: rotate(-45deg);
      }
      .tail-left::after {
        left: -9px;
        transform: rotate(135deg);
      }

      /* しっぽの位置合わせ */
      .tail-pos-center::after {
        left: calc(50% - 7px);
      }
      .tail-pos-left-25::after {
        left: calc(25% - 7px);
      }
      .tail-pos-left::after {
        left: 32px;
      }
      .tail-pos-right-25::after {
        right: calc(25% - 7px);
        left: auto;
      }
      .tail-pos-right::after {
        right: 32px;
      }
      .tail-pos-top::after {
        top: 32px;
      }
      .tail-pos-bottom::after {
        bottom: 32px;
      }

      @keyframes softPop {
        0% {
          transform: scale(0.95);
          opacity: 0;
        }
        100% {
          transform: scale(1);
          opacity: 1;
        }
      }
      .soft-pop {
        animation: softPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }

      @keyframes tooltipPopBounce {
        0% { transform: scale(0.3) rotate(-3deg); opacity: 0; }
        50% { transform: scale(1.1) rotate(2deg); opacity: 1; }
        75% { transform: scale(0.95) rotate(-1deg); opacity: 1; }
        100% { transform: scale(1) rotate(0deg); opacity: 1; }
      }
      .tooltip-hidden {
        opacity: 0 !important;
        transform: scale(0.3) !important;
        pointer-events: none;
      }
      .tooltip-animate-pop {
        animation: tooltipPopBounce 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      }

      .video-play-btn {
        margin-top: 8px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #3b82f6;
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 6px 12px;
        font-size: 12px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.2s;
      }
      .video-play-btn:hover {
        background: #2563eb;
        transform: scale(1.05);
      }
      .loop-soft-effect {
        transform: scale(0.97);
        box-shadow: 0 0 20px 8px rgba(255, 222, 89, 0.6);
        border: 4px solid #ffde59;
      }
      .video-player-wrapper {
        background: #0f172a;
        padding: 8px;
        border-radius: 16px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        transition:
          transform 0.25s ease,
          box-shadow 0.25s ease,
          border 0.25s ease;
        border: 4px solid transparent;
      }
      #video-blackout-overlay {
        position: absolute;
        inset: 0;
        background: #000;
        border-radius: 8px;
        opacity: 0;
        pointer-events: none;
        z-index: 10;
      }

      /* Schedule App Styles */
      #schedule-app-container {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      }
      .sched-sort-icon::after {
        content: '↕';
        opacity: 0.3;
        margin-left: 4px;
      }
      .sched-sort-asc .sched-sort-icon::after { content: '↑'; opacity: 1; }
      .sched-sort-desc .sched-sort-icon::after { content: '↓'; opacity: 1; }

      /* スピンボタン非表示 */
      input[type=number]::-webkit-inner-spin-button, 
      input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none; 
        margin: 0; 
      }
      input[type=number] {
        -moz-appearance: textfield;
      }