:root{
  --bg:#e8f5ee;
  --panel:#f7fffb;
  --accent:#1c8f6b;
  --accent-2:#0f6f56;
  --text:#0b2b22;
  --muted:#5a6b64;
  --chip:#d7efe5;
  --card-border:#d8e8df;
  --shadow:0 6px 24px rgba(0,0,0,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  background: var(--bg);
  color: var(--text);
}

/* Header */
.header{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:12px;
  padding:8px 12px; background:var(--panel); border-bottom:1px solid var(--card-border);
}
.header .logo{display:flex; align-items:center; gap:10px}
.header img{
  height:60px; width:auto;
  filter: contrast(1.18) saturate(1.1) drop-shadow(0 1px 0 rgba(0,0,0,0.08));
}

/* Top controls */
.topbar{margin-left:auto; display:grid; gap:8px; align-items:center}
@media (min-width: 820px){
  .topbar{ grid-template-columns: 1fr 1fr 1fr auto; } /* equal lengths */
}
@media (max-width: 819px){
  .topbar{ grid-template-columns: 1fr; }
}
.select, .input{
  background:white; border:1px solid var(--card-border); border-radius:10px;
  padding:8px 12px; box-shadow: var(--shadow); height:44px; font-size:16px; line-height:1.2; /* 16px prevents iOS zoom */
}
.button{ background:var(--accent); color:white; border:none; padding:0 14px; border-radius:12px; cursor:pointer; height:44px }
.button.secondary{ background:white; color:var(--accent); border:1px solid var(--accent) }
.button.icon{ padding:8px 10px; border-radius:10px; height:40px }

/* App container */
.app{ max-width: 900px; margin: 0 auto; padding: 12px; display:flex; flex-direction:column; gap:12px; }

/* Map */
#mini-map { width: 100%; min-height: 220px; height: 240px; border-radius: 12px; background:#e9f2ee; border:1px solid var(--card-border) }

/* Chat + cards */
.chat{ display:flex; flex-direction:column; gap:12px; }
.msg, .card{ width:100%; }
.msg{
  padding:14px 16px; border-radius:14px; box-shadow: var(--shadow);
  background:white; border:1px solid var(--card-border);
}
.msg.bot{ background:#f3faf7; border-left:4px solid var(--accent) }
.msg.user{ background:#ffffff; border-left:4px solid var(--accent-2) }
.msg .small{color:var(--muted); font-size:12px}

.card{ background:white; border:1px solid var(--card-border); border-radius:16px; box-shadow:var(--shadow); padding:14px 16px; }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.stat{ background:#fff; border:1px solid var(--card-border); border-radius:12px; padding:10px 12px }
.stat .label{ color:var(--muted); font-size:12px }
.stat .value{ font-weight:700; font-size:18px }

/* Input bar */
.inputbar{
  position:sticky; bottom:0; background: var(--panel); border-top:1px solid var(--card-border);
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom)); /* comfy on iOS */
  flex-wrap: nowrap;                 /* prevent wrapping that pushes Send off-screen */
}
.inputbar .button { flex: 0 0 auto; } /* buttons keep their size */
.inputbar input{
  flex: 1 1 auto;                    /* input grows/shrinks */
  min-width: 0;                      /* allow shrinking so Send stays visible */
  border:1px solid var(--card-border); border-radius:12px; padding:10px 12px;
  font-size:16px;                    /* 16px prevents iOS zoom */
}

/* ⭐ Suggestions button: keep label on one line; hide label on very small screens */
.btn-suggest{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.btn-suggest .label{ font-weight:600; }
@media (max-width: 480px){
  .btn-suggest .label{ display:none; }  /* icon-only on small screens */
  .inputbar{ gap:6px; }
}

/* Extra safety on iOS Safari */
@supports (-webkit-touch-callout: none) {
  input, select, textarea, button { font-size: 16px; }
}

/* --- Center the main column on all phones (incl. iPhone 12/13/14/15/16) --- */
.app{
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

/* Ensure the major blocks inside .app stay aligned & centered */
.app > #welcomeTop,
.app > #mini-map,
.app > .chat{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Prevent any tiny horizontal overflow from shifting the viewport */
html, body { overflow-x: hidden; }

/* Long messages/suggestions shouldn't cause horizontal scroll */
.msg, .card { overflow-wrap: anywhere; word-break: break-word; }

/* Center header content and respect iOS safe areas */
.header{
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  flex-wrap: wrap; /* lets the topbar wrap cleanly on phones */
}

/* Make sure the topbar can shrink and doesn’t cause overflow */
.topbar{ min-width: 0; }

/* Desktop / wide: keep your original right alignment, but cap width */
@media (min-width: 820px){
  .topbar{
    margin-left: auto;   /* same behavior as before on desktop */
    max-width: 900px;    /* aligns with .app width visually */
  }
}

/* Phones: center the row visually and keep widths sane */
@media (max-width: 819px){
  .header{ justify-content: center; }  /* center the children */
  .logo{ margin-right: auto; }         /* keep logo visually left */
  .topbar{
    margin-left: 0;       /* remove the “push right” */
    width: 100%;
    max-width: 900px;
    margin-top: 6px;
  }
}

/* --- Mobile-only compact header/topbar (keeps widths the same) --- */
@media (max-width: 480px){
  /* Slimmer header padding */
  .header{
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* Slightly smaller logo */
  .header img{
    height: 46px; /* was 56px */
  }

  /* Tighten spacing between controls */
  .topbar{
    gap: 6px;      /* was 8px */
    margin-top: 4px;
  }

  /* Shorter controls, same full width */
  .select, .input{
    height: 40px;           /* was 44px */
    padding: 6px 10px;      /* slightly tighter */
    font-size: 16px;        /* keep 16px to avoid iOS zoom */
    line-height: 1.2;
  }

  /* Buttons a touch shorter too */
  .button{
    height: 40px;           /* was 44px */
    padding: 0 12px;
  }
  .button.icon{
    height: 36px;           /* compact icons */
    padding: 6px 8px;
  }

  /* Welcome card margin trimmed so more map is visible above the fold */
  #welcomeTop{
    padding: 10px 12px;
    margin-bottom: 8px;
  }
}

/* Context pill (Crop • Location • Start date) */
.context-pill{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  background:#fff; border:1px solid var(--card-border);
  border-radius:999px; padding:6px 10px; box-shadow:var(--shadow);
  font-size:14px; color:var(--text);
}
.context-pill .chip{
  background:var(--chip); border:1px solid var(--card-border);
  border-radius:999px; padding:4px 8px;
}
.context-pill .label{ color:var(--muted); margin-right:4px; }