/* ==========================================================================
   FingerLetter Premium Design Stylesheet (Clean Full-Screen Edition)
   ========================================================================== */

:root {
  --bg-main: #06070d;
  --bg-app: #0b0c13;
  --bg-card: rgba(17, 18, 30, 0.75);
  --bg-card-solid: #11121e;
  --bg-sheet: rgba(18, 20, 32, 0.96);
  --bg-header: rgba(18, 19, 31, 0.8);
  --bg-input-area: rgba(18, 19, 31, 0.9);
  --bg-msg-in: rgba(255, 255, 255, 0.06);
  
  --border-light: rgba(255, 255, 255, 0.08);
  --border-focus: rgba(0, 134, 173, 0.5);
  
  --color-primary: #0086ad;
  --color-primary-grad: linear-gradient(135deg, #0086ad 0%, #00a5bf 100%);
  --color-success: #10b981;
  --color-success-grad: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --color-danger: #f43f5e;
  --color-danger-grad: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  --color-warning: #f59e0b;
  
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dark: #0f172a;
  
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Outfit', var(--font-family);
  
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ライトテーマ用の配色定義 */
body.light-theme {
  --bg-main: #e2e8f0;
  --bg-app: #f8fafc;
  --bg-card: rgba(255, 255, 255, 0.75);
  --bg-card-solid: #ffffff;
  --bg-sheet: rgba(255, 255, 255, 0.96);
  --bg-header: rgba(241, 245, 249, 0.85);
  --bg-input-area: rgba(241, 245, 249, 0.9);
  --bg-msg-in: rgba(0, 0, 0, 0.05);
  
  --border-light: rgba(0, 0, 0, 0.08);
  --border-focus: rgba(0, 134, 173, 0.4);
  
  --text-main: #0f172a;
  --text-muted: #475569;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  overflow: hidden;
  height: 100%;
  height: 100dvh;
  width: 100%;
  position: fixed;
}

body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-family);
  width: 100%;
  height: 100%;
  height: 100dvh;
  position: fixed;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(0, 134, 173, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(0, 165, 191, 0.12) 0%, transparent 40%);
}

/* ==========================================================================
   Layout & Container
   ========================================================================== */
.app-container {
  width: 100%;
  max-width: 600px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
}

.app-main {
  width: 100%;
  height: 100%;
  background-color: var(--bg-app);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
}

@media (max-width: 600px) {
  .app-container {
    max-width: 100%;
  }
  .app-main {
    border-left: none;
    border-right: none;
    box-shadow: none;
  }
}

.status-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-right svg {
  width: 14px;
  height: 14px;
}

.status-battery {
  font-family: var(--font-display);
  font-size: 11px;
}

/* Screen Contents */
.screen-content {
  flex: 1;
  position: relative;
  overflow: hidden;
  background-color: var(--bg-app);
}

/* Base style for Screens */
.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.98);
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.1);
  z-index: 10;
}

.screen.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  z-index: 20;
}

/* ==========================================================================
   Screen: Chat App Screen
   ========================================================================== */
.chat-screen {
  background-color: var(--bg-app);
}

/* App Header */
.app-header {
  height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  background: var(--bg-header);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
  z-index: 30;
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-btn {
  background: none;
  border: none;
  color: var(--text-main);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.header-btn:hover {
  background: var(--bg-msg-in);
}

.header-btn:active {
  transform: scale(0.92);
}

/* 線画のままだと平面的なので、影を落として浮かせる。
   画像に置き換えるとテーマ追従と鮮明さを失うため、SVGのまま扱う。 */
.header-btn svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1.5px 2px rgba(0, 0, 0, 0.55));
}

/* 絵文字のアイコン（🔔 ➕ 😊 📎 📍）にも同じ影を与えて揃える */
.toggle-notif-btn,
.sticker-btn,
.attach-btn,
#start-new-chat-btn {
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.app-identity {
  display: flex;
  flex-direction: column;
}

.app-title-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.2px;
  /* 上を明るく・中ほどを締め・下でまた明るくすると、金属のような厚みが出る。
     単純な2色グラデーションだと平らに見えるため段を分けている。 */
  background: linear-gradient(180deg,
    #d9f0f7 0%,
    #6bc9e2 34%,
    #0086ad 52%,
    #005e82 72%,
    #4fbcd8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 文字が透明なので text-shadow は使えない。形に沿う drop-shadow を重ねる。 */
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.60))
    drop-shadow(0 0 10px rgba(0, 165, 191, 0.35));
}

.app-status-badge {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.status-indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-indicator-dot.online {
  background-color: var(--color-success);
  box-shadow: 0 0 6px var(--color-success);
}

.status-indicator-dot.muted {
  background-color: var(--color-danger);
  box-shadow: 0 0 6px var(--color-danger);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.toggle-notif-btn {
  font-size: 18px;
}

.toggle-notif-btn.muted {
  filter: grayscale(1) opacity(0.5);
}

/* Chat History area */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* 一覧→トーク再入室時などに、上から下へスクロールするアニメーションを見せず、
     常に最後のメッセージ位置で即座に表示するため smooth は使わない（instant） */
  scroll-behavior: auto;
  padding-bottom: 24px;
}

.chat-messages::-webkit-scrollbar {
  width: 4px;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.message {
  max-width: 75%;
  display: flex;
  flex-direction: column;
}

/* 登場の動きは、本当に新しく届いた分にだけ付ける。
   吹き出しは既読や識別番号が付くと作り直されるため、常に付けておくと
   そのたびに現れ直してちらつく（手書きの再生中は特に目立つ）。 */
.message.msg-new {
  animation: msg-appear 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
}

.message.outgoing {
  align-self: flex-end;
}

.message.incoming {
  align-self: flex-start;
}

.message .msg-content {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap; /* 入力した改行をそのまま表示する */
  /* 親(.message)はflex columnのため、既定のstretchだと吹き出しが兄弟要素である
     時刻表示（例:「8/2 09:39 🔕(通知OFF)」）の幅まで引き伸ばされ、
     短い本文でも右側に大きな余白ができてしまう。本文の長さに合わせる。 */
  align-self: flex-start;
}

.message.outgoing .msg-content {
  /* 上半分に光を重ねて、アイコンと同じ「艶のある塊」に見せる */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.02) 55%),
    var(--color-primary-grad);
  color: #fff;
  border-bottom-right-radius: 4px;
  /* 暗い背景では黒い影が沈んで見えないので、面の階調と上端の光を主役にする。
     外側は黒い影と色の光を重ねて、背景から浮かせる。 */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.50),
              0 4px 14px rgba(0, 134, 173, 0.45),
              inset 0 2px 0 rgba(255, 255, 255, 0.55),
              inset 0 -4px 10px rgba(0, 0, 0, 0.30);
  align-self: flex-end;
}

.message.incoming .msg-content {
  /* 一様な塗りだと平坦に見えるので、ごく浅い階調と上端の光で厚みを出す */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.20),
              inset 0 -4px 10px rgba(0, 0, 0, 0.22),
              0 7px 18px rgba(0, 0, 0, 0.50);
  color: var(--text-main);
  border-bottom-left-radius: 4px;
}

.message.system-msg {
  max-width: 90%;
  align-self: center;
  text-align: center;
  animation: fade-in 0.5s ease;
}

.message.system-msg .msg-content {
  background: rgba(0, 134, 173, 0.08);
  border: 1px solid rgba(0, 134, 173, 0.15);
  color: var(--text-muted);
  font-size: 11.5px;
  border-radius: 12px;
  padding: 8px 12px;
  align-self: center; /* システムメッセージは中央寄せを保つ */
}

.msg-time {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 5px;
  text-align: right;
  letter-spacing: 0.2px;
}

/* ==========================================================================
   返信（引用）・いいね・メッセージ操作シート
   ========================================================================== */

/* メッセージ内の返信引用ブロック */
.msg-reply-quote {
  display: block;
  border-left: 3px solid rgba(255, 255, 255, 0.5);
  padding: 3px 8px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.35;
  opacity: 0.95;
  white-space: normal; /* 親のpre-wrapを引き継がず、余分な空白/空行を出さない */
}
.message.incoming .msg-reply-quote {
  border-left-color: var(--color-primary);
  background: rgba(0, 134, 173, 0.1);
}
.reply-quote-sender {
  display: block;
  font-weight: 700;
  font-size: 10.5px;
  opacity: 0.85;
  margin-bottom: 1px;
}
.reply-quote-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* いいねバッジ（吹き出しの下・時刻の上に、本文と重ならないよう配置） */
.msg-like-badge {
  font-size: 12px;
  background: var(--bg-card-solid);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 1px 6px;
  line-height: 1.4;
  margin-top: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  width: fit-content;
}
.message.outgoing .msg-like-badge {
  align-self: flex-end;
  margin-right: 4px;
}
.message.incoming .msg-like-badge {
  align-self: flex-start;
  margin-left: 4px;
}

/* 入力欄上の返信バー */
.reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 134, 173, 0.12);
  border: 1px solid var(--border-focus);
  border-radius: 12px;
  padding: 6px 10px;
  margin-bottom: 6px;
}
.reply-bar-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.reply-bar-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-primary);
}
.reply-bar-preview {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reply-bar-cancel {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

/* メッセージ操作シート（下から出るアクションメニュー） */
.msg-action-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 13, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 120;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  animation: fade-in 0.2s ease;
}
.msg-action-sheet {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: sheet-slide-up 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes sheet-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.msg-action-btn {
  width: 100%;
  padding: 15px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-card-solid);
  border: 1px solid var(--border-light);
  color: var(--text-main);
  transition: var(--transition-smooth);
}
.msg-action-btn:active {
  transform: scale(0.98);
}
.msg-action-btn.danger {
  color: var(--color-danger);
}
.msg-action-btn.cancel {
  color: var(--text-muted);
  font-weight: 500;
}

/* メッセージ本文中のリンク */
.msg-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
  font-weight: 600;
}
.message.incoming .msg-link {
  color: var(--color-primary);
}
.message.outgoing .msg-link {
  color: #fff;
}

/* 「既読」表示（自分の送信メッセージが相手に読まれた時に表示） */
.read-receipt {
  font-size: 10px;
  color: var(--color-primary);
  font-weight: 700;
  margin-right: 5px;
  vertical-align: middle;
}

/* .msg-time はライト/ダーク両対応の var(--text-muted) を使うため個別指定は不要 */

/* Chat Input Form */
.chat-input-area {
  padding: 12px 16px calc(18px + env(safe-area-inset-bottom)) 16px;
  background: var(--bg-input-area);
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.chat-input-area input[type="text"],
.chat-input-area textarea {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 10px 16px;
  color: var(--text-main);
  font-size: 15px;
  outline: none;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.45),
              inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

/* メッセージ入力テキストエリア（初期は1行、改行するたびに自動で広がる） */
.chat-input-area textarea {
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 1.5;
  resize: none;           /* ユーザーによる手動リサイズは無効（高さは自動調整） */
  overflow-y: auto;
  min-height: 44px;       /* 初期状態は1行分の高さ */
  max-height: 150px;      /* 超えたらスクロール */
}

.chat-input-area input[type="text"]:focus,
.chat-input-area textarea:focus {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.08);
}

.send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.02) 58%),
    var(--color-primary-grad);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-bounce);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.50),
              0 4px 14px rgba(0, 134, 173, 0.50),
              inset 0 2px 0 rgba(255, 255, 255, 0.70),
              inset 0 -4px 10px rgba(0, 0, 0, 0.32);
  flex-shrink: 0;
}

.send-btn:active {
  transform: scale(0.90);
  box-shadow: 0 1px 3px rgba(0, 134, 173, 0.35),
              inset 0 2px 6px rgba(0, 0, 0, 0.30);
}

.send-btn:active {
  transform: scale(0.9);
}

.send-btn svg {
  width: 18px;
  height: 18px;
  transform: translate(1px, -1px);
}

/* ==========================================================================
   Settings Sheet (Slide up)
   ========================================================================== */
.settings-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 85%;
  background: var(--bg-sheet);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.1, 0.76, 0.55, 0.94);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
}

.settings-sheet.open {
  transform: translateY(0);
}

.sheet-handle {
  width: 40px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin: 10px auto 0 auto;
}

.sheet-header {
  padding: 16px 20px 8px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sheet-header h2 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
}

.close-sheet-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid var(--border-light);
  color: var(--text-main);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  transition: var(--transition-smooth);
}

.close-sheet-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-main);
}

.close-sheet-btn:active {
  transform: scale(0.92);
}

body.light-theme .close-sheet-btn {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
}

.sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 20px 30px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.setting-info {
  display: flex;
  flex-direction: column;
}

.setting-label-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.setting-desc-text {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.setting-divider {
  border: none;
  height: 1px;
  background-color: var(--border-light);
  margin: 4px 0;
}

.setting-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.setting-sub-panel {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 12px;
  overflow: hidden;
  max-height: 500px;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s, padding 0.3s;
  opacity: 1;
}

.setting-sub-panel.collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border: none;
  pointer-events: none;
  margin: 0;
}

.time-range-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 0;
}

.time-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.time-field label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.time-field input[type="time"] {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 8px;
  color: var(--text-main);
  font-family: var(--font-display);
  font-size: 14px;
  text-align: center;
  outline: none;
  transition: var(--transition-smooth);
}

.time-field input[type="time"]:focus {
  border-color: var(--color-primary);
}

.time-arrow {
  color: var(--text-muted);
  font-size: 16px;
  margin-top: 15px;
}




.range-slider-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.range-slider-wrapper label {
  font-size: 12px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}

.range-slider-wrapper label span {
  color: var(--color-primary);
  font-weight: 700;
}

.range-slider-wrapper input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.range-slider-wrapper input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 134, 173, 0.5);
  transition: transform 0.1s;
}

.range-slider-wrapper input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.25);
}

.apply-settings-btn {
  background: var(--color-primary-grad);
  border: none;
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  padding: 14px 0;
  border-radius: 14px;
  cursor: pointer;
  width: 100%;
  margin-top: 10px;
  box-shadow: 0 10px 20px rgba(0, 134, 173, 0.25);
  transition: var(--transition-bounce);
}

.apply-settings-btn:active {
  transform: scale(0.97);
}

/* Toggle Switches */
.switch-toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-toggle {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 34px;
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-toggle:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.switch-toggle input:checked + .slider-toggle {
  background: var(--color-primary-grad);
}

.switch-toggle input:checked + .slider-toggle:before {
  transform: translateX(20px);
}

/* ==========================================================================
   Google Login Panel
   ========================================================================== */
.auth-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-app);
  z-index: 40;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.auth-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  border-radius: 24px;
  padding: 36px 24px;
  width: 100%;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.auth-icon {
  font-size: 54px;
}

.auth-card h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.auth-card p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

.google-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #ffffff;
  color: #1f2937;
  border: none;
  border-radius: 12px;
  padding: 14px 20px;
  width: 100%;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition-bounce);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.google-login-btn svg {
  width: 18px;
  height: 18px;
}

.google-login-btn:active {
  transform: scale(0.98);
}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes msg-appear {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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


/* Customize Leaflet styles */
.leaflet-container {
  font-family: var(--font-family) !important;
}

.leaflet-bar a {
  background-color: var(--bg-card-solid) !important;
  color: var(--text-main) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.leaflet-bar a:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Trash button warning */
.trash-btn {
  color: var(--text-muted);
  transition: var(--transition-smooth);
}
.trash-btn:hover {
  color: var(--color-danger) !important;
}
.trash-btn.confirm-delete {
  color: var(--color-danger) !important;
  animation: pulse-trash 0.8s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes pulse-trash {
  from {
    transform: scale(1);
    filter: drop-shadow(0 0 2px rgba(244, 63, 94, 0.2));
  }
  to {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px rgba(244, 63, 94, 0.6));
  }
}

/* ==========================================================================
   User ID Features
   ========================================================================== */
.my-id-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(0, 134, 173, 0.08);
  border: 1px solid rgba(0, 134, 173, 0.15);
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 4px;
  cursor: pointer;
  align-self: flex-start;
  transition: var(--transition-smooth);
}

.my-id-badge:hover {
  background: rgba(0, 134, 173, 0.15);
  color: var(--text-main);
  border-color: var(--color-primary);
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(6, 7, 13, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fade-in 0.3s ease;
}

.modal-card {
  /* 色を直に書くと明るいテーマで濃いままになり、黒い箱に黒い文字になる。
     .app-dialog-card と同じく変数を使う（明暗で入れ替わる）。 */
  background: var(--bg-sheet);
  border: 1px solid var(--border-light);
  border-radius: 24px;
  padding: 24px;
  width: 100%;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: scale-up 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1) both;
}

@keyframes scale-up {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}

.modal-card p {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.modal-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.modal-input-wrapper input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--text-main);
  outline: none;
  font-family: monospace;
  font-size: 14px;
  text-align: center;
  letter-spacing: 1px;
  transition: var(--transition-smooth);
}

.modal-input-wrapper input:focus {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.08);
}

.modal-error-text {
  color: var(--color-danger);
  font-size: 10.5px;
  text-align: left;
  margin-left: 4px;
}

.modal-btn-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.modal-btn {
  flex: 1;
  padding: 11px 0;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.modal-btn:active {
  transform: scale(0.97);
}

.modal-btn:not(.primary-btn) {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-light);
  color: var(--text-main);
}

.modal-btn:not(.primary-btn):hover {
  background: rgba(255, 255, 255, 0.1);
}

.modal-btn.primary-btn {
  background: var(--color-primary-grad);
  border: none;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 134, 173, 0.25);
}

.modal-btn.primary-btn:hover {
  filter: brightness(1.1);
}

/* ==========================================================================
   Chat View Split
   ========================================================================== */
.chat-view {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--bg-app);
}

.chat-view.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 25;
}

.talk-list-container {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 8px 0 24px 0;
}

.talk-list-container::-webkit-scrollbar {
  width: 4px;
}

.talk-list-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

/* Talk List Item (LINE-like) */
.talk-item {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  cursor: pointer;
  gap: 14px;
  transition: background 0.2s, transform 0.1s;
}

.talk-item:hover {
  background: rgba(255, 255, 255, 0.02);
}

.talk-item:active {
  background: rgba(255, 255, 255, 0.04);
  transform: scale(0.985);
}

.talk-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.02) 55%),
    linear-gradient(135deg, #0086ad 0%, #00a5bf 100%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45),
              0 3px 10px rgba(0, 134, 173, 0.40),
              inset 0 2px 0 rgba(255, 255, 255, 0.72),
              inset 0 -4px 10px rgba(0, 0, 0, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 134, 173, 0.2);
  flex-shrink: 0;
}

.talk-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.talk-partner-id {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.talk-last-msg {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.talk-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.talk-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  font-weight: 500;
}

.talk-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-primary);
  box-shadow: 0 0 6px var(--color-primary);
}

.delete-talk-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}

.delete-talk-btn:hover {
  background: rgba(244, 63, 94, 0.15);
  color: var(--color-danger);
}

/* ==========================================================================
   Added Features: Behavior Selector, GPS Fetch, Attachments
   ========================================================================== */





#map-expand-btn {
  left: 50px;
  right: auto;
}

/* アクション挙動セレクター（セグメントボタン） */
.behavior-selector-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.behavior-label {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 500;
}

.segment-control {
  display: flex;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 2px;
  width: 100%;
}

.segment-btn {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* 通知ON選択時 */
.segment-btn[data-behavior="ON"].active {
  background: var(--color-primary-grad);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 134, 173, 0.35);
}

/* 消音OFF選択時 */
.segment-btn[data-behavior="OFF"].active {
  background: var(--color-danger-grad);
  color: #fff;
  box-shadow: 0 4px 10px rgba(244, 63, 94, 0.35);
}

/* 設定プレビュープレビューテキストボックス */
.setting-preview-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--border-light);
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-main);
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 8px;
}

.setting-preview-box strong {
  font-weight: 600;
}

.setting-preview-box.on-mode strong {
  color: #a78bfa;
}

.setting-preview-box.off-mode strong {
  color: #fb7185;
}

/* ファイル添付ボタン */
.attach-btn {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.50),
              inset 0 2px 0 rgba(255, 255, 255, 0.38),
              inset 0 -3px 8px rgba(0, 0, 0, 0.30);
  color: var(--text-main);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}

.attach-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--text-muted);
}

.attach-btn:active {
  transform: scale(0.9);
}

/* チャット内添付画像 */
.msg-content img.attached-image {
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  margin-top: 4px;
  display: block;
  cursor: zoom-in;
}

/* 取りに行っている間の場所取り。空のままだと高さ0になり、
   絵が入った瞬間に下の吹き出しが押し下げられて画面が跳ねる。 */
.msg-content img.attached-image:not([src]) {
  width: 180px;
  height: 135px;
  background: var(--bg-card-solid);
  border: 1px solid var(--border-light);
}

/* 画像だけのメッセージは、吹き出しの色で囲まない。
   自分の吹き出しは紫の面なので、写真のまわりに枠が付いたように見える。 */
.message.image-message .msg-content {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

.message.image-message .msg-content img.attached-image {
  margin-top: 0;
  border-radius: 12px;
}

/* 返信の引用が付くときは、引用だけ読めるよう下に少し空ける */
.message.image-message .msg-reply-quote {
  margin-bottom: 6px;
}

/* 相手位置マーカー用のカスタムスタイル（地図で利用するLeaflet用） */
.partner-map-marker {
  background: none;
  border: none;
}

.partner-marker-icon {
  background: #f43f5e;
  border: 2px solid #ffffff;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.8);
  transform: translate(-12px, -12px);
}

/* 一覧上部のステータスバッジ（IDの横） */
.identity-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.my-id-badge, .global-status-badge {
  font-size: 10px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-light);
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.global-status-badge {
  cursor: default;
}

.my-id-badge:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-primary);
}






/* タッチ端末では :hover がタップ後も居座り、ボタンの色が戻らない。
   マウスのある環境だけに限定する。 */
@media (hover: hover) and (pointer: fine) {
}





/* Leaflet Popup Premium Dark/Light theme support */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background-color: var(--bg-card-solid) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.leaflet-popup-content {
  margin: 8px 12px !important;
  line-height: 1.4 !important;
  color: var(--text-main) !important;
}

.leaflet-popup-close-button {
  color: var(--text-muted) !important;
}

/* Settings Version Tag */
.settings-version {
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 16px;
  opacity: 0.7;
}

/* ==========================================================================
   v84 追加機能: スタンプ / 送信取り消し
   ========================================================================== */

/* スタンプ送信ボタン（📎の隣） */
.sticker-btn {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.50),
              inset 0 2px 0 rgba(255, 255, 255, 0.38),
              inset 0 -3px 8px rgba(0, 0, 0, 0.30);
  color: var(--text-main);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}

.sticker-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--text-muted);
}

.sticker-btn:active {
  transform: scale(0.9);
}

/* スタンプ選択パネル */
.sticker-panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 10px;
  margin-bottom: 4px;
  max-height: 220px;
  overflow-y: auto;
  animation: fade-in 0.2s ease;
}

.sticker-panel::-webkit-scrollbar {
  width: 4px;
}

.sticker-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 6px;
}

.sticker-item-img {
  width: 100%;
  height: 38px;
  object-fit: contain;
  display: block;
  /* 立体の絵に合わせて、わずかに影を落として浮かせる */
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

/* メッセージとして送られたスタンプ */
.message.sticker-message .sticker-msg-img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.sticker-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  font-size: 28px;
  line-height: 1;
  padding: 8px 0;
  cursor: pointer;
  transition: transform 0.12s, background 0.2s;
}

.sticker-item:hover {
  background: rgba(0, 134, 173, 0.15);
}

.sticker-item:active {
  transform: scale(0.85);
}

/* 送信されたスタンプ（吹き出しなしの大きな絵文字で表示） */
.message.sticker-message .msg-content {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 2px 4px;
  font-size: 52px;
  line-height: 1.1;
}

/* 画面全体で、長押しやなぞりによる文字の選択を止める。

   長押しの操作メニューは450msで開く。端末の長押し判定はその少し後（約500ms）
   なので、メニューが出たあとに指の下へ来た「返信する」の文字が選ばれ、
   端末の「コピー／共有／すべて選択」がメニューに重なって出ていた。
   選ばれているのは吹き出しではなくメニューのボタンなので、吹き出しだけ
   抑えても直らない。指を置いた場所がどこであれ選ばれないようにする。

   Androidの長押しは contextmenu を出さずに選択を始めるため、
   JS側の preventDefault では止まらない。CSSで抑えるしかない。

   端末では出し分けない。(hover: none) で指の端末だけに絞ってみたが、
   画面に触れるPCなどは hover あり扱いになり、抑止から漏れた。

   文字を写したい場面は、入力欄と、操作メニューの「コピー」で足りる。 */
body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 入力するところと、記録を写したいところは選べるままにする */
input,
textarea,
[contenteditable="true"],
.debug-log-output {
  -webkit-user-select: text;
  user-select: text;
}

/* 送信取り消し済みメッセージ */
.message.unsent .msg-content {
  background: none !important;
  box-shadow: none !important;
  border: 1px dashed var(--border-light) !important;
  color: var(--text-muted) !important;
  font-style: italic;
  font-size: 12px;
}

.unsent-text {
  opacity: 0.85;
}

/* ==========================================================================
   ステータス機能（相手に「今の状態」を知らせる）
   ========================================================================== */

/* 一覧ヘッダーの自分のステータスバッジ */
.my-status-badge {
  font-size: 10px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-light);
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.my-status-badge:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-primary);
}

.my-status-badge.is-set {
  color: var(--text-main);
  border-color: var(--border-focus);
  background: rgba(0, 134, 173, 0.12);
}

/* トークルームヘッダー内のバッジを横並びにする */
.room-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* バッジ内の「相手」「自分」区別ラベル */
.ps-prefix {
  font-size: 9px;
  font-weight: 700;
  opacity: 0.6;
  padding-right: 2px;
  letter-spacing: 0.5px;
}

/* トークルーム内の自分ステータスバッジ（丸みを相手側と揃える） */
.my-status-badge-room {
  margin-top: 2px;
  border-radius: 999px;
  padding: 2px 8px;
}

/* 相手のステータスバッジ（トークルームヘッダー） */
.partner-status-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-light);
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 2px;
}

/* ステータス種別ごとの色分け */
.partner-status-badge.status-available { border-color: rgba(16, 185, 129, 0.6); background: rgba(16, 185, 129, 0.12); }
.partner-status-badge.status-busy      { border-color: rgba(244, 63, 94, 0.6);  background: rgba(244, 63, 94, 0.18); }
.partner-status-badge.status-sleeping  { border-color: rgba(0, 165, 191, 0.6); background: rgba(0, 165, 191, 0.12); }
.partner-status-badge.status-away      { border-color: rgba(245, 158, 11, 0.6); background: rgba(245, 158, 11, 0.12); }

/* ステータス選択モーダルのグリッド（4種類なので2列で並べる） */
.status-option-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}

.status-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-light);
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.status-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.status-option:active {
  transform: scale(0.96);
}

.status-option.selected {
  border-color: var(--color-primary);
  background: rgba(0, 134, 173, 0.18);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
}

.status-option-emoji {
  font-size: 22px;
  line-height: 1;
}

.status-option-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.status-option.selected .status-option-label {
  color: var(--text-main);
}

/* ==========================================================================
   携帯（狭い画面）向け：ヘッダーのステータスバッジを縦積みにして崩れを防ぐ
   ========================================================================== */
@media (max-width: 480px) {
  /* バッジが増えても収まるようヘッダー高さを自動で伸ばす */
  .app-header {
    height: auto;
    min-height: 64px;
    padding: 8px 10px;
  }

  /* 横並びを保つため、ヘッダーの余白とボタンを詰めて幅を空ける */
  .header-left { gap: 8px; }
  .header-right { gap: 2px; }
  .header-btn { width: 32px; height: 32px; }

  /* トークルームの「通知状態／相手／自分」バッジは横に並べる。
     収まらない場合だけ折り返す（nowrapにするとはみ出して崩れるため）。 */
  .room-badge-row {
    gap: 5px;
  }

  .app-status-badge,
  .partner-status-badge,
  .my-status-badge-room {
    font-size: 9px;
  }

  .partner-status-badge,
  .my-status-badge-room {
    padding: 1px 6px;
  }

  .ps-prefix {
    font-size: 8px;
    padding-right: 1px;
  }

  /* 設定済みのステータスは絵文字だけで意味が通るのでラベルを省いて幅を稼ぐ。
     未設定のときは「状態を設定」の案内を残す。 */
  #partner-status-label,
  .my-status-badge-room.is-set .my-status-label {
    display: none;
  }

  /* 一覧ヘッダーの各バッジも幅に収まらなければ折り返す */
  .identity-meta-row {
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

/* ==========================================================================
   添付画像のアプリ内拡大ビューア（クリックで真っ白になる問題の対策）
   ========================================================================== */
.image-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.image-viewer-overlay.open {
  display: flex;
  animation: fade-in 0.2s ease;
}

.image-viewer-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.image-viewer-close {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.image-viewer-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.image-viewer-close:active {
  transform: scale(0.9);
}

/* ==========================================================================
   v86 追加: トークルームから開いた設定シートは相手ごとの設定だけ表示
   ========================================================================== */

/* 通知設定一式は自分用の設定なので、相手についての設定を見る文脈では隠す */
.settings-sheet.partner-map-only .settings-hide-on-partner {
  display: none;
}

/* 相手ごとの設定は一覧から開いたときは畳んでおき、トークからは開く */
.settings-sheet.partner-map-only #partner-config-panel,
.settings-sheet.partner-map-only #partner-config-panel.collapsed {
  max-height: 500px;
  opacity: 1;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  pointer-events: auto;
  transform: none;
}


/* OSMタイルの著作権表示。既定の白背景だと浮くのでダークテーマに馴染ませる */
.leaflet-control-attribution {
  background: rgba(11, 12, 19, 0.65) !important;
  color: var(--text-muted) !important;
  font-size: 9px !important;
  padding: 1px 5px !important;
}

.leaflet-control-attribution a {
  color: var(--text-muted) !important;
}


/* 相手ごとの設定は短いので、シート側の弾みは中で受け止める */
.settings-sheet.partner-map-only .sheet-body {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ==========================================================================
   v86 追加: 起動スプラッシュ（読み込み完了までのちらつき防止）
   ========================================================================== */
.app-splash {
  position: fixed;
  inset: 0;
  /* OSの起動画面との中央位置のずれを補正する（index.htmlのインライン指定と同じ値） */
  padding-top: 24px;
  z-index: 9999;
  /* manifest.json の background_color と同じ値にする。ここがずれると
     OSの起動画面から切り替わった瞬間に色が変わって見えてしまう。
     テーマ変数は使わない（OSの起動画面はライト/ダークで変わらないため） */
  background: #0a0b10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s ease;
}

.app-splash.hiding {
  opacity: 0;
  pointer-events: none;
}

.app-splash picture {
  display: contents;
}

/* OSの起動画面と同じ大きさ・同じ画像で表示する。
   動きを付けると別画面だと分かってしまうため、アニメーションは置かない。
   index.html の先頭にも同じ指定がある（外部CSSが届くまでの分）。
   こちらがあとから読み込まれて勝つので、直すときは必ず両方を揃えること。 */
.app-splash-icon {
  /* 画像は大きめに置き、見える丸は clip-path で切る。
     OSの起動画面は maskable の周りを切り落として拡大表示するため、
     同じ見え方にするにはこちらも同じ切り方をする必要がある。
     円の直径 = 画像の幅 × 0.88（実測値）。index.html にも同じ指定がある。 */
  width: min(272px, 76vw);
  height: auto;
  clip-path: circle(44%);
}

/* ==========================================================================
   v86 追加: ライトテーマでの質感調整
   白いハイライト前提の指定はライトでは浮くため、方向を反転させる
   ========================================================================== */
body.light-theme .message.incoming .msg-content {
  background: linear-gradient(180deg, #ffffff, rgba(0, 0, 0, 0.05));
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
              0 4px 12px rgba(0, 0, 0, 0.10);
}

body.light-theme .chat-input-area textarea,
body.light-theme .chat-input-area input[type="text"] {
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.10);
}

/* ライトテーマでは影が濃すぎると汚れて見えるので弱める */
body.light-theme .header-btn svg {
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.22));
}

body.light-theme .toggle-notif-btn,
body.light-theme .sticker-btn,
body.light-theme .attach-btn,
body.light-theme #start-new-chat-btn {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

body.light-theme .sticker-btn,
body.light-theme .attach-btn {
  background: linear-gradient(180deg, #ffffff, rgba(0, 0, 0, 0.04));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ライトテーマでは落ち影が強すぎるので弱め、上端の光も控える */
body.light-theme .app-title-name {
  background: linear-gradient(180deg,
    #8b93f7 0%,
    #0086ad 38%,
    #00728f 55%,
    #005e82 78%,
    #00728f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22));
}

/* ロゴを画像にした見出し。文字向けの装飾（グラデーション・影）は
   画像に二重にかかってしまうため打ち消す。 */
.app-title-logo {
  background: none;
  -webkit-text-fill-color: initial;
  filter: none;
  line-height: 0;
}

.app-logo {
  /* Baloo2はx-heightが大きく、同じ数値でも文字が大きく見えるため
     元のテキスト(18px)より小さめに取る */
  height: 24px;
  width: auto;
  display: block;
}

/* 立体にするのはアプリ名だけにする。トーク画面の相手IDは
   ロゴではなく相手の名前なので、元の落ち着いた表示へ戻す。 */
#room-title-name {
  font-weight: 700;
  letter-spacing: normal;
  background: var(--color-primary-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: none;
}

/* ==========================================================================
   v86 追加: トーク画面ヘッダーの2段表示
   1段目に自分の状態、2段目に相手のID・状態を並べる
   ========================================================================== */
.room-row-self,
.room-row-partner {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.room-row-self {
  margin-bottom: 2px;
}

/* 相手IDはバッジと同じ行に並ぶので、ロゴ用の大きさから通常の見出しへ戻す */
.room-partner-id {
  font-size: 15px;
  line-height: 1.2;
  margin-right: 2px;
}

/* 相手が通知を受け取れないときだけ出るバッジ */
.partner-notify-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-main);
  background: rgba(244, 63, 94, 0.16);
  border: 1px solid rgba(244, 63, 94, 0.55);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .room-partner-id { font-size: 14px; }
  .partner-notify-badge { font-size: 9px; padding: 1px 6px; }
  .room-row-self,
  .room-row-partner { gap: 5px; }
}

body.light-theme .partner-notify-badge {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.45);
}

/* 一覧ヘッダーも2段にする。
   1段目: ロゴと自分のID / 2段目: 自分のステータスと通知状態 */
.list-row-title,
.list-row-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.list-row-title {
  margin-bottom: 3px;
}

@media (max-width: 480px) {
  .list-row-title,
  .list-row-status { gap: 6px; }
}

/* 相手についての設定。トークから設定を開いたときだけ出す */
.partner-only-setting {
  display: none;
}

.settings-sheet.partner-map-only .partner-only-setting {
  display: flex;
  margin-top: 10px;
}

/* アカウントの削除。押し間違いが起きないよう、他の設定から離して、
   赤で「ここから先は違う」と分かるようにする。 */
.danger-zone {
  margin-top: 28px;
  padding: 14px;
  border: 1px solid rgba(220, 80, 80, 0.35);
  border-radius: 12px;
  background: rgba(220, 80, 80, 0.06);
}

.danger-title {
  color: #e06a6a;
  margin-top: 0;
}

.danger-desc {
  margin: 8px 0 14px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
}

.danger-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(220, 80, 80, 0.5);
  background: transparent;
  color: #e06a6a;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.danger-btn:active {
  background: rgba(220, 80, 80, 0.15);
}

.danger-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* 設定画面の小さな説明書き */
.settings-note {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
}

.settings-donate a {
  color: #6bc9e2;
  text-decoration: underline;
}

/* 期限が過ぎて消えた画像の代わりに出す文字 */
.image-expired {
  display: inline-block;
  padding: 10px 12px;
  border: 1px dashed var(--border-light);
  border-radius: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

/* 明るいテーマで見えなくなっていたもの。
   白の薄い面（rgba(255,255,255,0.05) など）を直に書いていたため、
   白地の上では背景と同化して消えていた。明るい側では黒の薄い面にする。 */

/* 切ってあるときのトグル。入っているときは色が付くので問題なかった */
body.light-theme .slider-toggle {
  background-color: rgba(0, 0, 0, 0.22);
}

/* ダイアログの「キャンセル」など、主でないボタン */
body.light-theme .modal-btn:not(.primary-btn) {
  background: rgba(0, 0, 0, 0.05);
}
body.light-theme .modal-btn:not(.primary-btn):hover {
  background: rgba(0, 0, 0, 0.09);
}

/* 状態（対応可・取り込み中など）を選ぶ画面 */
body.light-theme .status-option {
  background: rgba(0, 0, 0, 0.04);
}
body.light-theme .status-option:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* 明るいテーマで見えなくなっていたものの続き。
   いずれも白地の上に置かれるので、黒の薄い面に替える。
   画像の拡大表示（暗い覆いの上）と地図の操作ボタン（地図の上）は、
   明るいテーマでも下地が暗い／地図なので、そのままでよい。 */

body.light-theme .msg-reply-quote { background: rgba(0, 0, 0, 0.06); }
body.light-theme .setting-sub-panel { background: rgba(0, 0, 0, 0.03); }

/* 明るい配色では #e06a6a が薄く見える。読める濃さに落とす。 */
body.light-theme .danger-title,
body.light-theme .danger-btn { color: #c0392b; }
body.light-theme .danger-zone { background: rgba(220, 80, 80, 0.05); }
body.light-theme .time-field label { background: rgba(0, 0, 0, 0.04); }
body.light-theme .modal-input-wrapper input { background: rgba(0, 0, 0, 0.04); }
body.light-theme .talk-item { background: rgba(0, 0, 0, 0.03); }
body.light-theme .talk-item:hover { background: rgba(0, 0, 0, 0.06); }
body.light-theme .segment-control { background: rgba(0, 0, 0, 0.05); }
body.light-theme .setting-preview-box { background: rgba(0, 0, 0, 0.04); }
body.light-theme .identity-meta-row { background: rgba(0, 0, 0, 0.04); }
body.light-theme .sticker-panel { background: rgba(0, 0, 0, 0.03); }
body.light-theme .sticker-item { background: rgba(0, 0, 0, 0.04); }
body.light-theme .sticker-item:hover { background: rgba(0, 134, 173, 0.12); }
body.light-theme .my-status-badge { background: rgba(0, 0, 0, 0.05); }
body.light-theme .partner-status-badge { background: rgba(0, 0, 0, 0.05); }

/* 位置メッセージの札。押すと地図が開く。 */
.loc-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px;
  cursor: pointer;
}

.loc-card-pin { font-size: 26px; line-height: 1; }

.loc-card-body { display: flex; flex-direction: column; gap: 2px; }

.loc-card-title { font-size: 14px; font-weight: 700; }

.loc-card-hint { font-size: 11px; opacity: 0.75; }

/* 送られた位置を見せる画面 */
.location-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.location-viewer-overlay.open { display: flex; }

.location-viewer-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-sheet);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.location-viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 700;
}

.location-viewer-close {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--bg-card-solid);
  color: var(--text-main);
  font-size: 14px;
  cursor: pointer;
}

/* 地図は縦横比で場所を取る。中身が入る前に高さ0だと作れない。 */
.location-viewer-map {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 60vh;
  background: var(--bg-card-solid);
}

.location-viewer-open {
  display: block;
  padding: 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: var(--color-primary-grad);
}

/* 規約とポリシーへの入口 */
.settings-legal {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.settings-legal a {
  color: #6bc9e2;
  text-decoration: underline;
}

.settings-legal-sep {
  color: var(--text-muted);
}

/* ブロックの操作。押した時点で効くので、保存ボタンとは別の見た目にする */
.block-partner-btn {
  flex-shrink: 0;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid var(--color-danger, #f43f5e);
  border-radius: 10px;
  background: transparent;
  color: var(--color-danger, #f43f5e);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.block-partner-btn.blocked {
  border-color: var(--border-light);
  background: var(--bg-card-solid);
  color: var(--text-main);
}

/* ブロック中に入力欄の代わりに出す帯 */
.blocked-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-card-solid);
  border-top: 1px solid var(--border-light);
}

.blocked-bar-text {
  flex: 1;
  font-size: 12px;
  color: var(--text-sub, #9ca3af);
}

.blocked-bar-btn {
  flex-shrink: 0;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: transparent;
  color: var(--text-main);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

/* 一覧でブロック中であることを示す印 */
.talk-blocked-mark {
  margin-left: 6px;
  font-size: 11px;
}

/* 診断ログ。端末にDevToolsを繋げない場面で経路を追うためのもの */
.debug-log-box {
  margin: 10px 0 4px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--bg-card-solid);
}

.debug-log-box summary {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sub);
  cursor: pointer;
  list-style: none;
}

.debug-log-box summary::-webkit-details-marker {
  display: none;
}

.debug-log-box summary::before {
  content: '\25B8 ';
}

.debug-log-box[open] summary::before {
  content: '\25BE ';
}

.debug-log-output {
  margin: 8px 0 0;
  max-height: 220px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1.55;
  color: var(--text-main);
  white-space: pre-wrap;
  word-break: break-all;
}

.debug-log-clear {
  margin-top: 8px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: transparent;
  color: var(--text-sub);
  cursor: pointer;
}

/* 版の表記。HTML・JavaScript・Service Worker の3つを並べる。
   食い違っていれば、どれが古いキャッシュから読まれているか分かる。 */
.settings-version span {
  display: inline-block;
  margin: 0 5px;
  white-space: nowrap;
}

/* 端末側で通知が許可されていないことを知らせる帯。
   見落とすと「届かない理由が分からない」状態になるため、一覧の先頭に出す。 */
.notify-permission-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid rgba(251, 191, 36, 0.35);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.18), rgba(251, 191, 36, 0.10));
  color: #fbbf24;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

.notify-permission-bar:active {
  background: rgba(251, 191, 36, 0.26);
}

.notify-permission-icon {
  font-size: 15px;
  flex-shrink: 0;
}

body.light-theme .notify-permission-bar {
  background: linear-gradient(180deg, rgba(180, 83, 9, 0.12), rgba(180, 83, 9, 0.06));
  color: #b45309;
}




/* ==========================================================================
   手書きメッセージ
   線の座標をそのまま送るため、表示側は canvas に描き直す。
   紙は薄い色で固定する。テーマで変えると、送った側と受けた側で
   同じ色の線が見えたり見えなかったりするため。
   ========================================================================== */
.ink-sheet {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  flex-direction: column;
  background: var(--bg-main, #0a0b10);
}

.ink-sheet.open {
  display: flex;
}

.ink-sheet-head {
  display: flex;
  align-items: center;
  /* 閉じるボタンを下へ移したので、残るのは切り替えタブだけ */
  justify-content: flex-start;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-light);
}

/* 手書きとドット絵の切り替え */
.ink-mode-tabs {
  display: flex;
  gap: 6px;
}

.ink-mode-tab {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: transparent;
  color: var(--text-sub, #9ca3af);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.ink-mode-tab.active {
  border-color: transparent;
  background: linear-gradient(135deg, #0086ad, #00a5bf);
  color: #fff;
}

/* ドット絵の升目。正方形を保ったまま、空いている場所いっぱいに置く。 */
.dot-canvas-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  min-height: 0;
}

.dot-canvas {
  /* 空いている高さいっぱいに広げ、はみ出すときだけ幅で頭打ちにする。
     どちらの向きでも正方形は崩さない。 */
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  background: #14161d;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  /* 升目のふちをぼかさない。ドット絵は角が立っているほうが正しい。 */
  image-rendering: pixelated;
  touch-action: none;
  cursor: crosshair;
}

body.light-theme .dot-canvas {
  background: #f3f4f6;
}

.dot-tools {
  padding: 0 16px 10px;
}

.dot-colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dot-color {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.dot-color.eraser {
  background: var(--bg-card-solid);
  border-color: var(--border-light);
  color: var(--text-main);
  font-size: 14px;
}

.dot-color.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--color-primary);
}

/* 一覧に並ぶ、自分で作ったスタンプ */
.sticker-item.mine {
  position: relative;
}

.sticker-item-dot {
  /* 絵文字スタンプの見出し画像と高さを揃える。正方形は崩さない。 */
  width: 38px;
  height: 38px;
  display: block;
  margin: 0 auto;
  image-rendering: pixelated;
}

.sticker-del {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}

/* 吹き出しの中のドット絵。絵文字スタンプと同じ大きさに揃える。 */
.message.sticker-message .dot-msg-canvas {
  /* 16の倍数にすると、升目が等しい大きさで並んでにじまない */
  width: 96px;
  height: 96px;
  display: block;
  image-rendering: pixelated;
}

.ink-sheet-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

/* 閉じるボタン。下の操作列の先頭に置く。
   右上に置いていたが、片手で持つと親指が届かない。
   幅は固定にして、隣の操作の場所を食わないようにする。 */
.ink-close-btn {
  flex: 0 0 auto;
  width: 52px;
  min-height: 52px;
  padding: 0;
  touch-action: manipulation;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg-card-solid);
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
}

.ink-close-btn:active {
  background: rgba(255, 255, 255, 0.08);
}

body.light-theme .ink-close-btn:active {
  background: rgba(0, 0, 0, 0.06);
}

.ink-canvas-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  min-height: 0;
}

.ink-canvas {
  /* 縦横はJS側が手書きごとに指定する。ここでは場所いっぱいに広げるだけ。 */
  width: 100%;
  height: 100%;
  /* 実際の紙はJS側でcanvasに塗る。ここは描き終わるまでの下地。 */
  background: #14161d;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  /* 指の動きを全部受け取る。ここだけは画面を送らせない */
  touch-action: none;
  cursor: crosshair;
}

.ink-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px 10px;
}

.ink-colors, .ink-widths {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ink-color {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}

.ink-color.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--color-primary);
}

.ink-width {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-card-solid);
  cursor: pointer;
  padding: 0;
}

.ink-width.active {
  border-color: var(--color-primary);
  background: rgba(0, 134, 173, 0.2);
}

.ink-width-dot {
  display: block;
  border-radius: 50%;
  background: var(--text-main);
}

.ink-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 18px;
}

.ink-action-btn {
  flex: 1;
  /* 押しやすさを優先して大きめに取る。二重タップ待ちも起こさない。 */
  min-height: 52px;
  padding: 14px 8px;
  touch-action: manipulation;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg-card-solid);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ink-send-btn {
  flex: 1.2;
  min-height: 52px;
  padding: 14px 8px;
  touch-action: manipulation;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #0086ad, #00a5bf);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.ink-btn {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
}

/* 吹き出しの中の手書き */
/* 吹き出しの中の手書きは紙を敷かない。線だけが浮いて見えるようにする。 */
.ink-msg-canvas {
  display: block;
  width: 100%;
  height: auto;
  /* 縦横はJS側が手書きごとに指定する。縦長のものが伸びすぎないよう
     高さにも上限を置き、そのぶん幅が縮むようにする。 */
  max-width: 250px;
  max-height: 300px;
  background: transparent;
  cursor: pointer;
}

.message.ink-message .msg-content {
  padding: 6px;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ライトテーマでは紙も明るくする（JS側の塗りと同じ値にすること）。
   吹き出しの中は紙を敷かないので対象外。 */
body.light-theme .ink-canvas {
  background: #f8fafc;
}

/* 手書きで書ける量の残り。上限に近づいてから出す。
   黙って書けなくなると、故障したのかと思われるため。 */
.ink-capacity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 8px;
}

.ink-capacity-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--border-light);
  overflow: hidden;
}

.ink-capacity-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: #fbbf24;
  transition: width 0.15s linear;
}

.ink-capacity.full .ink-capacity-fill {
  background: #ef4444;
}

.ink-capacity-text {
  font-size: 11px;
  font-weight: 600;
  color: #fbbf24;
  white-space: nowrap;
}

.ink-capacity.full .ink-capacity-text {
  color: #ef4444;
}

/* 手書きを初めて開いたときの案内。一度閉じれば二度と出さない。 */
.ink-hint {
  margin: 0;
  padding: 10px 16px 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-sub);
}

.ink-hint strong {
  color: var(--color-primary);
}

.ink-hint-close {
  margin-left: 6px;
  padding: 3px 10px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg-card-solid);
  color: var(--text-main);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

/* 手書きの吹き出しの下に置く小さなボタン。
   長押しの操作メニューは見つけにくいため、よく使う操作はここから押せるようにする。 */
.message.ink-message .msg-content {
  position: relative;
}

.ink-msg-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.ink-msg-act {
  min-width: 34px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--border-light);
  border-radius: 13px;
  background: var(--bg-card-solid);
  color: var(--text-sub);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.ink-msg-act:active {
  background: rgba(0, 134, 173, 0.25);
  color: var(--text-main);
}

/* 自分の吹き出しでは右へ寄せる */
.message.outgoing.ink-message .ink-msg-actions,
.message.outgoing.dot-message .ink-msg-actions {
  justify-content: flex-end;
}

/* ドット絵は絵文字スタンプと同じ場所に出るため、周りの字の大きさを引き継がない */
.message.dot-message .ink-msg-act {
  font-size: 12px;
  line-height: 1;
}

/* アプリ自前の確認画面。
   ブラウザの alert / confirm には発信元のアドレスが必ず付き、消せない。 */
.app-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.app-dialog-card {
  width: 100%;
  max-width: 340px;
  padding: 20px 20px 16px;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  background: var(--bg-card-solid);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

.app-dialog-text {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-main);
  /* 改行をそのまま見せる */
  white-space: pre-wrap;
  word-break: break-word;
}

.app-dialog-actions {
  display: flex;
  gap: 10px;
}

.app-dialog-btn {
  flex: 1;
  padding: 11px 8px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.app-dialog-btn.ok {
  border: none;
  background: linear-gradient(135deg, #0086ad, #00a5bf);
  color: #fff;
  font-weight: 700;
}

/* 添付の選び場所。入力欄のすぐ上に出す。
   OSが出す選択画面は画面のいちばん下に出て、閉じるのに戻るボタンが要る。
   何を添付するかだけでもここで選べれば、指の届く位置で閉じられる。 */
/* スタンプや添付のパネルを開いている間、その裏の画面に触れないようにする。
   パネルは入力欄の上に差し込まれるだけで、上の履歴も見出しもそのまま押せた。
   開いたつもりで下のメッセージを長押ししてしまう。
   透明な覆いを被せ、押されたらパネルを閉じる（LINEなどと同じ動き）。
   入力欄だけは覆いより上に置き、閉じずに書き続けられるようにする。 */
.panel-scrim {
  position: absolute;
  inset: 0;
  z-index: 40;
}

.chat-view .chat-input-area {
  position: relative;
  z-index: 41;
}

.attach-panel {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-card-solid);
}

.attach-choice {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: transparent;
  color: var(--text-main);
  cursor: pointer;
}

.attach-choice:active {
  background: rgba(0, 134, 173, 0.2);
  border-color: var(--color-primary);
}

.attach-choice-icon {
  font-size: 24px;
  line-height: 1;
}

.attach-choice-label {
  font-size: 12px;
  font-weight: 600;
}

/* 古いメッセージを上に足したとき、Chromeは自分でも位置を保とうとする。
   こちらでも高さの差だけ戻しているため、二重にかかって画面が飛ぶ。
   自動のほうを切り、こちらの補正だけが効くようにする。 */
#chat-messages {
  overflow-anchor: none;
}

/* 開いた直後、高さが落ち着くまでは中身を見せない。
   途中の位置で見せると、そこから最後のメッセージまで動く様子が見えてしまう。
   display:none にはしないこと。場所を取らなくなって高さが測れず、
   写真の読み込みも始まらない。 */
.chat-messages {
  transition: opacity 0.12s linear;
}

.chat-messages.room-settling {
  opacity: 0;
  /* 隠すほうは間を置かずに。ここで間を置くと、隠す前の中身が
     薄れていく様子が見えてしまい、隠す意味がなくなる。 */
  transition: none;
}

/* ID設定の注意書き。あとから変えられないので、決める前に読んでもらう。 */
.modal-caution {
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.10);
  color: #fbbf24;
  font-size: 12px;
  line-height: 1.7;
}

body.light-theme .modal-caution {
  background: rgba(180, 83, 9, 0.10);
  color: #b45309;
}

/* 設定に出すID。押せないことが分かるよう、入力欄には見せない。 */
.my-id-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
  white-space: nowrap;
}

/* 一覧・ヘッダで、名前の横に添えるID */
.name-sub-id {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
}

/* IDを相手に伝えるためのボタン。ランダムな文字列を口で伝えるのは無理があるため。 */
.id-share-row {
  display: flex;
  gap: 10px;
  padding: 0 4px 6px;
}

.id-share-btn {
  flex: 1;
  min-height: 44px;
  padding: 10px 8px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg-card-solid);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.id-share-btn.primary {
  border: none;
  background: linear-gradient(135deg, #0086ad, #00a5bf);
  color: #fff;
  font-weight: 700;
}

/* ログインが通ってから状態が反映されるまでの間に出す画面。
   サインイン画面を見せたままにすると、戻されたように見えるため。 */
.signing-in-overlay {
  position: fixed;
  inset: 0;
  z-index: 3500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0b10;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 600;
}

/* 設定の節見出し。1枚にまとめているので、区切りが無いと何の設定か分からない。 */
.settings-section-title {
  margin: 22px 0 8px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.sheet-body > .settings-section-title:first-child {
  margin-top: 4px;
}

/* 保存は設定の並びの終わりに置く。
   下に貼り付けておくと、後ろの項目がその帯の下を通り抜けていき、
   帯の色も設定画面の地の色と違うため、浮いて見えていた。 */
.settings-footer {
  margin-top: 8px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.settings-footer .apply-settings-btn {
  margin: 0;
}

/* 写真を落とせる場所であることを示す覆い。
   落とせると分からないと、そもそも試してもらえない。 */
.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(10, 11, 16, 0.82);
  border: 2px dashed var(--color-primary);
  color: var(--text-main);
  pointer-events: none;
}

.drop-overlay-icon {
  font-size: 40px;
}

.drop-overlay-text {
  font-size: 14px;
  font-weight: 600;
}

/* 曜日の選び場所。指で押す前提なので、押しやすい大きさにする。 */
.weekday-picker {
  margin-top: 14px;
}

.weekday-row {
  display: flex;
  gap: 6px;
  margin: 8px 0 10px;
}

.weekday-btn {
  flex: 1;
  min-height: 40px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: transparent;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.weekday-btn.active {
  border-color: transparent;
  background: linear-gradient(135deg, #0086ad, #00a5bf);
  color: #fff;
}

.weekday-presets {
  display: flex;
  gap: 8px;
}

.weekday-preset {
  padding: 7px 14px;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: transparent;
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.weekday-preset.active {
  border-color: var(--color-primary);
  background: rgba(0, 134, 173, 0.22);
  color: var(--text-main);
}

/* 祝日の扱い。曜日の指定のすぐ下に置く。 */
.weekday-holiday {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-sub);
  cursor: pointer;
}

.weekday-holiday input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
}