* { box-sizing: border-box; }
:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  color: #202124;
  background: #f3f5f6;
}
body { margin: 0; min-height: 100vh; }
button, input { font: inherit; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  height: 62px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: #06c755; color: white;
  box-shadow: 0 2px 8px #00000012;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 19px; }
.brand-mark, .welcome-mark {
  display: grid; place-items: center; border-radius: 12px; font-weight: 800;
  background: white; color: #06b84e;
}
.brand-mark { width: 32px; height: 32px; }
.icon-button {
  border: 0; background: transparent; color: white; font-size: 22px;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
}
.icon-button:hover { background: #ffffff25; }
.main-content {
  width: min(1180px, 100%); margin: 24px auto; padding: 0 18px;
  flex: 1; display: grid; grid-template-columns: 340px minmax(0, 1fr);
  gap: 18px; min-height: 520px;
}
.list-panel, .conversation-panel {
  background: white; border: 1px solid #e6e9eb; border-radius: 16px;
  box-shadow: 0 4px 18px #172b4d08;
}
.list-panel { display: flex; flex-direction: column; overflow: hidden; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px 14px; }
.eyebrow { margin: 0 0 4px; color: #8a9298; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
h1 { margin: 0; font-size: 24px; }
.new-chat { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #e9f9ef; color: #06b84e; font-size: 22px; }
.new-chat:disabled { opacity: .65; cursor: not-allowed; }
.search-box {
  margin: 0 16px 14px; padding: 9px 12px; border-radius: 10px;
  background: #f4f6f7; display: flex; align-items: center; gap: 8px; color: #7c858b;
}
.search-box span { font-size: 20px; line-height: 1; }
.search-box input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 13px; }
.talk-list { flex: 1; overflow: auto; }
.empty-state { min-height: 260px; padding: 36px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #7a8389; }
.empty-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 18px; background: #effaf3; color: #06b84e; font-size: 26px; margin-bottom: 15px; }
.empty-state strong { color: #454c51; font-size: 14px; }
.empty-state p { max-width: 230px; margin: 8px 0 0; font-size: 12px; line-height: 1.7; }
.conversation-panel { display: grid; place-items: center; min-width: 0; background: #fbfcfc; }
.welcome { padding: 30px; text-align: center; color: #737d83; }
.welcome-mark { width: 64px; height: 64px; border-radius: 22px; margin: 0 auto 18px; font-size: 28px; box-shadow: 0 8px 24px #06c75522; }
.welcome h2 { color: #343a3e; font-size: 19px; margin: 0 0 8px; }
.welcome p { font-size: 13px; line-height: 1.7; margin: 0 0 16px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e4e9e6; border-radius: 99px; padding: 5px 10px; font-size: 11px; }
.status-dot { width: 7px; height: 7px; background: #06c755; border-radius: 50%; }
.footer { padding: 0 24px 18px; color: #90989d; font-size: 11px; text-align: center; }
.footer span { margin-left: 8px; padding: 3px 7px; background: #e9edef; border-radius: 99px; }
@media (max-width: 700px) {
  .topbar { height: 56px; padding: 0 16px; }
  .main-content { grid-template-columns: 1fr; margin: 12px auto; padding: 0 12px; min-height: 0; }
  .list-panel { min-height: 360px; }
  .conversation-panel { min-height: 260px; }
}