/* =========================================
   GVA Bridge - Base Styles
   JSが動的にUIを構築するため、ここでは
   共通リセットとJSが参照するクラスのみ定義
   ========================================= */

/* Reset & Base */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #1a1a2e;
  color: #ecf0f1;
}

/* Jitsi IFrame */
#jitsi-video-container iframe {
  border: none !important;
  border-radius: 0 !important;
}

/* 通話ボタンのパルスアニメーション */
@keyframes talk-pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.talk-active {
  animation: talk-pulse 1.5s ease-in-out infinite;
}

/* 通話ボタン */
.talk-btn {
  transition: color 0.2s ease;
}

/* ホバーはポインターデバイスのみ（スマホ除外） */
@media (hover: hover) {
  .talk-btn:hover {
    color: var(--btn-color) !important;
  }

  .talk-btn.talk-active:hover {
    background: #fff !important;
    color: var(--btn-color) !important;
  }
}

.talk-btn:active {
  filter: brightness(0.9);
}

/* スクロールバー非表示（Chrome/Safari） */
::-webkit-scrollbar {
  display: none;
}

/* =========================================
   ニュースティッカー
   ========================================= */
.ticker-scroll {
  animation: ticker-slide 120s linear infinite;
}

@keyframes ticker-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =========================================
   国旗フルスクリーンオーバーレイ
   ========================================= */
.flag-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  animation: flag-in 0.4s ease forwards;
}

.flag-overlay.fade-out {
  animation: flag-out 0.3s ease forwards;
}

.flag-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: flag-zoom 4s ease forwards;
}

/* スマホポートレートではティッカー非表示 */
@media (max-width: 768px) and (orientation: portrait) {
  #news-ticker { display: none !important; }
}

/* PWAモードではボタン行に下余白を追加 */
@media (display-mode: standalone) {
  #talk-buttons { padding-bottom: 8px !important; }
}

@keyframes flag-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes flag-out {
  from { opacity: 1; transform: scale(1.05); }
  to   { opacity: 0; transform: scale(1.1); }
}

@keyframes flag-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}