/* 縁側トーク v0.1
 * 守ること：特大文字・ボタンは画面あたり1〜2個・警告色を使わない・空欄を赤くしない
 * 配色はおかえりToDo と同じ和トーンのトークンを使う
 */
:root{
  --bg:#F0F6DC; --paper:#FDFFF6; --ink:#3B3A33; --sub:#6B6E58;
  --ai:#4C6FA0; --ai-bg:#E9EFF7; --gold:#C29B2C; --gold-bg:#F7EFD2;
  --line:#DCE4C0; --radius:14px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic UI","Noto Sans JP",sans-serif;
  font-size:16px; line-height:1.7;
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
}
#app{max-width:480px; margin:0 auto; padding:16px 16px 0;}
h1{font-size:20px; margin:8px 0 10px;}
p{margin:6px 0;}
a{color:var(--ai);}
.sub{color:var(--sub); font-size:13px;}
.small-note{font-size:12px; color:var(--sub); margin-top:6px;}
[hidden]{display:none !important;}

button{
  font-family:inherit; font-size:16px; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:12px 16px; cursor:pointer;
}
button:active{transform:scale(0.98);}
button.primary{background:var(--ai); border-color:var(--ai); color:#fff;}
button.ghost{background:transparent; border-color:transparent; color:var(--ai); padding:8px 10px;}
button[disabled]{opacity:0.5;}

input,textarea{
  font-family:inherit; font-size:16px; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:10px;
  padding:10px 12px; width:100%;
}
label{font-size:13px; color:var(--sub); display:block; margin:12px 0 4px;}

.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin:12px 0;}
.card.gold{background:var(--gold-bg); border-color:var(--gold);}
.intro{text-align:left;}
.intro .big{font-size:24px; font-weight:700; margin:4px 0 10px; text-align:center;}
.list-actions{display:flex; gap:10px; margin:12px 0 4px; flex-wrap:wrap;}
.list-actions button{flex:1; min-width:130px;}
.msg{background:var(--gold-bg); border-radius:10px; padding:10px 14px; margin-top:12px;}

/* 合言葉 */
.code-input{letter-spacing:0.4em; font-size:22px; text-align:center;}
.code-show{font-size:30px; letter-spacing:0.25em; font-weight:700; color:#7A5C12;}

/* 相手の一覧 */
.person{
  display:flex; align-items:center; gap:12px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:14px 14px; margin:8px 0; cursor:pointer; width:100%; text-align:left;
}
.person .pname{flex:1; min-width:0; font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.person .badge{
  flex:none; background:var(--ai); color:#fff; border-radius:999px;
  min-width:26px; height:26px; padding:0 8px; font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.person .plast{font-size:12px; color:var(--sub);}

/* 話す */
.talk-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:4px 0 10px; border-bottom:1px solid var(--line); margin-bottom:10px;
}
.talk-head b{font-size:18px;}
#talk-log{padding-bottom:10px;}
.bubble{max-width:78%; padding:10px 14px; border-radius:16px; margin:8px 0; word-break:break-word; white-space:pre-wrap;}
.bubble.me{background:var(--ai-bg); margin-left:auto; border-bottom-right-radius:4px;}
.bubble.you{background:var(--paper); border:1px solid var(--line); border-bottom-left-radius:4px;}
.bubble img{max-width:100%; border-radius:10px; display:block;}
.bubble audio{width:100%;}
.voice-sec{font-size:12px; color:var(--sub); margin-top:2px;}
.stamp{font-size:11px; color:var(--sub); margin:2px 4px 10px;}
.stamp.me{text-align:right;}
.pending{font-size:11px; color:var(--sub);}

/* 話す画面はタブバーを隠すので、その分の余白も外す */
body.talking{padding-bottom:env(safe-area-inset-bottom);}
body.talking #app{
  min-height:100dvh; display:flex; flex-direction:column;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
body.talking #view-talk{flex:1; display:flex; flex-direction:column; min-height:0;}
body.talking #talk-log{flex:1; overflow-y:auto;}
.talk-input{
  position:sticky; bottom:0;
  background:var(--bg); padding-top:8px;
}
.talk-input textarea{resize:none; min-height:46px; max-height:140px;}
.talk-btns{display:flex; gap:8px; margin-top:8px;}
.talk-btns button{flex:1;}
.talk-btns .primary{flex:1.4;}

/* タブバー */
#tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  background:var(--paper); border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,1fr);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  max-width:512px; margin:0 auto;
}
#tabbar button{border:none; background:none; border-radius:10px; padding:8px 4px; font-size:12px; color:var(--sub); line-height:1.3;}
#tabbar button .ico{display:block; font-size:18px; line-height:1.2;}
#tabbar button.active{color:var(--ai); background:var(--ai-bg); font-weight:700;}

/* 知らせ（警告色は使わない） */
#toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(88px + env(safe-area-inset-bottom)); z-index:30;
  background:var(--ink); color:#FFFDF7; border-radius:14px;
  padding:12px 18px; max-width:90%; width:max-content; text-align:center;
  box-shadow:0 4px 16px rgba(59,58,51,0.25);
}

/* 録音中 */
.rec-bar{display:flex; align-items:center; gap:10px; background:var(--gold-bg); border-radius:12px; padding:10px 14px; margin-top:8px;}
.rec-bar .t{flex:1; font-variant-numeric:tabular-nums;}

/* じぶんの絵（スタンプ） */
#sticker-tray{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px; margin-top:8px;
}
#sticker-list, #sticker-manage{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:8px;
}
.sticker{
  background:transparent; border:1px solid var(--line); border-radius:10px;
  padding:4px; cursor:pointer; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
}
.sticker img{max-width:100%; max-height:100%; display:block;}
.sticker.removable{position:relative;}
.sticker .x{
  position:absolute; top:-6px; right:-6px; background:var(--ink); color:#FFFDF7;
  border:none; border-radius:999px; width:22px; height:22px; font-size:13px; line-height:1; padding:0;
}
.tray-foot{display:flex; gap:8px; margin-top:10px;}
.tray-foot button{flex:1;}
.bubble.sticker-bubble{background:transparent; border:none; padding:0; max-width:52%;}
.bubble.sticker-bubble img{border-radius:8px;}

/* はじめての説明 */
.about-card{padding:20px 18px;}
.app-title{font-size:26px; font-weight:700; text-align:center; margin:0 0 2px;}
.app-sub{text-align:center; color:var(--sub); font-size:14px; margin:0 0 14px;}
.about-card .lead{margin:12px 0 4px; line-height:1.85;}
.points-lead{font-size:14px; margin:14px 0 0;}
.points{margin:14px 0 10px;}
.points .pt{
  border-left:4px solid var(--gold); padding:2px 0 2px 12px; margin:12px 0;
}
.points .pt b{display:block; font-size:15px; margin-bottom:2px;}
.points .pt span{display:block; color:var(--sub); font-size:13px; line-height:1.65;}