/* style.css v=147 */
/* ==========================================
   1. 全体設定・レイアウト（スマホのバグを完全に封じる）
   ========================================== */
html, body { 
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; 
    background: #f0f0f0; 
    margin: 0; 
    padding: 0;
    /* ★修正: 狂いの原因になる「dvh」を捨て、確実な「100%」に戻します */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    overflow: hidden !important; 
}

.main-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: hidden;
}

#app { 
    width: 100%; 
    max-width: 400px; 
    height: 100%; 
    background: #c3dcf0; 
    display: flex; 
    flex-direction: column; 
    position: relative; 
    box-shadow: 0 0 15px rgba(0,0,0,0.2); 
}

.side-panel {
    display: none;
    width: 300px;
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    box-sizing: border-box;
}

/* ==========================================
   2. アプリ内の各パーツ（絶対に潰れないように守る設定）
   ========================================== */
.app-branding { background: #2f3640; color: white; display: flex; justify-content: space-between; align-items: center; padding: 6px 15px; font-size: 11px; z-index: 100; flex-shrink: 0; gap: 8px; overflow: hidden; }
.app-branding .app-title { font-weight: bold; letter-spacing: 0.5px; white-space: nowrap; flex-shrink: 0; }
.app-branding .terms-link { cursor: pointer; opacity: 0.8; text-decoration: underline; padding: 2px 0; }

.banner {
    background: #ffffff; color: #333; display: flex; align-items: center; justify-content: center;
    height: 100px;
    min-height: 100px; /* 320x100 広告に合わせて100pxを維持する */
    max-height: 100px; /* AdMaxが大きいサイズを配信しても高さを固定 */
    overflow: hidden;  /* 100pxを超えた分はクリップ */
    font-size: 13px; font-weight: bold; z-index: 90; flex-shrink: 0; text-align: center;
}

.editor-header { padding: 12px 15px; background: white; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; position: relative; z-index: 50; flex-shrink: 0; gap: 10px; }

.main-action-group {
    display: flex;
    gap: 8px;
    flex: 1;               /* ★全消去ボタン左端までの幅を全部使う */
    justify-content: center; /* ★その中央にボタンを配置 */
}

/* ★追加：青いプレビューボタンのデザイン */
.preview-btn { 
    background: #0984e3; 
    color: white; 
    border: none; 
    padding: 10px 8px; 
    border-radius: 25px; 
    cursor: pointer; 
    font-weight: bold; 
    font-size: 12px; 
    box-shadow: 0 5px 0 #076bb8, 0 8px 10px rgba(0,0,0,0.2); 
    transition: all 0.1s; 
    flex: none;
    width: 180px; 
    text-align: center;
}
.preview-btn:active { 
    transform: translateY(5px); 
    box-shadow: 0 0px 0 #076bb8, 0 2px 5px rgba(0,0,0,0.2); 
}

/* ★修正：既存の赤いボタンを、横並びで綺麗に収まるように少し調整 */
.play-btn { 
    background: #ff4757; 
    color: white; 
    border: none; 
    padding: 10px 8px; /* 少しスリムに */
    border-radius: 25px; 
    cursor: pointer; 
    font-weight: bold; 
    font-size: 12px; /* 13pxから12pxへ */
    box-shadow: 0 5px 0 #cc3945, 0 8px 10px rgba(0,0,0,0.2); 
    transition: all 0.1s; 
    min-width: 0; /* 100pxの制限を解除してスマホ対応 */
    flex: 1; 
}

.control-btns { display: flex; gap: 5px; flex-shrink: 0; }
.sub-btn { background: #f1f2f6; color: #555; border: 1px solid #ccc; padding: 6px 8px; border-radius: 20px; font-size: 11px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

.bg-color-label { display: flex; align-items: center; gap: 4px; background: #f1f2f6; padding: 6px 8px; border-radius: 20px; font-size: 11px; font-weight: bold; color: #333; cursor: pointer; border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.bg-color-picker { opacity: 0; width: 0; height: 0; border: none; padding: 0; position: absolute; }
.color-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #aaa; display: inline-block; background-color: #c3dcf0; }

.line-header {
    background: transparent;
    color: white;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
/* ヘッダー背景画像オーバーレイ */
.header-bg-overlay {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    pointer-events: none;
}
/* ヘッダー内コンテンツはオーバーレイの上に表示 */
.lh-status-row,
.lh-nav-row {
    position: relative;
    z-index: 1;
}

/* 上段：スマホステータスバー */
.lh-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 14px;
    height: 22px;
    position: relative;
}
.lh-status-row .time {
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
}
.lh-status-right {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: white;
}

/* 下段：LINEナビゲーションバー */
.lh-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    height: 44px;
    position: relative;
}
.lh-back {
    font-size: 16px;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 4px;
    opacity: 0.95;
    cursor: default;
    line-height: 1;
    overflow: hidden; /* ★名前が長くてもここでクリップし、左側にはみ出さない */
    min-width: 0;     /* ★flex子要素として正しく縮めるよう許可 */
}
.lh-chevron-svg {
    display: block;
    flex-shrink: 0;
}
.lh-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
}
.lh-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #aaa;
    border: 1.5px solid rgba(255,255,255,0.5);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.lh-name {
    font-size: 16px;
    font-weight: bold;
    color: white;
    letter-spacing: 0.3px;
    white-space: nowrap;
    margin-left: 8px;
    /* input要素のデフォルトスタイルをリセット */
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    padding: 0;
    outline: none;
    /* flexで残りスペースを使い切る */
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.lh-name:focus {
    outline: none;
    border-bottom: 1px solid rgba(255,255,255,0.6);
    cursor: text;
}
.lh-icons {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 70px;
    justify-content: flex-end;
}
.lh-icons svg { display: block; }
.lh-signal-label {
    font-size: 10px;
    font-weight: 600;
    color: white;
    letter-spacing: 0.3px;
}

/* バッテリーアイコン：SVGに移行済み */

.add-controls {
    display: grid;
    grid-template-columns: auto 1fr auto; /* 左右のボタンは自然な幅、中央は残り全部 */
    grid-template-rows: auto auto;
    gap: 8px 10px;
    padding: 12px 10px;
    background: transparent;
    flex-shrink: 0;
    border-top: 1px dashed rgba(0,0,0,0.1);
    align-items: center;
}
/* 四隅のシステムメッセージボタン */
.sys-corner-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 12px;
    padding: 5px 8px;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.15s;
}
.sys-corner-btn:hover { background: rgba(255,255,255,1); border-color: rgba(9,132,227,0.4); }
.sys-corner-btn:active { background: rgba(230,245,255,0.95); }
/* グリッド配置 */
.corner-tl { grid-column: 1; grid-row: 1; }
.corner-tr { grid-column: 3; grid-row: 1; }
.corner-bl { grid-column: 1; grid-row: 2; }
.corner-br { grid-column: 3; grid-row: 2; }

/* 中央のメイン追加ボタン（2行スパン） */
.main-add-center {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%; /* 中央の空きスペースをフルに使う */
}
/* ラベルテキスト（各コーナーボタン内） */
.sys-btn-label {
    font-size: 10px;
    color: #555;
    font-weight: bold;
    white-space: nowrap;
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
}
.add-btn {
    flex: 1; /* 2つの大ボタンでスペースを均等に分け合う魔法のコード */
    padding: 14px 0; /* 上下の高さだけ指定し、横幅は自動調整にお任せ */
    border: none;
    border-radius: 25px; 
    cursor: pointer; 
    font-weight: bold; 
    font-size: 15px; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.15); 
    white-space: nowrap; 
    text-align: center;
    width: auto; /* ★以前の固定幅は削除 */
}

.btn-left { background: #ffffff; color: #333; }
.btn-right { background: #b4ff64; color: #333; }

/* システムメッセージ（中央グレーのピル） */
.message.sys-msg {
    align-self: center;
    justify-content: center;
    position: relative;
    display: flex;
    width: fit-content;
    max-width: 85%; /* ★長いテキストがチャットエリアをはみ出さないよう制限 */
}
.sys-msg-bubble {
    background: rgba(0, 0, 0, 0.28);
    border-radius: 12px;
    padding: 4px 16px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: bold;
    text-align: left;        /* ★修正：center→left。左端固定で右端のみ「...」 */
    white-space: nowrap;
    outline: none;
    cursor: text;
    overflow: hidden;        /* 最大幅を超えたら隠す */
    text-overflow: ellipsis; /* 右端を「...」で省略 */
}
.sys-msg-bubble:focus {
    background: rgba(0, 0, 0, 0.38);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

/* 連続左メッセージ時：2つ目以降のアイコンを非表示（プレビューのみ） */
.preview-chat-area .message.left.no-icon .icon-container {
    visibility: hidden;
}

.line-footer {
    background: white; padding: 8px 15px 6px; display: flex; flex-direction: column; align-items: stretch; border-top: 1px solid #ddd;
    height: auto;
    min-height: 50px;
    flex-shrink: 0; z-index: 20;
}
.line-footer-row { display: flex; align-items: center; gap: 10px; }
.genre-picker-wrap { position: relative; flex-shrink: 0; }
.line-footer-plus { font-size: 22px; color: #888; font-weight: 300; line-height: 1; cursor: pointer; white-space: nowrap; }
.line-footer-plus.genre-selected { font-size: 11px; color: #fff; background: #4a90d9; border-radius: 12px; padding: 3px 7px; font-weight: bold; }
.genre-picker-popup {
    position: absolute; bottom: calc(100% + 8px); left: 0;
    background: white; border-radius: 14px; box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    z-index: 200; width: 330px; padding: 12px 14px;
}
.ai-setting-section { margin-bottom: 10px; }
.ai-setting-section:last-child { margin-bottom: 0; }
.ai-setting-label { font-size: 10px; font-weight: bold; color: #999; margin-bottom: 5px; letter-spacing: 0.5px; }
.ai-setting-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ai-chip { font-size: 12px; padding: 4px 10px; border-radius: 20px; cursor: pointer; border: 1.5px solid #ddd; color: #555; background: white; white-space: nowrap; }
.ai-chip:hover { border-color: #4a90d9; color: #4a90d9; }
.ai-chip.active { background: #4a90d9; color: white; border-color: #4a90d9; font-weight: bold; }
.ai-input-container { flex: 1; display: flex; align-items: center; background: #f1f2f6; border: 1.5px solid #ddd; border-radius: 20px; padding: 4px 6px 4px 15px; }
.ai-input { border: none; background: transparent; width: 100%; outline: none; font-size: 13px; color: #333; }
.ai-send-btn { background: #0984e3; color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; margin-left: 5px; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

/* ==========================================
   3. チャットエリア（ここだけが自動で伸び縮みする）
   ========================================== */
/* chatAreaWrapper: オーバーレイ用に chat-area を包む */
#chatAreaWrapper {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}
#previewChatAreaWrapper {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.chat-area {
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
    scroll-behavior: smooth;
}

.empty-state { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; position: absolute; top: 0; left: 0; width: 100%; z-index: 5; pointer-events: none; }
.large-template-btn { pointer-events: auto; background: rgba(255, 255, 255, 0.9); color: #0984e3; border: 2px dashed #0984e3; padding: 15px 30px; border-radius: 30px; font-size: 16px; font-weight: bold; cursor: pointer; }

/* メッセージの装飾など（変更なし） */
.message { display: flex; align-items: flex-end; max-width: 100%; position: relative; z-index: 10; scroll-margin-top: 20px; transition: z-index 0s; }
.drag-handle { color: rgba(0,0,0,0.25); font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: grab; user-select: none; flex-shrink: 0; font-weight: bold; background: rgba(0,0,0,0.06); border-radius: 8px; padding: 4px 6px; border: 1px solid rgba(0,0,0,0.05); }
.drag-handle:active { cursor: grabbing; color: #0984e3; }
.sortable-ghost { opacity: 0.3; background: #e0f0ff; border-radius: 15px; }
.icon-container { position: relative; display: flex; flex-shrink: 0; margin-right: 8px; }
.icon { width: 26px; height: 26px; background: #ddd; border-radius: 50%; cursor: pointer; border: 2px solid white; background-size: cover; background-position: center; }
.icon-menu { display: none; position: absolute; top: 35px; left: -10px; background: white; border-radius: 12px; padding: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); gap: 8px; z-index: 100; flex-wrap: nowrap; width: max-content; }
.icon-menu::before { content: ""; position: absolute; top: -10px; left: 20px; border-width: 0 10px 10px 10px; border-style: solid; border-color: transparent transparent white transparent; }
.icon-option { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 2px solid #eee; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; color: #555; background-size: cover; background-position: center; transition: all 0.1s; background-color: #f0f0f0; }
.icon-option:hover { border-color: #0984e3; }
.bubble { padding: 8px 12px; border-radius: 15px; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,0.05); max-width: 230px; min-width: 120px; }
.time, .read-mark { font-size: 10px; color: #aaa; line-height: 1.2; white-space: nowrap; }
.editable-time { cursor: pointer; border-bottom: 1px dashed rgba(0,0,0,0.3); padding: 0 2px; transition: 0.2s; user-select: none; }
.line-header .editable-time { border-bottom: 1px dashed rgba(255,255,255,0.5); }
.editable-time:hover { background: rgba(0,0,0,0.05); border-radius: 3px; }
.line-header .editable-time:hover { background: rgba(255,255,255,0.2); }
.message.left { align-items: flex-start; }
.message.left .bubble { background: #ffffff; margin-left: 5px; }
.message.left .time { margin-left: 5px; margin-bottom: 2px; align-self: flex-end; }
.message.left2 { align-items: flex-start; }
.message.left2 .bubble { background: #ffffff; margin-left: 5px; }
.message.left2 .time { margin-left: 5px; margin-bottom: 2px; align-self: flex-end; }
.preview-chat-area .message.left2.no-icon .icon-container { visibility: hidden; }
.message.left3 { align-items: flex-start; }
.message.left3 .bubble { background: #ffffff; margin-left: 5px; }
.message.left3 .time { margin-left: 5px; margin-bottom: 2px; align-self: flex-end; }
.preview-chat-area .message.left3.no-icon .icon-container { visibility: hidden; }

/* 送信者名 */
.left-bubble-col { display: flex; flex-direction: column; min-width: 0; margin-left: 5px; }
.left-bubble-col .bubble { margin-left: 0 !important; }
.sender-name-input { font-size: 11px; color: #888; background: transparent; border: none; outline: none; padding: 0 0 2px 0; display: block; width: 120px; max-width: 100%; }
.sender-name-input::placeholder { color: rgba(0,0,0,0.22); }
.preview-sender-name { font-size: 11px; color: #888; padding: 0 0 2px 0; }
.preview-chat-area .left-bubble-col:not(.has-name) { padding-top: 4px; }

.message.right { align-self: flex-end; justify-content: flex-end; }
.message.right .bubble { background: #b4ff64; margin-right: 5px; min-width: 0 !important; flex-shrink: 0; }
.meta-info.right { display: flex; flex-direction: column; align-items: flex-end; margin-right: 5px; }
.right-bubble-row { display: flex; align-items: flex-end; }
.left-bubble-row { display: flex; align-items: flex-end; }
.text-input {
    border: none;
    background: transparent;
    width: 100%;
    outline: none;
    resize: none;
    font-family: inherit;
    font-size: 14.5px;
    color: #333;
    line-height: 1.4;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.delete-btn { background: #ff3b30; color: white; border: none; border-radius: 50%; width: 20px; height: 20px; cursor: pointer; font-size: 12px; font-weight: bold; position: absolute; top: -8px; right: -8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.3); z-index: 5; opacity: 0.9; }
.bubble-actions { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; margin-top: 8px; }
.right-bubble-col { display: flex; flex-direction: column; align-items: flex-end; }
.right-bubble-col .bubble { margin-right: 5px; }
#chatArea .bubble { box-sizing: border-box; }
.action-btn { font-size: 10px; background: rgba(0,0,0,0.06); border-radius: 8px; padding: 4px 8px; cursor: pointer; color: #555; font-weight: bold; border: 1px solid rgba(0,0,0,0.05); white-space: nowrap; }
.chat-img-preview { max-width: 100%; border-radius: 10px; margin-bottom: 5px; display: none; }
.voice-menu { display: none; position: absolute; top: 30px; left: 0; background: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); z-index: 100; flex-direction: column; overflow: hidden; border: 1px solid #eee; min-width: 140px; }
.voice-menu::before { content: ""; position: absolute; top: -10px; left: 20px; border-width: 0 10px 10px 10px; border-style: solid; border-color: transparent transparent white transparent; }
.voice-option { padding: 8px 15px; font-size: 12px; font-weight: bold; color: #333; cursor: pointer; border-bottom: 1px solid #f5f5f5; white-space: nowrap; transition: background 0.1s; display: flex; align-items: center; }
.voice-option:hover { background: #f0f8ff; color: #0984e3; }
.gender-badge { display: inline-block; padding: 2px 5px; border-radius: 4px; font-size: 10px; font-weight: bold; border: 1px solid; margin-right: 8px; }
.gender-f { color: #e84393; border-color: #fd79a8; background: #fff0f5; }
.gender-m { color: #0984e3; border-color: #74b9ff; background: #f0f8ff; }

/* ==========================================
   4. モーダル関連
   ========================================== */
.modal-overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; justify-content: center; align-items: center; }
.modal-content { background: white; width: 85%; max-width: 320px; max-height: 85%; border-radius: 15px; padding: 25px; display: flex; flex-direction: column; box-shadow: 0 10px 25px rgba(0,0,0,0.2); position: relative; }
.picker-container { display: flex; background: #f8f8f8; border-radius: 10px; height: 150px; position: relative; overflow: hidden; border: 1px solid #ddd; justify-content: center; }
.picker-highlight { position: absolute; top: 60px; left: 0; right: 0; height: 30px; background: rgba(9, 132, 227, 0.15); border-top: 1.5px solid #0984e3; border-bottom: 1.5px solid #0984e3; pointer-events: none; }
.picker-column { flex: 1; overflow-y: auto; scroll-snap-type: y mandatory; padding: 60px 0; scrollbar-width: none; }
.picker-column::-webkit-scrollbar { display: none; }
.picker-item { height: 30px; line-height: 30px; text-align: center; font-size: 18px; font-weight: bold; color: #444; scroll-snap-align: center; user-select: none; }
.picker-colon { line-height: 150px; font-size: 20px; font-weight: bold; color: #333; }
.progress-container { width: 100%; height: 12px; background: #f1f2f6; border-radius: 10px; overflow: hidden; margin-bottom: 10px; border: 1px solid #ddd; }
.progress-bar { width: 0%; height: 100%; background: #0984e3; transition: width 0.3s; }
.toggle-switch { appearance: none; width: 44px; height: 24px; background: #ccc; border-radius: 24px; position: relative; cursor: pointer; outline: none; transition: 0.3s; }
.toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; transition: 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.toggle-switch:checked { background: #0984e3; }
.toggle-switch:checked::after { left: 22px; }
.terms-text-area { flex: 1; overflow-y: auto; font-size: 12px; color: #555; line-height: 1.6; padding-right: 10px; margin-bottom: 20px; border: 1px solid #eee; padding: 10px; border-radius: 8px; background: #fafafa; }

/* ==========================================
   5. PC版のレイアウト（画面が広いときの指示）
   ========================================== */
@media (min-width: 1000px) {
    .main-wrapper {
        /* 上下の中央にぴったり合わせる */
        align-items: center;

        /* ★ここを修正：上下左右均等に余白を取ることで、ど真ん中に配置されます */
        padding: 20px;
        /* （※さっきまであった padding-top: 0; は完全に消してください） */

        gap: 20px;
    }
    #app, .side-panel {
        height: 90vh;
        max-height: 850px;
    }
    #app {
        border-radius: 20px;
    }
    .side-panel {
        display: flex;          /* ★ 3段構成のためflexコンテナに変更 */
        flex-direction: column; /* ★ 縦積み */
        overflow: hidden;       /* ★ パネル全体はスクロールしない */
        padding: 20px;          /* ★ base の padding を PC でも明示 */
    }
}

/* ==========================================
   6. ヘッダー開閉ボタンと非表示機能
   ========================================== */
.header-toggle-wrapper {
    position: relative;
    width: 100%;
    height: 0; 
    z-index: 80; 
}

#headerToggleBtn {
    position: absolute;
    left: 15px; 
    top: -1px; 
    background: transparent;
    color: white;
    border: 1.5px solid rgba(255,255,255,0.8);
    border-top: none;
    border-radius: 0 0 8px 8px; 
    padding: 3px 14px 5px 14px; 
    font-size: 12px;
    cursor: pointer;
    box-shadow: none;
}
.toggle-tri {
    display: block;
    line-height: 1;
}

.header-hidden {
    display: none !important; 
}

/* ==========================================
   7. プレビュー画面専用の綺麗なデザイン
   ========================================== */
.clean-msg {
    display: flex;
    align-items: flex-start;
    max-width: 100%;
    /* 最初は透明にして下にずらしておく（アニメーション準備） */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.clean-msg.left { flex-direction: row; }
.clean-msg.right { flex-direction: row-reverse; }

.clean-icon {
    width: 40px; height: 40px; border-radius: 50%; 
    background-size: cover; background-position: center; 
    margin: 0 10px; flex-shrink: 0;
}

.clean-bubble-wrap {
    display: flex; align-items: flex-end; max-width: 75%;
}
.clean-msg.left .clean-bubble-wrap { flex-direction: row; }
.clean-msg.right .clean-bubble-wrap { flex-direction: row-reverse; }

.clean-bubble {
    padding: 10px 15px; border-radius: 20px; 
    font-size: 14px; line-height: 1.4; word-break: break-word;
}
.clean-msg.left .clean-bubble { 
    background: white; border-top-left-radius: 0; color: #333; 
}
.clean-msg.right .clean-bubble {
    background: #b4ff64; border-top-right-radius: 0; color: #333;
}

.clean-img {
    max-width: 100%; border-radius: 10px; margin-top: 5px; display: none;
}
.clean-time {
    font-size: 10px; color: #888; margin: 0 5px; white-space: nowrap;
}

/* ==========================================
   ★修正：プレビュー画面専用デザイン
   ========================================== */
/* プレビュー画面全体を縮小し、スマホの比率を保つ */
.preview-phone-container {
    box-sizing: border-box;
    
    
    /* 全端末で同じ幅に固定→内部UIが常に同じ比率に見える */
    width: min(341px, 90vw);
    /* iPhone 12以降の実際の画面比率（9:19.5）に合わせる */
    aspect-ratio: 9 / 19.5;
    /* 画面が縦に短い場合の保険 */
    max-height: 90dvh;
    max-height: 90vh; /* 古いブラウザ向けフォールバック */
    
    background: #c3dcf0;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    position: relative;
    margin: 0 auto; /* 画面の真ん中に配置する */
}

/* ★追加：プレビュー内のチャット同士の縦の間隔をしっかり広げる */
.preview-chat-area .message {
    margin-bottom: 20px;
}
/* プレビュー内のタイムスタンプの点線下線を非表示 */
.preview-chat-area .editable-time {
    border-bottom: none !important;
    cursor: default;
}

.preview-header {
    background: transparent;
    color: white;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
/* プレビュー内ステータスバーの時刻をセンタリング */
.preview-header .lh-status-row {
    padding: 5px 12px;
    height: auto;
}
#previewClock {
    font-weight: bold;
    font-size: 13px;
    color: white;
}
.preview-header .preview-close-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
/* 後方互換 */
.preview-header-bar {
    display: none;
}

.preview-close-btn {
    background: #ff4757; /* 目立つ赤色に変更 */
    color: white;
    border: none;
    padding: 6px 15px;
    border-radius: 15px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.preview-chat-area {
    height: 100%;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

/* プレビュー用のダミー入力欄 */
.preview-footer-bar {
    background: #f5f5f5;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.preview-input-fake {
    flex: 1;
    background: white;
    height: 36px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    padding-left: 15px;
    color: #aaa;
    border: 1px solid #ddd;
}

/* ★超重要：プレビュー画面の中では、編集用のボタンを強制的に隠す */
.preview-chat-area .bubble-actions, 
.preview-chat-area .delete-btn, 
.preview-chat-area .drag-handle { 
    display: none !important; 
}

.preview-text-display {
    font-size: 14.5px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 2px;
}

/* ==========================================
   ★追加：リアルな吹き出し（本家LINE準拠）
   ========================================== */
.bubble {
    border-radius: 22px !important;
    position: relative;
    padding: 3px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 右側（自分）の吹き出し */
.message.right .bubble {
    background-color: #b4ff64 !important;
    border-top-right-radius: 0px !important; /* しっぽの根元はシャープに */
}
/* 右しっぽ：上部右外に伸びる三角 */
.message.right .bubble::after {
    content: '';
    position: absolute;
    top: 0;
    right: -9px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 9px 9px;
    border-color: transparent transparent transparent #b4ff64;
}

/* 左側（相手）の吹き出し */
.message.left .bubble,
.message.left2 .bubble,
.message.left3 .bubble {
    background-color: #ffffff !important;
    border-top-left-radius: 0px !important; /* しっぽの根元はシャープに */
    margin-left: 10px;
}
/* 左しっぽ：上部左外に伸びる三角 */
.message.left .bubble::after,
.message.left2 .bubble::after,
.message.left3 .bubble::after {
    content: '';
    position: absolute;
    top: 0;
    left: -9px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 9px 9px 0;
    border-color: transparent #ffffff transparent transparent;
}

/* プレビュー：連続同一人物（no-icon）はしっぽなし・丸角・間隔縮小 */
.preview-chat-area .message.left.no-icon .bubble,
.preview-chat-area .message.left2.no-icon .bubble,
.preview-chat-area .message.left3.no-icon .bubble {
    border-top-left-radius: 22px !important;
}
.preview-chat-area .message.left.no-icon .bubble::after,
.preview-chat-area .message.left2.no-icon .bubble::after,
.preview-chat-area .message.left3.no-icon .bubble::after {
    display: none;
}
/* 右側も同様：連続自分メッセージのしっぽなし・丸角 */
.preview-chat-area .message.right.no-icon .bubble {
    border-top-right-radius: 22px !important;
}
.preview-chat-area .message.right.no-icon .bubble::after {
    display: none;
}
/* 連続メッセージ間隔をさらに縮小 */
.preview-chat-area .message.no-icon {
    margin-top: -15px;
}

/* ==========================================
   ★修正：プレビューモーダルを確実に最前面に固定する
   ========================================== */
#previewModal {
    position: fixed;
    /* 広告ネットワークの高いz-indexに勝てるよう大きい値に設定 */
    z-index: 100000;
}

/* 課金・ログインモーダル：プレビューの前に必ず出るように z-index を高く設定 */
#upgradeModal,
#loginWallModal {
    position: fixed;
    z-index: 100001;
}
/* 処理中モーダル：プレビュー画面より前面に表示 */
#processingModal {
    position: fixed;
    z-index: 100002;
}

/* ==========================================
   8. LINE風チャットナビゲーションバー
   ========================================== */

/* エディタ画面用：LINEっぽいトークヘッダー */
.line-chat-header {
    background: rgba(65, 65, 65, 0.92);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    height: 44px;
    min-height: 44px;
    flex-shrink: 0;
    z-index: 5;
}
.line-chat-header .lch-back {
    font-size: 22px;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.9;
    cursor: default;
    line-height: 1;
}
.line-chat-header .lch-back .lch-count {
    font-size: 13px;
    font-weight: bold;
    margin-top: 2px;
}
.line-chat-header .lch-center {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.line-chat-header .lch-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #aaa;
    border: 1.5px solid rgba(255,255,255,0.5);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.line-chat-header .lch-name {
    font-size: 14px;
    font-weight: bold;
    color: white;
    letter-spacing: 0.3px;
}
.line-chat-header .lch-right-icons {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 18px;
    opacity: 0.9;
    cursor: default;
}

/* プレビューモーダル内専用のチャットナビゲーションバー */
.preview-chat-nav {
    background: rgba(65, 65, 65, 0.92);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    height: 44px;
    min-height: 44px;
    flex-shrink: 0;
}
.preview-chat-nav .lch-back {
    font-size: 22px;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.9;
    line-height: 1;
}
.preview-chat-nav .lch-back .lch-count {
    font-size: 13px;
    font-weight: bold;
    margin-top: 2px;
}
.preview-chat-nav .lch-center {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.preview-chat-nav .lch-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #aaa;
    border: 1.5px solid rgba(255,255,255,0.5);
    flex-shrink: 0;
}
.preview-chat-nav .lch-name {
    font-size: 14px;
    font-weight: bold;
    color: white;
    letter-spacing: 0.3px;
}
.preview-chat-nav .lch-right-icons {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 18px;
    opacity: 0.9;
}

/* プレビューフッターアイコン */
.preview-footer-icon {
    font-size: 22px;
    color: #888;
    cursor: default;
    line-height: 1;
    flex-shrink: 0;
}
.preview-footer-svg {
    flex-shrink: 0;
    display: block;
}
.preview-footer-square {
    width: 22px;            /* ★SVGアイコン（22px）に合わせる */
    height: 22px;           /* ★SVGアイコン（22px）に合わせる */
    border: 1.5px solid #888; /* ★stroke-width: 1.5 に合わせる */
    border-radius: 3px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* ==========================================
   プレビュー：ウォーターマーク
   ========================================== */
.preview-watermark {
    position: absolute;
    bottom: 124px;
    right: 12px;
    font-size: 11.5px;
    font-weight: 900; /* ★修正：より太い文字にします */
    color: rgba(255, 255, 255, 0.95);
    background: rgba(0, 0, 0, 0.25); /* ★修正：うっすらと黒い背景をつけます */
    padding: 4px 10px; /* ★修正：文字の周りに背景の広がりを持たせます */
    border-radius: 12px; /* ★修正：背景の角を丸くします */
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    z-index: 55;
    letter-spacing: 0.5px;
    user-select: none;
}

/* ==========================================
   プレビュー：リプレイボタン
   ========================================== */
.preview-replay-container {
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    flex-shrink: 0;
    z-index: 60;
}
#previewReplayBtn {
    background: rgba(255, 255, 255, 0.92);
    color: #333;
    border: none;
    padding: 10px 28px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    pointer-events: auto !important;
}
#previewReplayBtn:hover { background: #fff; }

/* ==========================================
   プレビュー：チャットエリアのインタラクションをロック
   ========================================== */
.preview-chat-area * {
    pointer-events: none !important;
    user-select: none !important;
    cursor: default !important;
}
/* リプレイコンテナは操作可能にする */
.preview-replay-container,
.preview-replay-container * {
    pointer-events: auto !important;
    cursor: pointer !important;
}
/* 閉じるボタンも操作可能にする */
.preview-close-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ==========================================
   ★追加・上書き：プレビュー画面のUI調整
   ========================================== */
/* プレビュー画面のスクロールバーを完全に隠す */
.preview-chat-area::-webkit-scrollbar {
    display: none;
}
.preview-chat-area {
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* padding-bottom と scroll-padding-bottom は JavaScript で動的に計算・設定します */
}

/* 2つのボタンを横並びにして隙間を空ける */
.preview-replay-container {
    gap: 15px; 
}

/* 閉じるボタンのデザインを「もう一度見る」ボタンのサイズ感に合わせる */
.preview-close-btn {
    background: #ff4757;
    color: white;
    border: none;
    padding: 10px 28px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    pointer-events: auto !important;
}

/* ==========================================
   ★追加・上書き：プレビュー画面のUI調整（2段フッター）
   ========================================== */

/* 上段の入力欄フッター：以前あったボタンとの競合を防ぐため padding を少し調整 */
.preview-footer {
    padding: 10px 15px; /* 上下の余白を均等に */
}

/* 下段に追加する無地のフッター */
.preview-footer-extra {
    background: #f5f5f5; /* ★修正：もともとある上段のフッターと全く同じ色にしました */
    border-top: none; /* ★修正：境目をなくして一体化させます */
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    padding: 0 15px;
}

/* 2つのボタンのまとまりを新しいコンテナに合わせる */
.preview-replay-container {
    display: flex; /* jsで display:none を解除した時に flex になるように */
    gap: 15px;
    width: 100%;
    justify-content: center; /* 中央に並べる */
    position: static; /* 以前 position: absolute だったなら static に戻す必要があるかもしれない。前のCSS次第 */
    padding: 0;
    background: transparent;
}

/* 閉じるボタンのデザインを「もう一度見る」ボタンのサイズ感に合わせる ★前回のものを踏襲 */
.preview-close-btn {
    background: #ff4757;
    color: white;
    border: none;
    padding: 10px 28px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    pointer-events: auto !important;
}

/* 3ボタン一行化：折り返し禁止・横幅均等配分 */
.preview-replay-container button {
    white-space: nowrap;
    flex: 1;
    padding-left: 8px !important;
    padding-right: 8px !important;
    min-width: 0;
}

/* 保存ボタン（画像エクスポート） */
.preview-save-btn {
    background: rgba(255, 255, 255, 0.92);
    color: #0984e3;
    border: 2px solid #0984e3;
    padding: 10px 22px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    pointer-events: auto !important;
}
.preview-save-btn:hover { background: #e8f4fd; }

/* ==========================================
   ★追加・上書き：吹き出しのめり込み防止とサイズ調整
   ========================================== */
/* 吹き出し幅はJSの _autoBubbleWidth が制御するため max-width は不要 */
/* 右吹き出しは内容幅に合わせて縮む */
.message.right .bubble {
    min-width: 0 !important;
    max-width: 248px !important;
}
/* 左吹き出し：JSが inline width を設定・最大248px（15文字まで1行） */
.message.left .bubble,
.message.left2 .bubble,
.message.left3 .bubble {
    min-width: 0 !important;
    max-width: 248px !important;
    flex-shrink: 0;
}
/* プレビューでは width:max-content でテキスト幅に収縮（最大235px＝時刻が収まる上限） */
.preview-chat-area .message.left .bubble,
.preview-chat-area .message.left2 .bubble,
.preview-chat-area .message.left3 .bubble {
    width: max-content;
    max-width: 235px !important;
}

/* プレビュー画面の中だけ、文字サイズを少し小さくして全体的なバランスを取る */
.preview-text-display {
    font-size: 13.5px !important;
}
.preview-chat-area .time,
.preview-chat-area .read-mark { font-size: 9px !important; }

/* ==========================================
   チャット保存・呼び出し UI
   ========================================== */

/* 上段（固定）：タイトル＋保存ボタン */
.save-top {
    flex-shrink: 0;     /* ★ 上段は高さが縮まない */
    padding-bottom: 8px;
}
.save-title {
    margin: 0 0 12px;
    color: #333;
    font-size: 15px;
    font-weight: bold;
}
.save-chat-btn {
    width: 100%;
    background: #06C755;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s;
    box-sizing: border-box;
}
.save-chat-btn:hover { opacity: 0.85; }

/* 中段（スクロール）：履歴リスト */
.save-history-list {
    flex: 1;            /* ★ 残りの縦スペースをすべて使う */
    min-height: 0;      /* ★ flex アイテムを content 以下に縮めるために必須 */
    overflow-y: auto;   /* ★ 件数が増えたらここだけスクロール */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 2px;   /* スクロールバーとの間の余白 */
}

/* 下段（固定）：広告枠 */
.save-bottom {
    flex-shrink: 0;     /* ★ 下段は高さが縮まない */
    padding-top: 16px;
}
.save-history-item {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 10px 12px;
}
.save-item-title {
    font-size: 13px;
    font-weight: bold;
    color: #333;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.save-item-date {
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
}
.save-item-actions {
    display: flex;
    gap: 6px;
}
.save-load-btn {
    flex: 1;
    background: #4A90E2;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.save-load-btn:hover { opacity: 0.85; }
.save-delete-btn {
    background: #e55;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.save-delete-btn:hover { opacity: 0.85; }
.save-history-empty {
    font-size: 12px;
    color: #aaa;
    text-align: center;
    padding: 12px 0;
}

/* ==========================================
   右パネル：広告エリア
   ========================================== */

/* 広告枠の共通スタイル */
.ad-block {
    flex-shrink: 0;           /* 高さが圧縮されない */
    width: 100%;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 12px;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
}
.ad-300x600 {
    height: 600px;
}
.ad-300x250 {
    height: 250px;
}

/* 右パネル：広告2枠の間に余白を追加 */
.right-panel {
    gap: 20px;
}

/*
 * 高さ計算：max-height 850px − padding 20px×2 = 内側 810px
 * 300x600 + gap 20px + 300x250 = 870px  →  810px を超えるため 300x250 を非表示
 */
.right-panel .ad-300x250 {
    display: none;
}

/* padding-bottom / scroll-padding-bottom はプレビュー開始時に JavaScript で動的計算します */

/* ==========================================
   7. 認証UI（ログインボタン・ユーザー情報）
   ========================================== */

/* app-branding バーの右側エリア：利用規約＋認証UIを横並びにする */
.branding-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* 認証エリア全体（ボタンまたはユーザー情報の切り替えコンテナ） */
#authArea {
    display: flex;
    align-items: center;
}

/* ── Googleログインボタン ── */
.login-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: white;
    color: #444;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    line-height: 1.4;
}
.login-btn:hover {
    background: #f0f0f0;
}

/* ── ログイン済み：ユーザー情報エリア ── */
.user-info {
    display: flex;       /* JS で切り替えるので初期値は inline style "none" */
    align-items: center;
    gap: 6px;
}

/* Googleアイコン画像（丸型） */
.user-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.35);
    transition: border-color 0.3s, box-shadow 0.3s;
}
/* プレミアムユーザーは金縁＋グロー */
.user-avatar-premium {
    border-color: #f6d365;
    box-shadow: 0 0 7px rgba(246, 211, 101, 0.85);
}

/* ユーザー表示名 */
.user-name {
    font-size: 11px;
    color: white;
    max-width: 55px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ログアウトボタン */
.logout-btn {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 10px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.logout-btn:hover {
    color: white;
    border-color: rgba(255, 255, 255, 0.75);
}

/* ==========================================
   8. ログインウォール モーダル
   ========================================== */

/* モーダル全体のコンテナ（既存 .modal-content を継承して上書き） */
.login-wall-modal {
    max-width: 290px;
    text-align: center;
    padding: 28px 24px 24px;
}

/* 鍵アイコン */
.login-wall-icon {
    font-size: 38px;
    margin-bottom: 10px;
    line-height: 1;
}

/* タイトル */
.login-wall-title {
    margin: 0 0 10px;
    color: #222;
    font-size: 16px;
    font-weight: bold;
}

/* メインメッセージ */
.login-wall-msg {
    margin: 0 0 6px;
    font-size: 13px;
    color: #444;
    line-height: 1.7;
}

/* サブメッセージ（自動保存の案内） */
.login-wall-note {
    display: block;
    margin: 0 0 20px;
    font-size: 11px;
    color: #999;
    line-height: 1.7;
}

/* ボタンエリア */
.login-wall-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Googleログインボタン */
.login-wall-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    border: 1px solid #dadce0;
    border-radius: 25px;
    background: white;
    color: #3c4043;
    font-size: 14px;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s, background 0.2s;
    box-sizing: border-box;
}
.login-wall-google-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0,0,0,0.14);
}

/* キャンセルボタン */
.login-wall-cancel-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 25px;
    background: #f0f0f0;
    color: #666;
    font-size: 13px;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
    box-sizing: border-box;
}
.login-wall-cancel-btn:hover {
    background: #e4e4e4;
}

/* ============================================================
   Section 9: プラン表示・アップグレード・透かし (v=146)
   ============================================================ */

/* ── プランバッジ（ヘッダー内コンパクト表示） ── */
.plan-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Free：控えめな白枠・半透明 */
.plan-free {
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.4);
}
/* Pre：金色テキスト・金枠 */
.plan-premium {
    background: transparent;
    color: #f6d365;
    border: 1px solid #f6d365;
    text-shadow: 0 0 6px rgba(246, 211, 101, 0.6);
}

/* ── アップグレードボタン ── */
.upgrade-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #f6d365, #fda085);
    color: #7a3800;
    border: none;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(253, 160, 133, 0.5);
    transition: opacity 0.2s, transform 0.1s;
}
.upgrade-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* ── 声メニューのロック表示（無料ユーザー向け） ── */
.voice-menu-lock {
    padding: 6px 12px;
    font-size: 11px;
    color: #fff;
    text-align: center;
    background: linear-gradient(135deg, #f6d365, #fda085);
    font-weight: bold;
    cursor: default;
    letter-spacing: 0.3px;
}

/* ── ロックされた声の選択肢（グレーアウト・クリックでモーダル） ── */
.voice-locked {
    padding: 8px 15px;
    font-size: 12px;
    font-weight: bold;
    color: #bbb;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    white-space: nowrap;
    display: flex;
    align-items: center;
    opacity: 0.55;
    user-select: none;
    transition: opacity 0.15s, background 0.15s;
}
.voice-locked:hover {
    opacity: 0.8;
    background: #fff8f0;
}

/* ── 保存パネルのロックメッセージ ── */
.save-lock-msg {
    color: #bbb;
    font-size: 12px;
    text-align: center;
    padding: 20px 12px;
    line-height: 1.8;
}

/* ── アイコンメニューのロックオプション ── */
.icon-option-lock {
    cursor: pointer;
    font-size: 14px;
    opacity: 0.7;
}
.icon-option-lock:hover { opacity: 1.0; }

/* ── プレビュー透かしオーバーレイ（無料プランのみ） ── */
.wm-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;      /* クリックを透過させる */
    z-index: 20;
    border-radius: inherit;
}
.wm-overlay-text {
    font-size: 28px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 2px;
    transform: rotate(-30deg);
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
    user-select: none;
}

/* ============================================================
   Section 10: アップグレードモーダル (v=149)
   ============================================================ */

.upgrade-modal {
    max-width: 320px;
    width: 90%;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
}

/* ヘッダー部分（グラデーション） */
.upgrade-modal-header {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    padding: 22px 24px 18px;
    text-align: center;
}
.upgrade-modal-star {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 6px;
}
.upgrade-modal-title {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: bold;
    color: #5a2600;
}
.upgrade-modal-price {
    margin: 0;
    font-size: 13px;
    color: #7a3800;
}
.upgrade-modal-price strong {
    font-size: 20px;
    color: #5a2600;
}

/* 機能リスト */
.upgrade-feature-list {
    list-style: none;
    margin: 0;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: #fff;
}
.upgrade-feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #333;
    line-height: 1.4;
}
.uft-icon {
    font-size: 15px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}
.upgrade-feature-list strong {
    color: #e07020;
}

/* ボタンエリア */
.upgrade-modal-btns {
    padding: 12px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
}
.upgrade-modal-start-btn {
    display: block;
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #f6d365, #fda085);
    color: #5a2600;
    font-size: 14px;
    font-weight: bold;
    font-family: inherit;
    border: none;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(253, 160, 133, 0.5);
    transition: opacity 0.2s, transform 0.1s;
    box-sizing: border-box;
}
.upgrade-modal-start-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}
.upgrade-modal-cancel-btn {
    background: transparent;
    border: none;
    color: #aaa;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    padding: 4px;
    text-align: center;
    transition: color 0.15s;
}
.upgrade-modal-cancel-btn:hover {
    color: #666;
}

/* ==============================================
   Section 11: 残り回数表示 (v=150)
   ============================================== */
.usage-count-display {
    text-align: center;
    font-size: 11px;
    color: #aaa;
    min-height: 14px;
    margin-top: 4px;
    letter-spacing: 0.02em;
}

/* ==========================================
   広告の端末別出し分け
   ========================================== */
.ad-pc { display: none !important; }
@media (min-width: 1000px) {
    .ad-sp { display: none !important; }
    .ad-pc { display: block !important; }
}

/* ==========================================
   プレミアムユーザーは広告を全非表示
   バナーが消えた分は chat-area が自動で伸びる
   ========================================== */
body.is-premium .banner,
body.is-premium .save-bottom,
body.is-premium .ad-block {
    display: none !important;
}
/* AdMaxがbody直下に直接注入する固定広告・iframeも非表示 */
body.is-premium > iframe,
body.is-premium > ins,
body.is-premium > div[style*="position: fixed"],
body.is-premium > div[style*="position:fixed"] {
    display: none !important;
}
/* プレビュー再生中は広告をすべて非表示（AdMax注入要素も含む） */
body.preview-active .banner,
body.preview-active .save-bottom,
body.preview-active .ad-block {
    display: none !important;
}
body.preview-active > iframe,
body.preview-active > ins,
body.preview-active > div[style*="position: fixed"],
body.preview-active > div[style*="position:fixed"] {
    display: none !important;
}
/* ==========================================
   背景画像オーバーレイ
   ========================================== */
#bgImageOverlay,
#previewBgImageOverlay {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
    display: none;
}

/* 背景画像ボタン */
.bg-image-btn {
    background: #f1f2f6;
    color: #555;
    border: 1px solid #ccc;
    padding: 6px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    white-space: nowrap;
}
.bg-image-btn:hover { background: #e8e9ee; }

/* 透明度スライダーラッパー */
.bg-opacity-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 15px 6px;
    background: white;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.opacity-label {
    font-size: 11px;
    color: #555;
    white-space: nowrap;
    font-weight: bold;
}
#bgOpacity {
    flex: 1;
    height: 4px;
    accent-color: #0984e3;
    cursor: pointer;
}
#bgOpacityValue {
    font-size: 11px;
    color: #555;
    min-width: 32px;
    text-align: right;
}
.bg-image-clear-btn {
    background: #ff3b30;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.bg-image-clear-btn:hover { opacity: 0.85; }

/* ==========================================
   背景設定ポップアップ
   ========================================== */
.bg-settings-wrapper {
    position: relative;
}
.bg-settings-popup {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.16);
    padding: 6px 0;
    z-index: 9999;
    min-width: 260px;
    display: flex;
    flex-direction: column;
}
.bg-popup-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
}
.bg-popup-row + .bg-popup-row {
    border-top: 1px solid #f0f0f0;
}
.bg-popup-label {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    min-width: 60px;
}
.bg-popup-color-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #0984e3;
    background: #eef6ff;
    border: 1.5px solid #b8d8f8;
    border-radius: 8px;
    padding: 6px 14px;
    transition: background 0.15s;
}
.bg-popup-color-wrap:hover { background: #d8ecff; }
.bg-popup-swatch {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1.5px solid #ccc;
    flex-shrink: 0;
    background: #c3dcf0;
}
.bg-popup-color-wrap input[type="color"] {
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
}
.bg-popup-pick-btn {
    background: #eef6ff;
    color: #0984e3;
    border: 1.5px solid #b8d8f8;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.bg-popup-pick-btn:hover { background: #d8ecff; }
.bg-popup-del-btn {
    background: #fff0f0;
    color: #e03030;
    border: 1.5px solid #ffbbbb;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.bg-popup-del-btn:hover { background: #ffe0e0; }
#bgOpacity {
    flex: 1;
    height: 5px;
    accent-color: #0984e3;
    cursor: pointer;
}
#bgOpacityValue {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    min-width: 40px;
    text-align: right;
}


/* ==========================================
   スマホ版：プレビュー画面を小さくして広告に被らないようにする
   transform: scale で縮小するため内部UIの比率はPC版と完全に一致する
   （PC版 min-width:1000px には影響しない）
   ========================================== */
@media (max-width: 999px) {
    .preview-phone-container {
        /* PC版と全く同じレイアウトのまま0.835倍に縮小する
           → フッターなど内部UIの比率がPC版と完全に一致する */
        transform: scale(0.835);
        transform-origin: center center;
        /* width・aspect-ratioはPC版と同じ値を使う（scale前の基準） */
        width: min(341px, 90vw);
        height: auto;
        max-height: none;
    }
}

/* ===== ヘッダー ダークテーマ（背景が明るいとき自動切り替え） ===== */
/* SVGアイコンをbrightnessフィルターで白→黒に */
.line-header.header-dark .lh-status-row svg,
.line-header.header-dark .lh-nav-row svg {
    filter: brightness(0);
}
/* テキスト系を黒に */
.line-header.header-dark .lh-status-row .time,
.line-header.header-dark #clock,
.line-header.header-dark .lh-signal-label {
    color: #1a1a1a !important;
}
.line-header.header-dark .lh-name {
    color: #1a1a1a !important;
}
/* トグルボタンも黒枠・黒三角に */
#headerToggleBtn.header-dark {
    border-color: rgba(0, 0, 0, 0.4);
    color: #1a1a1a;
}