:root{
  --gm-bg:#ffffff;
  --gm-surface:#f8f9fa;
  --gm-blue:#1a73e8;
  --gm-blue-soft:#e8f0fe;
  --gm-green:#25d366;
  --gm-text:#202124;
  --gm-text-2:#5f6368;
  --gm-border:#e0e3e7;
  --gm-bubble-in:#f1f3f4;
  --gm-bubble-out:#1a73e8;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:'Google Sans','Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  color:var(--gm-text);
  background:var(--gm-surface);
  -webkit-font-smoothing:antialiased;
}

/* layout */
.app-shell{display:flex;height:100vh;overflow:hidden}
.sidebar{
  width:400px;min-width:320px;background:var(--gm-bg);
  border-right:1px solid var(--gm-border);
  display:flex;flex-direction:column;
}
.chat-pane{flex:1;display:flex;flex-direction:column;background:var(--gm-bg);min-width:0}

/* search bar pill */
.search-pill{
  background:var(--gm-surface);border-radius:28px;height:48px;
  display:flex;align-items:center;gap:12px;padding:0 16px;
}
.search-pill input{
  border:none;outline:none;background:transparent;flex:1;
  font-size:15px;color:var(--gm-text);
}

/* conversation row */
.conv-row{
  display:flex;gap:14px;padding:12px 16px;cursor:pointer;
  border-radius:0 28px 28px 0;margin-right:10px;
  transition:background .12s ease;align-items:center;
}
.conv-row:hover{background:#f1f3f4}
.conv-row.active{background:var(--gm-blue-soft)}
.conv-row.active .conv-name{color:#174ea6}

.avatar{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:500;font-size:17px;letter-spacing:.3px;
}
.conv-name{font-size:15px;font-weight:500;line-height:1.3}
.conv-snippet{font-size:13.5px;color:var(--gm-text-2);line-height:1.35}
.conv-row.unread .conv-name,
.conv-row.unread .conv-snippet{font-weight:700;color:var(--gm-text)}
.conv-time{font-size:12px;color:var(--gm-text-2);white-space:nowrap}
.badge-unread{
  background:var(--gm-blue);color:#fff;border-radius:10px;
  min-width:20px;height:20px;font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;padding:0 6px;
}
.truncate-1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* chips */
.chip{
  border:1px solid var(--gm-border);border-radius:16px;padding:5px 14px;
  font-size:13px;color:var(--gm-text-2);cursor:pointer;background:#fff;
  white-space:nowrap;transition:all .12s;
}
.chip:hover{background:#f1f3f4}
.chip.active{background:var(--gm-blue-soft);border-color:var(--gm-blue-soft);color:#174ea6;font-weight:500}

/* bubbles */
.msg-row{display:flex;margin-bottom:4px;padding:0 4px}
.msg-row.out{justify-content:flex-end}
.bubble{
  max-width:min(70%,560px);padding:10px 14px;font-size:14.5px;line-height:1.45;
  word-wrap:break-word;white-space:pre-wrap;position:relative;
}
.bubble.in{background:var(--gm-bubble-in);color:var(--gm-text);border-radius:18px 18px 18px 4px}
.bubble.out{background:var(--gm-bubble-out);color:#fff;border-radius:18px 18px 4px 18px}
.bubble.bot{background:#188038}
.bubble.failed{background:#d93025}
.msg-meta{font-size:11px;margin-top:4px;opacity:.75}
.msg-row.out .msg-meta{text-align:right}

.day-divider{
  text-align:center;margin:18px 0 10px;font-size:12px;color:var(--gm-text-2);
}
.day-divider span{background:var(--gm-surface);padding:4px 12px;border-radius:12px}

/* composer */
.composer{
  border-top:1px solid var(--gm-border);padding:12px 16px;background:#fff;
}
.composer-box{
  background:var(--gm-surface);border-radius:26px;display:flex;align-items:flex-end;
  gap:10px;padding:8px 8px 8px 18px;
}
.composer-box textarea{
  border:none;outline:none;background:transparent;resize:none;flex:1;
  font-family:inherit;font-size:14.5px;line-height:1.45;max-height:120px;padding:8px 0;
}
.send-btn{
  width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:var(--gm-blue);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:opacity .15s;flex-shrink:0;
}
.send-btn:disabled{opacity:.35;cursor:not-allowed}

/* misc */
.scroll-y{overflow-y:auto;scrollbar-width:thin}
.scroll-y::-webkit-scrollbar{width:8px}
.scroll-y::-webkit-scrollbar-thumb{background:#dadce0;border-radius:4px}
.icon-btn{
  width:40px;height:40px;border-radius:50%;border:none;background:transparent;
  color:var(--gm-text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.icon-btn:hover{background:#f1f3f4}

.toggle-human{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;
  border:1px solid var(--gm-border);border-radius:18px;padding:6px 12px;cursor:pointer;background:#fff;
}
.toggle-human.on{background:#e6f4ea;border-color:#ceead6;color:#137333;font-weight:500}

.empty-state{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--gm-text-2);gap:14px;text-align:center;padding:24px;
}

@media (max-width:880px){
  .sidebar{width:100%;min-width:0}
  .app-shell.mobile-chat .sidebar{display:none}
  .app-shell:not(.mobile-chat) .chat-pane{display:none}
  .bubble{max-width:82%}
}