/* ==================== TAILWIND CUSTOM STYLES ==================== */

/* 非表示の入力フィールド (TextArea) */
#text-input {
  /* position: absolute; removed to make it flow */
  /* left: -9999px; removed */
  /* opacity: 0; removed */
  width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
  display: block;
  /* Ensure it is displayed */
  height: 100%;
  /* Changed from 180px to 100% for flex layout */
  /* min-height: 180px; Removed */
  resize: none;
}

/* インラインIME変換中の文字 */
.ime-composing-inline {
  border-bottom: 2px solid #ff6b35;
  background-color: rgba(255, 107, 53, 0.1);
  color: #ff6b35 !important;
  font-weight: 700;
}

[data-theme="dark"] .ime-composing-inline {
  border-bottom-color: #ff8c69;
  background-color: rgba(255, 140, 105, 0.15);
  color: #ff8c69 !important;
}

/* 文字状態のスタイル */
.untyped-char {
  color: #4b5563;
  /* Gray-600 */
}

[data-theme="dark"] .untyped-char {
  color: #9ca3af;
  /* Gray-400 */
}

.current-char {
  background: #cce7ff !important;
  color: #0056b3 !important;
  border-bottom: 3px solid #339fff !important;
  /* border-radius: 4px !important; Remove full border for underline style if preferred, keeping box for now */
  border-radius: 4px !important;
  animation: subtleBlink 1.2s infinite !important;
  font-weight: 600 !important;
  /* z-index: 20 !important; */
  /* position: relative !important; */
  padding: 0 2px !important;
}

[data-theme="dark"] .current-char {
  background: #003d80 !important;
  color: #99cfff !important;
  border-color: #339fff !important;
}

/* Cursor Blink Variables */
.current-char {
  --blink-bg-1: #cce7ff;
  --blink-border-1: #339fff;
  --blink-bg-2: #99cfff;
  --blink-border-2: #1e90ff;
}

[data-theme="dark"] .current-char {
  --blink-bg-1: #003d80;
  --blink-border-1: #339fff;
  --blink-bg-2: #00244d;
  --blink-border-2: #1e90ff;
}

@keyframes subtleBlink {

  0%,
  50% {
    background: var(--blink-bg-1);
    border-color: var(--blink-border-1);
  }

  51%,
  100% {
    background: var(--blink-bg-2);
    border-color: var(--blink-border-2);
  }
}

.typed-correct {
  /* background: #dcfce7 !important; Removed bg to keep it cleaner, or keep subtle */
  color: #10b981 !important;
  /* Emerald 500 */
  font-weight: 600 !important;
  /* border-radius: 4px !important; */
  /* padding: 2px 4px !important; */
  /* border: 1px solid #86efac !important; */
  /* position: relative !important; */
}

[data-theme="dark"] .typed-correct {
  /* background: #14532d !important; */
  color: #34d399 !important;
  /* border-color: #166534 !important; */
}

.typed-incorrect {
  background: #fee2e2 !important;
  color: #ef4444 !important;
  /* Red 500 */
  font-weight: 600 !important;
  /* text-decoration: line-through !important; */
  /* border-radius: 4px !important; */
  /* padding: 2px 4px !important; */
  border-bottom: 2px solid #ef4444 !important;
  /* position: relative !important; */
}

[data-theme="dark"] .typed-incorrect {
  background: #7f1d1d !important;
  color: #f87171 !important;
  border-color: #f87171 !important;
}

.typed-locked {
  /* background: transparent !important; */
  color: #059669 !important;
  /* Emerald 600 */
  font-weight: 600 !important;
  /* position: relative !important; */
  /* opacity: 0.8; */
}

[data-theme="dark"] .typed-locked {
  color: #10b981 !important;
}

/* IME変換スタイル */
.ime-composing {
  /* background: linear-gradient(135deg, #000000 0%, #333333 100%) !important; */
  /* color: #ffffff !important; */
  /* font-weight: 700 !important; */
  text-decoration: underline wavy #ff6b35;
  /* border: 3px solid #ff6b35 !important; */
  /* border-radius: 6px !important; */
  /* padding: 3px 6px !important; */
  /* margin: 0 2px !important; */
  /* position: relative !important; */
  /* z-index: 30 !important; */
  /* box-shadow: 0 0 15px rgba(255, 107, 53, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; */
  /* animation: imeGlow 1s ease-in-out infinite alternate !important; */
}


@keyframes imeGlow {
  0% {
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: #ff6b35;
  }

  100% {
    box-shadow: 0 0 25px rgba(255, 107, 53, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border-color: #ff8c69;
  }
}

/* IME状態インジケーター */
.ime-indicator {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #ff6b35 0%, #ff8c69 100%);
  color: white;
  padding: 10px 18px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.5), 0 0 15px rgba(255, 107, 53, 0.3);
  z-index: 9999;
  opacity: 0;
  transform: translateY(-15px) scale(0.9);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.ime-indicator.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* IME preview styles removed */

/* キーボタン */
.key-button {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  border: 2px solid #99cfff;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  font-weight: 600;
  color: #0073e6;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  min-width: 45px;
  text-align: center;
  transition: all 0.3s ease-out;
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .key-button {
  background: rgba(255, 255, 255, 0.1);
  color: #66b7ff;
  border-color: #339fff;
}

.key-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #1e90ff 0%, #0073e6 100%);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.key-button:hover::before {
  opacity: 0.1;
}

.key-button.alternative {
  border-color: #d4d4d4;
  color: #525252;
  opacity: 0.7;
}

[data-theme="dark"] .key-button.alternative {
  border-color: #525252;
  color: #a3a3a3;
}

.key-plus,
.key-or {
  font-size: 1.125rem;
  color: #737373;
  margin: 0 0.5rem;
  font-weight: 500;
}

[data-theme="dark"] .key-plus,
[data-theme="dark"] .key-or {
  color: #a3a3a3;
}



/* アニメーション無効化（アクセシビリティ） */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* フォーカススタイル */
button:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #1e90ff;
  outline-offset: 2px;
}

/* ハイコントラストモードサポート */
@media (prefers-contrast: high) {
  .current-char {
    border-width: 3px !important;
  }
}

/* ==================== LINE TRACING STYLES ==================== */

#typing-container {
  /* position: relative; */
  /* Styles moved to Tailwind classes in HTML */
  scroll-behavior: smooth;
}


.line-row {
  /* position: relative; */
  width: 100%;
  /* min-height: 1.4em; removed to match textarea line-height */
  /* margin-bottom: 2px; removed to match textarea flow */

  /* display: flex; removed, simple block flow */
  /* justify-content: flex-start; */
  /* padding: 8px 0; */
  border-radius: 4px;
  /* transition: all 0.3s ease; */
  /* opacity: 0.4; */
  /* filter: blur(0.5px); */
}

/*
.line-row.active {
  background: rgba(59, 130, 246, 0.1);
  opacity: 1;
  filter: none;
  transform: none;
  box-shadow: none;
}
*/

/* Removed overlay structure styles (ref-layer, typed-layer) as they are no longer needed */


.typed-char-incorrect {
  color: #dc2626;
  background-color: rgba(254, 226, 226, 0.4);
  text-decoration: underline wavy #dc2626 2px;
}

[data-theme="dark"] .typed-char-incorrect {
  color: #f87171;
  background-color: rgba(127, 29, 29, 0.4);
}

/* Inline IME Composition */
.ime-composing-char {
  color: #f97316 !important;
  /* Force visibility over transparent parent */
  border-bottom: 2px solid #f97316;
  background: rgba(249, 115, 22, 0.2);
  /* Slightly darker background */
  z-index: 10;
  position: relative;
}

[data-theme="dark"] .ime-composing-char {
  color: #fb923c !important;
  border-bottom-color: #fb923c;
  background: rgba(251, 146, 60, 0.2);
}

/* Return Mark for visible newlines */
.return-mark {
  font-family: sans-serif;
  /* Distinct font for symbol */
  font-size: 0.8em;
  margin-left: 4px;
  vertical-align: middle;
  opacity: 0.5;
}

.return-mark.correct {
  color: #059669;
  /* Match typed-char-correct */
  opacity: 1;
}

.return-mark.incorrect {
  color: #dc2626;
  /* Match typed-char-incorrect */
  opacity: 1;
}

.return-mark.untyped {
  color: #94a3b8;
  /* Match ref-layer roughly */
}

[data-theme="dark"] .return-mark.untyped {
  color: #475569;
}

[data-theme="dark"] .ime-composing-char {
  color: #fb923c;
  border-bottom-color: #fb923c;
}

/* ==================== SCROLLBAR STYLES ==================== */
/* Custom rounded scrollbars for a modern look */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 9999px;
  margin: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.5);
  /* gray-400 equivalent with opacity */
  border-radius: 9999px;
  border: 2px solid transparent;
  /* Creates padding effect inside track */
  background-clip: content-box;
  transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.8);
  /* gray-500 equivalent */
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  /* slate-400 equivalent */
  border: 2px solid transparent;
  background-clip: content-box;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(203, 213, 225, 0.6);
  /* slate-300 equivalent */
  border: 2px solid transparent;
  background-clip: content-box;
}