/**
 * CityOnGo Chat – CSS v6.0
 * +10% larger logo (200px)
 * Reduced top spacing (equal to side padding)
 * Tighter line spacing between hero texts
 * © ProSign / CityOnGo 2025
 */

:root {
  --cg-green: #00ba8a;
  --cg-dark: #005950;
  --bg: #fafafa;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* ---------- Base layout ---------- */
body {
  margin: 0;
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #fff;
  color: #111;
}

#cog-chat {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}

/* ---------- Header ---------- */
#cog-head {
  background: var(--cg-dark);
  color: #fff;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
#cog-head .head-left {display:flex; align-items:center; gap:8px; min-width:0;}
#cog-head .brand-logo {width:26px; height:26px; border-radius:6px; background:#fff;}
#cog-head .brand-block {display:flex; flex-direction:column; line-height:1.0;}
#cog-head b {font-weight:800; font-size:15px; margin-bottom:1px;}
#cog-head .subtitle {font-size:12px; opacity:0.9; line-height:1.1;}
#cog-head #cog-close {all:unset; cursor:pointer; font-weight:800; line-height:1; padding:4px 6px; border-radius:8px;}
#cog-head #cog-close:hover {background:rgba(255,255,255,.15);}

/* ---------- Messages ---------- */
#cog-log {
  flex: 1;
  padding: 10px 12px;
  overflow-y: auto;
  background: var(--bg);
  scroll-behavior: smooth;
}
.cog-msg {margin:6px 0; display:flex; gap:8px;}
.cog-msg .b {
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px;
}
.cog-msg.bot .b {background:var(--cg-green); color:#fff;}
.cog-msg.bot .cog-bubble {
  background:#eefaf6; border:1px solid #d6f2e7;
  border-radius:14px 14px 14px 0; padding:8px 10px;
  flex:1; white-space:pre-wrap; line-height:1.35;
}
.cog-msg.user {justify-content:flex-end;}
.cog-msg.user .b {order:2; margin-left:8px; background:#ececec; color:#333;}
.cog-msg.user .cog-bubble {
  background:#eef2ff; border:1px solid #dfe5ff;
  border-radius:14px 14px 0 14px; padding:8px 10px;
  max-width:80%; white-space:pre-wrap; text-align:right; line-height:1.35;
}

/* ---------- Remove badge for first (hero) bubble ---------- */
.cog-msg.bot:first-of-type .b { display: none; }
.cog-msg.bot:first-of-type { justify-content: center; }
.cog-msg.bot:first-of-type .cog-bubble {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* ---------- Input ---------- */
#cog-form {display:flex; gap:8px; padding:10px; border-top:1px solid #eee; background:#fff;}
#cog-input {flex:1; padding:10px 12px; border:1px solid #ddd; border-radius:10px; font-size:14px;}
#cog-input:focus {outline:2px solid rgba(0,186,138,.25); outline-offset:2px;}
#cog-send {background:var(--cg-green); color:#fff; border:0; border-radius:10px; padding:10px 14px; font-weight:800; cursor:pointer;}
#cog-send:hover {background:#029c77;}
#cog-send:active {transform:translateY(1px);}
#cog-note {font-size:12px; color:#666; padding:8px 12px; background:#f6f6f6; border-top:1px dashed #e0e0e0;}

/* ---------- Hero Card ---------- */
.hero {
  max-width: 600px;
  margin: 2px auto 4px;        /* minskat toppavstånd */
  padding: 8px 10px 8px;       /* lika topp och sidor */
  text-align: center;
  background: linear-gradient(180deg,#ffffff,#f7fbf9);
  border: 1px solid #e7f2ee;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}
.hero-logo {
  width: 200px;                /* +10% */
  height: 200px;
  border-radius: 32px;
  display: block;
  margin: 0 auto 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.07);
}
.hero-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.0;
}
.hero-sub {
  margin: 1px 0 1px;
  color: #55756d;
  font-size: 14px;
  line-height: 1.0;           /* tajtare mellan rubrik och underrubrik */
}
.hero-sub2 {
  margin: 1px 0 0;
  color: #2b6c60;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.0;           /* tajtare nedåt */
}
.hero-welcome {
  margin-top: 2px;
  font-weight: 600;
  font-size: 13px;
  color: #0a0a0a;
  line-height: 1.25;
}

/* ---------- Language prompt ---------- */
.lang-prompt {display:flex; align-items:flex-start; gap:8px; margin:6px 12px 4px;}
.lang-prompt .b {width:26px; height:26px; border-radius:50%; background:var(--cg-green); color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center;}
.lang-prompt .cog-bubble {background:#eefaf6; border:1px solid #d6f2e7; border-radius:12px; padding:6px 10px; font-size:14px; flex:1; line-height:1.35;}

/* ---------- Quick buttons ---------- */
.quick-row {display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start;}
.quick-btn {
  border:none; background:var(--cg-green,#00ba8a); color:#fff;
  border-radius:14px; padding:8px 16px; font-weight:700; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  transition:background .2s, transform .1s, box-shadow .2s;
  margin:3px; font-size:13px;
}
.quick-btn:hover {background:#029c77; transform:translateY(-1px);}
.quick-btn:active {background:#008a6b; transform:translateY(1px);}
.quick-btn:focus {outline:2px solid rgba(0,186,138,.25); outline-offset:2px;}

/* ---------- Typing indicator ---------- */
.typing {display:inline-flex; gap:4px; align-items:center;}
.typing .dot {width:6px; height:6px; border-radius:50%; background:#6d8f86; opacity:.4; animation:bounce 1s infinite;}
.typing .dot:nth-child(2){animation-delay:.15s;}
.typing .dot:nth-child(3){animation-delay:.3s;}
@keyframes bounce {0%,80%,100%{transform:translateY(0);opacity:.35;}40%{transform:translateY(-4px);opacity:1;}}

/* ---------- Responsive tweaks ---------- */
@media (max-width:640px){
  #cog-head{padding:6px 9px;}
  .hero{max-width:100%; padding:8px; margin:2px 6px;}
  .hero-logo{width:205px; height:205px; margin-bottom:4px;}
  .hero-title{font-size:19px; line-height:1.0;}
  .hero-sub, .hero-sub2{font-size:13.5px; line-height:1.0;}
}