:root{

  --bg:#eaf2ff;

  --mine:#2563eb;

  --theirs:#ffffff;

  --text:#111827;

  --muted:#6b7280;

  --border:rgba(17,24,39,.08);

  --radius:18px;

  --primary:#2563eb;

  --primary-soft:#dbeafe;

  --nav-height:86px;

}

*{

  box-sizing:border-box;

}

html,

body{

  height:100%;

  margin:0;

}

body{

  overflow:hidden;

  font-family:

    system-ui,-apple-system,"Segoe UI",Roboto,

    "Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;

  background:var(--bg);

  color:var(--text);

}

/* ===== 全体 ===== */

.app{

  height:100dvh;

  display:flex;

  flex-direction:column;

  padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom));

}

/* ===== 上部バー ===== */

.topbar{

  padding:10px 12px;

  font-weight:700;

  background:rgba(255,255,255,.75);

  backdrop-filter:blur(10px);

  border-bottom:1px solid var(--border);

  display:flex;

  align-items:center;

  gap:10px;

}

.sub{

  font-size:12px;

  color:var(--muted);

  margin-top:2px;

}

.app-icon{

  width:28px;

  height:28px;

  border-radius:8px;

  object-fit:cover;

}

.topbar-text{

  display:flex;

  flex-direction:column;

  line-height:1.15;

}

/* ===== チャット領域 ===== */

.chat{

  flex:1 1 auto;

  min-height:0;

  overflow-y:auto;

  padding:12px;

  background-image:url("preview_20260125-12_16_43.jpg");

  background-size:cover;

  background-position:center;

  background-repeat:no-repeat;

  position:relative;

}

.chat::before{

  content:"";

  position:absolute;

  inset:0;

  background:rgba(255,255,255,.35);

  pointer-events:none;

  z-index:0;

}

.chat > *{

  position:relative;

  z-index:1;

}

/* ===== 日付 ===== */

.day{

  display:flex;

  justify-content:center;

  margin:12px 0 14px;

  font-size:12px;

  color:var(--muted);

}

.day span{

  background:rgba(255,255,255,.75);

  border:1px solid var(--border);

  padding:5px 12px;

  border-radius:999px;

  box-shadow:0 2px 6px rgba(0,0,0,.08);

}

/* ===== 行 ===== */

.row{

  display:flex;

  width:100%;

  margin-bottom:10px;

}

.row.mine{

  justify-content:flex-end;

}

.row.theirs{

  justify-content:flex-start;

  gap:8px;

}

/* ===== 相手アイコン ===== */

.row.theirs .avatar{

  width:28px;

  height:28px;

  flex:0 0 auto;

}

.row.theirs .avatar img{

  width:28px;

  height:28px;

  border-radius:50%;

  object-fit:cover;

}

/* ===== メッセージグループ ===== */

.row .msg,

.row.mine > div{

  display:flex;

  flex-direction:column;

}

.row.mine > div{

  align-items:flex-end;

}

.row.theirs .msg{

  align-items:flex-start;

  max-width:220px;

}

/* ===== 吹き出し ===== */

.bubble{

  display:inline-block;

  width:auto;

  max-width:200px;

  padding:6px 8px;

  border-radius:14px;

  line-height:1.45;

  font-size:13px;

  border:1px solid var(--border);

  box-shadow:0 3px 8px rgba(0,0,0,.06);

  white-space:pre-wrap;

  word-break:break-word;

}

.theirs .bubble{

  background:rgba(255,255,255,.92);

  border-radius:16px 16px 16px 6px;

}

.mine .bubble{

  background:rgba(37,99,235,.95);

  color:#fff;

  border-color:rgba(37,99,235,.25);

  border-radius:16px 16px 6px 16px;

}

/* ===== メタ ===== */

.meta{

  font-size:11px;

  color:var(--muted);

  margin:2px 6px 0;

  white-space:nowrap;

}

/* ===== 入力欄 ===== */

.composer{

  flex:0 0 auto;

  display:flex;

  align-items:center;

  gap:8px;

  padding:8px 10px;

  background:rgba(255,255,255,.95);

  border-top:1px solid var(--border);

}

.composer textarea{

  flex:1;

  resize:none;

  height:40px;

  min-height:40px;

  max-height:40px;

  padding:8px 12px;

  border-radius:18px;

  border:1px solid var(--border);

  font-size:14px;

  line-height:1.2;

  overflow:hidden;

}

.composer button{

  flex:0 0 auto;

  height:40px;

  padding:0 14px;

  border:none;

  border-radius:18px;

  background:#111827;

  color:#fff;

  font-weight:700;

}

.composer button:disabled{

  opacity:.6;

  cursor:not-allowed;

}

/* ===== 下部ナビ ===== */

.bottom-nav{

  position:fixed;

  left:0;

  right:0;

  bottom:0;

  z-index:100;

  width:100%;

  max-width:520px;

  margin:0 auto;

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:8px;

  padding:10px 12px calc(10px + env(safe-area-inset-bottom));

  background:rgba(255,255,255,.92);

  backdrop-filter:blur(16px);

  border-top:1px solid rgba(17,24,39,.08);

  box-shadow:0 -8px 24px rgba(15,23,42,.08);

}

.nav-item{

  min-height:58px;

  border-radius:16px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:4px;

  text-decoration:none;

  color:var(--muted);

  transition:background .18s ease, color .18s ease, transform .18s ease;

}

.nav-item:visited,

.nav-item:hover,

.nav-item:active{

  text-decoration:none;

  color:inherit;

}

.nav-item.active{

  background:var(--primary-soft);

  color:var(--primary);

  font-weight:800;

}

.nav-item:active{

  transform:scale(0.97);

}

.nav-icon{

  font-size:20px;

  line-height:1;

}

.nav-text{

  font-size:12px;

  line-height:1;

  letter-spacing:.01em;

}

/* ===== モバイル ===== */

@media (max-width:480px){

  .bubble{

    max-width:180px;

    font-size:12px;

    padding:6px 8px;

  }

  .composer{

    padding:8px;

  }

  .composer textarea{

    font-size:13px;

  }

  .composer button{

    padding:0 12px;

    font-size:13px;

  }

}