/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* モバイル最適化 */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html,
body {
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
}

body {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  position: relative;
  font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
}

/* スクロールバーのスタイリング（モバイル） */
::-webkit-scrollbar {
  width: 4px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

/* 入力フォーカス時のズーム防止（iOS） */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  font-size: 16px !important;
}

/* タッチ操作の最適化 */
button,
a {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* メッセージエリアのスクロール最適化 */
[data-chat-target="messages"] {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  touch-action: pan-y;
  will-change: scroll-position;
}

/* iOS Safari: fixed ヘッダーが img コンポジットレイヤーより背面に描画されるバグ対策
 * transform: translate3d(0,0,0) でヘッダーを独立した GPU レイヤーに昇格させる。
 * z-index は同一スタックで確実に効かせるためここで指定。 */
.header-gpu {
  z-index: 9999;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* キーボード表示時のレイアウト調整 */
@supports (padding: max(0px)) {
  .keyboard-safe {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* トーク画面: fixedにmax-w-mdで中央寄せ（mx-autoはfixedに効かないためcalcで計算） */
.room-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: max(0px, calc(50% - 224px));
  right: max(0px, calc(50% - 224px));
}

/* キャラクターサムネイル（896x384 = 7:3比率）のアスペクト比固定 */
.character-thumbnail {
  aspect-ratio: 896 / 384;
}

/* 認証ページのグラデーション背景はスマホ幅（max-w-md = 28rem）のみ */
@media (min-width: 28rem) {
  .auth-gradient {
    background-image: none;
    background-color: white;
  }
}