:root{
  --bg:#f0f0f0;
  --card:linear-gradient(180deg,#ffffff,#f3f3f3);
  --accent:#6b6b6b; /* neutral gray accent */
  --logo-red:#8B0000; /* dark red brand accent */
  --point-s-blue:#003366; /* Point S deep blue for controls */
  --text-primary:#222222;
  --text-accent:var(--accent);
  --muted:#6b6b6b;
  --radius:10px;
  --gap:10px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Ensure full-viewport layout and prevent page scroll */
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{
  background:linear-gradient(180deg,var(--bg),#f7faf6);
  color:var(--text-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  -webkit-font-smoothing:antialiased;
}

/* Card sized to fit viewport with small margins */
.card{
  width:100%;
  max-width:760px;
  height:calc(100vh - 16px); /* fit viewport minus padding */
  background:var(--card);
  border-radius:12px;
  box-shadow: 0 8px 22px rgba(10,25,15,0.07), inset 0 1px 0 rgba(255,255,255,0.6);
  padding:12px;
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  align-items:start;
  transform-origin:center;
  opacity:0;
  transform:translateY(8px) scale(0.998);
  transition:opacity .4s ease, transform .45s cubic-bezier(.2,.9,.25,1);
  overflow:hidden;
}
.card.enter{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Header */
.header{
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:linear-gradient(90deg, rgba(11,107,58,0.04), rgba(139,0,0,0.02));
  padding:6px;
  border-radius:10px;
}
.logo{
  width:68px;
  height:68px;
  object-fit:contain;
  border-radius:10px;
  background:linear-gradient(180deg,#eef9ee,#ffffff);
  padding:8px;
  box-shadow:0 8px 16px rgba(11,27,18,0.06);
  transition:transform .18s ease, box-shadow .18s ease;
}
.logo:hover{ transform:translateY(-3px) scale(1.01); box-shadow:0 10px 20px rgba(11,27,18,0.10); }

/* Large static one-line notice above brand (prominent, not animated) */
.static-notice{
  display:block;
  width:100%;
  text-align:left;
  font-size:1.15rem;
  font-weight:400; /* normal weight instead of very bold */
  color:#fff;
  margin-bottom:8px;
  letter-spacing:0.2px;
  text-transform:none; /* keep original casing, not uppercase */
  line-height:1.15;
  /* strong red highlight for the move notice */
  background:linear-gradient(90deg, #8B0000, #b30000);
  padding:8px 12px;
  border-radius:10px;
  box-shadow:0 10px 26px rgba(139,0,0,0.14), 0 1px 0 rgba(255,255,255,0.06) inset;
  border:1px solid rgba(139,0,0,0.12);
}

/* Inline brand row */
.brand-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  justify-content:flex-start;
}
.brand-left{
  display:flex;
  align-items:center;
  gap:10px;
}
.logo-inline{
  width:84px;
  height:84px;
  padding:8px;
  border-radius:10px;
  box-shadow:0 12px 26px rgba(11,27,18,0.09);
  transition:transform .2s ease, box-shadow .2s ease;
}
a{color:var(--text-accent);text-decoration:underline}
.meta h1{
  margin:0;
  font-size:2rem;
  line-height:1.02;
  color:inherit;
  text-transform:uppercase;
  letter-spacing:0.4px;
  display:flex;
  align-items:center;
  gap:8px;
}

/* Brand parts */
.brand{display:inline-block;font-style:italic;font-weight:800;letter-spacing:0.3px}
.brand .reifen{color:#8B0000}
.brand .kamphofner{color:#000}
.sub{margin:4px 0 0 0;color:var(--muted);font-size:0.84rem}

/* Notice pill */
.notice{
  display:inline-block;
  margin-top:8px;
  padding:8px 12px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(107,107,107,0.12), rgba(107,107,107,0.04));
  color:var(--logo-red);
  font-size:0.94rem;
  font-weight:400;
  box-shadow: 0 8px 20px rgba(139,0,0,0.06);
  animation: floatNotice 4s ease-in-out infinite;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Floating animation */
@keyframes floatNotice{0%{ transform:translateY(0) }50%{ transform:translateY(-4px) }100%{ transform:translateY(0) }}

/* Layout adjustments for compact fit */
.info{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
  align-items:start;
  font-size:0.9rem;
}
.info h2{margin:0 0 6px 0;font-size:0.85rem;color:#222}
.info p{margin:2px 0;color:var(--text-accent)}

/* Constrain map area so card fits vertically */
.map{
  height:120px; /* reduced to keep layout fitting with larger headline */
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(180deg,#f2fff5,#ecf7ef);
  border:2px solid rgba(10,110,48,0.08);
  box-shadow:0 8px 20px rgba(10,70,35,0.04);
}
.map iframe{width:100%;height:100%;border:0;display:block}

/* Actions row */
.actions{
  display:flex;
  gap:8px;
  align-items:center;
}

/* Rim button: use provided wheel image as visual, keep same touch size and brand feel */
.rim-btn{
  flex:0 0 auto;
  /* auto width slightly larger than the label "Felgen" (reduced to half) */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:43px;        /* reduced to roughly half the original width */
  height:44px;           /* compact, touch-friendly */
  padding:0 10px;
  border-radius:10px;
  overflow:hidden;
  position:relative;
  /* use theme Point S blue for Felgenkonfigurator button */
  background-color:var(--point-s-blue);
  color:#ffffff;
  font-weight:800;
  font-size:0.95rem;
  text-transform:none;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(0,102,204,0.12);
  border:1px solid rgba(255,255,255,0.06);
}
.rim-btn::after{
  /* subtle ring overlay to make it look like a rim control */
  content:'';
  position:absolute;
  inset:6px;
  border-radius:999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 8px rgba(0,0,0,0.08);
  pointer-events:none;
}

/* Rim page layout (simple centered card matching design) */
.rim-page{
  width:100%;
  max-width:760px;
  height:calc(100vh - 16px);
  background:var(--card);
  border-radius:12px;
  box-shadow: 0 8px 22px rgba(10,25,15,0.07), inset 0 1px 0 rgba(255,255,255,0.6);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.rim-page .logo-inline{ width:140px; height:140px; padding:12px; }
.rim-page h1{ margin:0; font-size:2.6rem; text-transform:uppercase; letter-spacing:0.6px; text-align:center; }
.rim-page .rim-actions{ display:flex; gap:10px; margin-top:8px; width:100%; justify-content:center; }
.rim-page .btn.back{
  background:var(--logo-red);
  color:#fff;
  min-width:180px;
  padding:12px 16px;
  font-weight:800;
}
.rim-page .btn.open{
  background:var(--point-s-blue);
  color:#fff;
  min-width:180px;
  padding:12px 16px;
  font-weight:800;
}

/* Chat UI compacted to fit */
.chat{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* header with small avatar and title */
.chat-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.bot-avatar{width:32px;height:32px;min-width:32px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fff,#f0f3f0);border:1px solid rgba(11,107,58,0.06);box-shadow:0 4px 8px rgba(11,27,18,0.04);font-size:16px}
.chat-title{margin:0;font-size:0.95rem;font-weight:800;color:var(--logo-red)}

/* Smaller chat window but still scrollable */
.chat-window{
  min-height:56px;
  max-height:76px; /* slightly reduced to preserve overall fit */
  overflow:auto;
  padding:8px;
  border-radius:8px;
  background:linear-gradient(180deg,#ffffff,#f6fff6);
  border:2px solid rgba(10,110,48,0.08);
  box-shadow:0 6px 16px rgba(10,70,35,0.04);
}
.chat-msg{padding:6px 8px;margin:6px 0;border-radius:8px;max-width:86%;word-wrap:break-word;font-size:0.88rem;line-height:1.15}
.chat-msg.user{
  background:linear-gradient(90deg, rgba(11,107,58,0.10), rgba(112,0,0,0.06));
  color:var(--text-primary);
  margin-left:auto;
  text-align:right;
  font-weight:800;
  border:1px solid rgba(0,0,0,0.04);
}
.chat-msg.assistant{
  background:linear-gradient(90deg, rgba(112,0,0,0.10), rgba(10,110,48,0.04));
  color:var(--logo-red);
  border:1px solid rgba(112,0,0,0.08);
  font-weight:700;
}
.chat-typing{ opacity:0.8; font-style:italic; }

/* Compact form controls */
.chat-form{display:flex;gap:6px;align-items:center}
.chat-input{
  flex:1;
  min-height:44px;
  padding:8px 12px;
  border-radius:10px;
  /* only the border is emphasized (gray) — other colors returned to neutral */
  border:3px solid rgba(0,0,0,0.12);
  background:linear-gradient(180deg,#ffffff,#fbfbfb);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  font-size:0.96rem;
  font-weight:400;
  transition: box-shadow .16s ease, border-color .16s ease, transform .10s ease;
}

/* clearer focus state */
.chat-input:focus{
  outline:none;
  border-color: rgba(0,0,0,0.22);
  /* subtle focus glow */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

/* slightly dimmer placeholder for readability */
.chat-input::placeholder{
  color: rgba(10,10,10,0.45);
  font-weight:400;
}
.chat-note{font-size:0.78rem;color:var(--muted);text-align:center}
.btn{flex:1;min-height:40px;background:var(--accent);color:white;border:0;border-radius:10px;padding:8px 10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;position:relative;overflow:hidden}
.btn:active{ transform:translateY(1px) scale(.998); opacity:.98 }
.btn::after{ content:""; position:absolute; inset:0; border-radius:10px; transition:background .28s ease; pointer-events:none; }

/* vCard and special buttons */
#vcardBtn{background:var(--logo-red);border:0;color:white;box-shadow:0 10px 28px rgba(112,0,0,0.14); transform:translateZ(0)}
#chatSend{background:#000;color:#fff;border:0;box-shadow:none;min-height:40px;border-radius:10px;padding:8px 10px}
.btn.outline{background:transparent;color:var(--text-accent);border:1px solid rgba(139,0,0,0.10);box-shadow:none}

/* Directions button: black background with white text (use same font styling as vCard button) */
#directions{
  background:#000;
  color:#fff;
  border:0;
  box-shadow:none;
  font-weight:700;
}
/* slight hover feedback */
#directions:hover{
  filter:brightness(1.05);
}

/* ripple */
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,0.18);animation:ripple .6s linear;pointer-events:none}
@keyframes ripple{to{ transform:scale(4); opacity:0; }}

/* Footer compact */
.note{
  font-size:0.88rem;
  color:var(--logo-red);
  text-align:center;
  padding:8px 10px;
  margin-top:6px;
  background:linear-gradient(90deg, rgba(139,0,0,0.06), rgba(11,107,58,0.02));
  border-radius:8px;
  border:1px solid rgba(139,0,0,0.08);
  box-shadow:0 6px 14px rgba(11,27,18,0.03);
  font-weight:700;
  line-height:1.1;
  word-break:break-word;
}

/* Responsive fallback for very narrow screens */
@media (max-width:420px){
  .info{grid-template-columns:1fr}
  .logo{width:48px;height:48px}
  .card{padding:10px;height:calc(100vh - 12px)}
  .map{height:120px}
  .chat-window{max-height:80px}
}