/* public-chat 専用スタイル (sm0202 P4: native /public-chat 用に route スコープ化)。
   元コード: web/public-chat.html:17-116 を忠実移植。フルページ CSS (独自 :root + body/html/*) だったため、
   全規則を `.sm-public-chat` wrapper 配下へスコープし、vars を wrapper に定義。global を汚さない。
   旧 body の全画面フレックスは wrapper (min-height:100dvh; display:flex; column) で再現。 */

.sm-public-chat {
  --bg:#0b0f1a; --bg-2:#141a28; --bg-3:#1e2638; --line:#2a3045;
  --text:#ecf0f9; --text-2:#9aa3bf; --muted:#6b7488;
  --accent:#5b8cff; --accent-2:#7ba8ff; --user:#5b8cff;
  --bot-bg:#1a2238; --bot-border:#2a3a5a;
  --gold:#f0b73a; --danger:#f87171; --success:#4ade80;
  --shadow: 0 8px 32px rgba(0,0,0,.4);
  background:var(--bg); color:var(--text);
  font-family:-apple-system,'SF Pro Text','Hiragino Sans','Noto Sans JP',sans-serif;
  display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; -webkit-font-smoothing:antialiased;
}
.sm-public-chat.theme-light {
  --bg:#f7f8fc; --bg-2:#fff; --bg-3:#eef1f8; --line:#dde2ec;
  --text:#1a1f2e; --text-2:#4b5269; --muted:#8a92a5;
  --accent:#2563eb; --accent-2:#3b82f6; --user:#2563eb;
  --bot-bg:#fff; --bot-border:#e3e7f0;
  --shadow: 0 8px 32px rgba(15,30,50,.10);
}
.sm-public-chat * { box-sizing:border-box }

/* ヘッダー */
.sm-public-chat header { padding:14px 18px; border-bottom:1px solid var(--line); background:var(--bg-2); display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:10;-webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px) }
.sm-public-chat header .logo { width:38px; height:38px; border-radius:10px; object-fit:cover; box-shadow: 0 0 0 1px var(--line) }
.sm-public-chat header h1 { margin:0; font-size:15px; font-weight:700; letter-spacing:.02em }
.sm-public-chat header p { margin:1px 0 0; font-size:11px; color:var(--text-2) }
.sm-public-chat header .status-dot { width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow: 0 0 8px var(--success); display:inline-block; margin-right:4px }
.sm-public-chat header .theme-btn { background:var(--bg-3); border:1px solid var(--line); color:var(--text); border-radius:999px; padding:6px 11px; font-size:14px; cursor:pointer; transition: transform .15s, background .15s, border-color .15s, box-shadow .15s, color .15s, opacity .15s }
.sm-public-chat header .theme-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent) }

/* メイン */
.sm-public-chat main { flex:1; display:flex; flex-direction:column; max-width:780px; width:100%; margin:0 auto; padding:14px 14px calc(100px + env(safe-area-inset-bottom)); position:relative }

/* お客様情報バナー */
.sm-public-chat .customer-banner { background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin-bottom:12px; font-size:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.sm-public-chat .customer-banner .pill { background:rgba(74,222,128,.10); color:var(--success); border:1px solid rgba(74,222,128,.30); padding:3px 8px; border-radius:999px; font-weight:600; font-size:10px }
.sm-public-chat .customer-banner .name { font-weight:700; color:var(--text) }
.sm-public-chat .customer-banner .meta { color:var(--text-2); font-size:11px }
.sm-public-chat .customer-banner .edit { margin-left:auto; background:transparent; border:1px solid var(--line); color:var(--text-2); border-radius:6px; padding:3px 9px; font-size:11px; cursor:pointer }
.sm-public-chat .customer-banner .edit:hover { color:var(--accent); border-color:var(--accent) }

/* メッセージ */
.sm-public-chat .messages { flex:1; padding:6px 0; min-height:340px; display:flex; flex-direction:column; gap:14px }
.sm-public-chat .msg-row { display:flex; gap:10px; max-width:92%; animation: sm-pc-msg-in .25s ease-out }
.sm-public-chat .msg-row.user { margin-left:auto; flex-direction:row-reverse }
.sm-public-chat .avatar { width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; box-shadow: 0 2px 6px rgba(0,0,0,.2) }
.sm-public-chat .avatar.bot { background: linear-gradient(135deg, var(--accent), var(--gold)) }
.sm-public-chat .avatar.user { background: linear-gradient(135deg, var(--user), #2563eb) }
.sm-public-chat .msg { padding:11px 15px; border-radius:16px; word-break:break-word; line-height:1.7; font-size:14px; white-space:pre-wrap; max-width:100%; box-shadow: 0 1px 2px rgba(0,0,0,.05) }
.sm-public-chat .msg-row.bot .msg { background:var(--bot-bg); border:1px solid var(--bot-border); color:var(--text); border-top-left-radius:4px }
.sm-public-chat .msg-row.user .msg { background:var(--user); color:#fff; border-top-right-radius:4px }
.sm-public-chat .msg-row.system-note .msg { background:rgba(240,183,58,.06); border:1px solid rgba(240,183,58,.30); color:var(--gold); font-size:13px; max-width:100%; border-radius:12px }
.sm-public-chat .msg-meta { font-size:10px; color:var(--muted); margin-top:4px; padding: 0 4px }
.sm-public-chat .msg-row.user .msg-meta { text-align:right }

/* タイピング (3点) */
.sm-public-chat .typing { display:inline-flex; align-items:center; gap:4px; padding:14px 18px }
.sm-public-chat .typing span { width:7px; height:7px; background:var(--text-2); border-radius:50%; animation: sm-pc-typing 1.2s infinite ease-in-out }
.sm-public-chat .typing span:nth-child(2) { animation-delay: .15s }
.sm-public-chat .typing span:nth-child(3) { animation-delay: .30s }
@keyframes sm-pc-typing { 0%, 60%, 100% { transform: translateY(0); opacity:.4 } 30% { transform: translateY(-5px); opacity:1 } }
@keyframes sm-pc-msg-in { from { opacity:0; transform: translateY(8px) } to { opacity:1; transform: translateY(0) } }

/* 入力エリア (下固定) */
.sm-public-chat .input-bar { position:fixed; left:0; right:0; bottom:0; background:var(--bg-2); border-top:1px solid var(--line); padding:10px 14px calc(12px + env(safe-area-inset-bottom));-webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px); z-index:10 }
.sm-public-chat .attachments { max-width:780px; margin:0 auto 8px; display:flex; gap:8px; flex-wrap:wrap }
.sm-public-chat .att-preview { position:relative; width:64px; height:64px; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:var(--bg-3) }
.sm-public-chat .att-preview img, .sm-public-chat .att-preview video { width:100%; height:100%; object-fit:cover; display:block }
.sm-public-chat .att-preview .att-label { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.6); color:#fff; font-size:9px; padding:2px 4px; text-align:center }
.sm-public-chat .att-remove { position:absolute; top:2px; right:2px; background:rgba(0,0,0,.65); color:#fff; border:0; border-radius:50%; width:18px; height:18px; cursor:pointer; font-size:11px; line-height:18px; padding:0; display:flex; align-items:center; justify-content:center }
.sm-public-chat .input-wrap { max-width:780px; margin:0 auto; display:flex; gap:8px; align-items:flex-end; background:var(--bg-3); border:1px solid var(--line); border-radius:18px; padding:6px 8px 6px 8px; transition:border .15s }
.sm-public-chat .input-wrap:focus-within { border-color:var(--accent); box-shadow: 0 0 0 3px rgba(91,140,255,.1) }
/* sm0225 (ai-fix-11): 添付アイコンを send-btn と同じ 38x38 の正円に (旧: padding+border-radius:50% で
   非正方形=楕円ホバー背景になり妙に見えた)。1行時に textarea と高さが揃い縦位置も安定する。 */
.sm-public-chat .attach-btn { background:transparent; border:0; margin:0; cursor:pointer; width:38px; height:38px; display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--text-2); border-radius:50%; transition: transform .15s, background .15s, border-color .15s, box-shadow .15s, color .15s, opacity .15s; flex-shrink:0 }
.sm-public-chat .attach-btn:hover { background:rgba(91,140,255,.10); color:var(--accent) }
/* sm0225 (ai-fix-11): 1行時に高さ 38px (= line-height 22 + padding 16) となりボタンと揃う。
   box-shadow:none は下記 :focus と併せてグローバル style.css の textarea:focus 内側リング(内枠)を打ち消す。 */
.sm-public-chat .input-wrap textarea { flex:1; background:transparent; color:var(--text); border:0; outline:none; box-shadow:none; font-family:inherit; font-size:14px; resize:none; min-height:22px; max-height:140px; padding:8px 0; line-height:22px }
.sm-public-chat .input-wrap textarea::placeholder { color:var(--muted) }
/* フォーカス枠は .input-wrap:focus-within に一本化。global の textarea:focus(box-shadow) を無効化して二重枠を防ぐ。 */
.sm-public-chat .input-wrap textarea:focus { border:0; outline:none; box-shadow:none }
.sm-public-chat .send-btn { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border:0; border-radius:50%; width:38px; height:38px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition: transform .15s, background .15s, border-color .15s, box-shadow .15s, color .15s, opacity .15s; box-shadow: 0 2px 8px rgba(91,140,255,.4) }
.sm-public-chat .send-btn:hover:not(:disabled) { transform: scale(1.08) }
.sm-public-chat .send-btn:disabled { opacity:.4; cursor:not-allowed; box-shadow:none }
.sm-public-chat .send-btn svg { width:18px; height:18px; fill:#fff }
.sm-public-chat .input-hint { max-width:780px; margin: 5px auto 0; font-size:10px; color:var(--muted); text-align:center }

/* エラー */
.sm-public-chat .err { background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.30); color:var(--danger); padding:12px 14px; border-radius:10px; margin:12px 0; font-size:13px }

/* フッター */
.sm-public-chat footer { padding:10px 18px; font-size:10px; color:var(--muted); text-align:center; border-top:1px solid var(--line); background:var(--bg-2) }

/* レスポンシブ */
@media (max-width: 600px) {
  .sm-public-chat main { padding:10px 10px calc(100px + env(safe-area-inset-bottom)) }
  .sm-public-chat .msg-row { max-width:96% }
  .sm-public-chat .avatar { width:30px; height:30px; font-size:12px }
}

@media (prefers-reduced-motion: reduce) {
  .sm-public-chat .msg-row { animation: none !important; }
  .sm-public-chat .typing span { animation-duration: 3s !important; }
}