/* ============================================================
   ai-gardening-qa.css — PlantCare.dotiam.com
   Premium Chat Interface — aq- prefix
   ============================================================ */

/* ---------- Variables ---------- */
:root {
    --aq-primary:   #134e4a;
    --aq-accent:    #0d9488;
    --aq-light:     #2dd4bf;
    --aq-bg:        #f0fdfa;
    --aq-surface:   #ffffff;
    --aq-card:      #f8fffd;
    --aq-border:    #99f6e4;
    --aq-border-d:  #5eead4;
    --aq-text:      #1f2937;
    --aq-muted:     #6b7280;
    --aq-error:     #dc2626;
    --aq-user-bg:   #134e4a;
    --aq-ai-bg:     #f0fdfa;
    --aq-radius:    12px;
    --aq-radius-lg: 18px;
    --aq-shadow:    0 2px 16px rgba(13,148,136,.10);
    --aq-shadow-lg: 0 8px 40px rgba(13,148,136,.15);
    --aq-font:      'Inter', -apple-system, sans-serif;
    --grad-from:    #134e4a;
    --grad-to:      #2dd4bf;
}

*, *::before, *::after { box-sizing: border-box; }

/* ---------- Breadcrumb (reuses pi- from global) ---------- */
.pi-breadcrumb { background:#fff; border-bottom:1px solid var(--aq-border); padding:10px 0; }
.pi-bc-inner   { max-width:1200px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:8px; font-size:.8rem; }
.pi-bc-inner a { color:var(--aq-accent); font-weight:500; text-decoration:none; }
.pi-bc-sep     { color:var(--aq-muted); }

/* ---------- Hero ---------- */
.aq-hero {
    padding: 52px 20px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 280px;
}
.aq-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.aq-hero-inner   { position:relative; max-width:760px; margin:0 auto; }
.aq-hero-tag {
    display: inline-block;
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
    color: #fff; border-radius: 30px; padding: 5px 18px;
    font-size: .74rem; font-weight: 700; letter-spacing: .5px; margin-bottom: 16px;
}
.aq-hero-h1 {
    font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 900; color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.2); line-height: 1.15; margin: 0 0 6px;
}
.aq-hero-h1-hi  { display:block; font-size:clamp(.95rem,2.5vw,1.25rem); font-weight:600; opacity:.88; margin-top:6px; }
.aq-hero-sub    { font-size:clamp(.88rem,2vw,1rem); color:rgba(255,255,255,.92); margin:14px 0 4px; line-height:1.6; }
.aq-hero-sub-hi { font-size:.82rem; color:rgba(255,255,255,.78); margin:0 0 18px; }
.aq-hero-badges { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.aq-hero-badges span {
    background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3);
    color:#fff; border-radius:20px; padding:5px 14px; font-size:.75rem; font-weight:600;
}
@media(max-width:480px){ .aq-hero { padding:36px 16px 44px; } }

/* ---------- Tool Section ---------- */
.aq-tool-section { background:var(--aq-bg); padding:32px 0 48px; }
.aq-container    { max-width:1200px; margin:0 auto; padding:0 20px; }

/* Steps */
.aq-steps {
    display:flex; align-items:center; justify-content:center;
    gap:12px; flex-wrap:wrap; background:#fff;
    border:1px solid var(--aq-border); border-radius:50px;
    padding:14px 24px; margin-bottom:28px; box-shadow:var(--aq-shadow);
}
.aq-step-item  { display:flex; align-items:center; gap:10px; }
.aq-step-num {
    width:28px; height:28px;
    background:linear-gradient(135deg,var(--aq-primary),var(--aq-accent));
    color:#fff; border-radius:50%; font-size:.75rem; font-weight:800;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    box-shadow:0 2px 8px rgba(13,148,136,.35);
}
.aq-step-text strong { display:block; font-size:.82rem; font-weight:700; color:var(--aq-text); }
.aq-step-text span   { display:block; font-size:.7rem; color:var(--aq-muted); }
.aq-step-arrow { font-size:1.1rem; color:var(--aq-accent); font-weight:700; }
@media(max-width:640px){ .aq-steps{display:none;} }

/* ---------- Main Layout ---------- */
.aq-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 24px;
    align-items: start;
}
@media(max-width:960px){ .aq-layout { grid-template-columns:1fr; } }

/* ---------- Input Column ---------- */
.aq-input-col {
    background: var(--aq-surface);
    border: 1px solid var(--aq-border);
    border-radius: var(--aq-radius-lg);
    overflow: hidden;
    box-shadow: var(--aq-shadow);
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
@media(max-width:960px){ .aq-input-col { position:static; } }

/* Language Bar */
.aq-lang-bar {
    display: flex; border-bottom: 1px solid var(--aq-border); background: var(--aq-bg);
}
.aq-lang-item {
    flex: 1; text-align: center; padding: 10px 4px;
    font-size: .72rem; font-weight: 700; color: var(--aq-muted);
    border-right: 1px solid var(--aq-border); transition: all .2s;
}
.aq-lang-item:last-child { border-right: none; }
.aq-lang-item.active { background: #fff; color: var(--aq-primary); box-shadow: inset 0 -2px 0 var(--aq-accent); }

/* Welcome lang demo */
.aq-lang-demo { display:flex; flex-direction:column; gap:7px; margin:8px 0 14px; width:100%; max-width:380px; }
.aq-demo-item { display:flex; align-items:center; gap:10px; background:var(--aq-bg); border:1px solid var(--aq-border); border-radius:10px; padding:9px 14px; font-size:.82rem; color:var(--aq-text); font-weight:500; }
.aq-demo-flag { font-size:1.1rem; flex-shrink:0; }

/* Input footer */
.aq-input-footer { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.aq-lang-detected { font-size:.68rem; font-weight:700; color:var(--aq-accent); transition:all .3s; }

/* Quick Questions */
.aq-quick-section {
    padding: 16px;
    border-bottom: 1px solid var(--aq-border);
    background: var(--aq-bg);
}
.aq-quick-label { font-size:.72rem; font-weight:700; color:var(--aq-muted); margin-bottom:10px; }
.aq-quick-chips { display:flex; flex-wrap:wrap; gap:6px; }
.aq-chip {
    background: var(--aq-surface); border: 1.5px solid var(--aq-border-d);
    border-radius: 20px; padding: 5px 12px;
    font-size: .72rem; font-weight: 600; color: var(--aq-text);
    cursor: pointer; transition: all .2s; font-family: var(--aq-font);
    text-align: left; line-height: 1.4;
}
.aq-chip:hover { border-color:var(--aq-accent); color:var(--aq-accent); background:rgba(13,148,136,.06); }

/* Input wrap */
.aq-input-wrap { padding:16px; display:flex; flex-direction:column; gap:8px; }
.aq-input-label {
    font-size: .8rem; font-weight: 700; color: var(--aq-text);
    display: flex; flex-direction: column; gap: 2px;
}
.aq-input-hint { font-size:.68rem; font-weight:400; color:var(--aq-muted); }
.aq-textarea {
    width: 100%; padding: 12px 14px;
    border: 1.5px solid var(--aq-border-d);
    border-radius: var(--aq-radius); font-size:.88rem;
    color: var(--aq-text); background: var(--aq-card);
    resize: vertical; min-height: 120px; outline: none;
    font-family: var(--aq-font); transition: border-color .2s; line-height: 1.6;
}
.aq-textarea:focus { border-color:var(--aq-accent); box-shadow:0 0 0 3px rgba(13,148,136,.1); }
.aq-textarea::placeholder { color:#9ca3af; font-size:.82rem; }
.aq-input-footer { display:flex; justify-content:space-between; align-items:center; }
.aq-char-count { font-size:.68rem; color:var(--aq-muted); }
.aq-clear-btn {
    background:none; border:none; font-size:.72rem; color:var(--aq-muted);
    cursor:pointer; font-family:var(--aq-font); padding:2px 6px; border-radius:6px;
    transition:all .2s;
}
.aq-clear-btn:hover { color:var(--aq-error); background:rgba(220,38,38,.06); }

/* Ask Button */
.aq-ask-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: calc(100% - 32px); margin: 0 16px 16px;
    padding: 16px;
    background: linear-gradient(135deg, var(--aq-primary) 0%, var(--aq-accent) 100%);
    color: #fff; border: none; border-radius: var(--aq-radius);
    font-size: .95rem; font-weight: 800; cursor: pointer;
    transition: all .25s ease;
    box-shadow: 0 4px 18px rgba(13,148,136,.4);
    font-family: var(--aq-font);
}
.aq-ask-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 28px rgba(13,148,136,.55); }
.aq-ask-btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }

/* Trust strip */
.aq-trust {
    display: flex; align-items: center; justify-content: center;
    padding: 12px 16px; background: var(--aq-bg);
    border-top: 1px solid var(--aq-border); gap: 0;
}
.aq-trust-stat { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; }
.aq-trust-stat span  { font-size:1rem; }
.aq-trust-stat b     { font-size:.78rem; font-weight:900; color:var(--aq-primary); display:block; }
.aq-trust-stat small { font-size:.6rem; color:var(--aq-muted); text-transform:uppercase; letter-spacing:.5px; }
.aq-trust-div        { width:1px; height:28px; background:var(--aq-border-d); }

/* ---------- Chat Column ---------- */
.aq-chat-col {
    background: var(--aq-surface);
    border: 1px solid var(--aq-border);
    border-radius: var(--aq-radius-lg);
    overflow: hidden;
    box-shadow: var(--aq-shadow);
    min-height: 540px;
    display: flex;
    flex-direction: column;
}

/* Welcome state */
.aq-state {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 32px 24px; text-align: center; gap: 10px;
}
.aq-welcome-anim { position:relative; width:110px; height:110px; margin-bottom:12px; }
.aq-wl-ring {
    position:absolute; border-radius:50%;
    border:2px solid rgba(13,148,136,.2);
    animation:aqPulse 2.5s ease-out infinite;
}
.aq-wl-ring.r1{inset:0;animation-delay:0s}
.aq-wl-ring.r2{inset:-12px;animation-delay:.7s}
.aq-wl-ring.r3{inset:-24px;animation-delay:1.4s}
@keyframes aqPulse{0%{opacity:.6;transform:scale(.85)}100%{opacity:0;transform:scale(1.3)}}
.aq-wl-center {
    position:absolute; inset:12px;
    background:linear-gradient(135deg,var(--aq-primary),var(--aq-accent));
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:2.4rem; box-shadow:0 6px 20px rgba(13,148,136,.35);
}
.aq-state h3    { font-size:1.2rem; font-weight:800; color:var(--aq-primary); margin:0; }
.aq-state p     { font-size:.86rem; color:var(--aq-muted); max-width:340px; line-height:1.6; margin:0; }
.aq-state h4    { font-size:.95rem; font-weight:700; color:var(--aq-accent); margin:6px 0 0; }
.aq-wl-hi       { font-size:.82rem!important; }
.aq-wl-tags     { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:4px; }
.aq-wl-tags span { background:var(--aq-bg); border:1px solid var(--aq-border); border-radius:20px; padding:4px 12px; font-size:.72rem; color:var(--aq-text); font-weight:500; }

/* Chat messages area */
.aq-chat-messages {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    max-height: 520px;
    scroll-behavior: smooth;
}
.aq-chat-messages::-webkit-scrollbar { width:4px; }
.aq-chat-messages::-webkit-scrollbar-track { background:var(--aq-bg); }
.aq-chat-messages::-webkit-scrollbar-thumb { background:var(--aq-border-d); border-radius:4px; }

/* Individual message bubbles */
.aq-msg { display:flex; gap:10px; align-items:flex-start; animation:aqMsgIn .3s ease; }
@keyframes aqMsgIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.aq-msg-user { flex-direction:row-reverse; }

.aq-msg-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
}
.aq-msg-user .aq-msg-avatar { background:linear-gradient(135deg,var(--aq-primary),var(--aq-accent)); }
.aq-msg-ai   .aq-msg-avatar { background:linear-gradient(135deg,#0d9488,#2dd4bf); }

.aq-msg-bubble {
    max-width: 82%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: .875rem;
    line-height: 1.75;
    font-family: var(--aq-font);
}
.aq-msg-user .aq-msg-bubble {
    background: linear-gradient(135deg,var(--aq-primary),var(--aq-accent));
    color: #fff;
    border-radius: 16px 4px 16px 16px;
}
.aq-msg-ai .aq-msg-bubble {
    background: var(--aq-bg);
    border: 1px solid var(--aq-border);
    color: var(--aq-text);
    border-radius: 4px 16px 16px 16px;
}
.aq-msg-time {
    font-size: .62rem; color:var(--aq-muted);
    margin-top: 4px; display:block;
    text-align: right;
}
.aq-msg-user .aq-msg-time { text-align:left; color:rgba(255,255,255,.65); }

/* Typing indicator */
.aq-typing {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--aq-border);
    background: var(--aq-bg);
}
.aq-typing-avatar {
    width:34px; height:34px; border-radius:50%;
    background:linear-gradient(135deg,#0d9488,#2dd4bf);
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; flex-shrink:0;
}
.aq-typing-dots { display:flex; gap:4px; align-items:center; }
.aq-typing-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--aq-accent); display:block;
    animation: aqDot 1.2s ease-in-out infinite;
}
.aq-typing-dots span:nth-child(2) { animation-delay:.2s; }
.aq-typing-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes aqDot { 0%,80%,100%{transform:scale(.7);opacity:.5} 40%{transform:scale(1.1);opacity:1} }
.aq-typing-text { font-size:.78rem; color:var(--aq-muted); font-style:italic; }

/* Chat action buttons */
.aq-chat-actions {
    display: flex; gap: 8px; padding: 14px 20px;
    border-top: 1px solid var(--aq-border); background: var(--aq-bg);
    flex-wrap: wrap;
}
.aq-act-copy { background:#fff; color:var(--aq-text); border:1.5px solid var(--aq-border-d); border-radius:var(--aq-radius); padding:9px 16px; font-size:.8rem; font-weight:600; cursor:pointer; transition:all .2s; font-family:var(--aq-font); }
.aq-act-copy:hover { border-color:var(--aq-accent); color:var(--aq-accent); }
.aq-act-wa  { background:#25d366; color:#fff; border:none; border-radius:var(--aq-radius); padding:9px 16px; font-size:.8rem; font-weight:700; cursor:pointer; transition:all .2s; font-family:var(--aq-font); }
.aq-act-wa:hover { background:#20b857; }
.aq-act-new { background:#fff; color:var(--aq-muted); border:1.5px solid var(--aq-border-d); border-radius:var(--aq-radius); padding:9px 16px; font-size:.8rem; font-weight:600; cursor:pointer; transition:all .2s; font-family:var(--aq-font); }
.aq-act-new:hover { border-color:var(--aq-muted); color:var(--aq-text); }

/* ---------- SEO Section ---------- */
.aq-seo-section { background:#fff; padding:56px 0; border-top:1px solid var(--aq-border); content-visibility:auto; contain-intrinsic-size:0 600px; }
.aq-seo-grid    { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media(max-width:768px){ .aq-seo-grid { grid-template-columns:1fr; } }
.aq-seo-card    { border-radius:var(--aq-radius); padding:24px; }
.aq-seo-card.en { background:var(--aq-bg); border:1px solid var(--aq-border); }
.aq-seo-card.hi { background:#fff8f1; border:1px solid #fed7aa; }
.aq-seo-card h2 { font-size:1.05rem; font-weight:800; color:var(--aq-primary); margin:0 0 10px; line-height:1.4; }
.aq-seo-card.hi h2 { color:#9a3412; }
.aq-seo-card p  { font-size:.86rem; color:#374151; line-height:1.8; margin:0; }

/* Related / FAQ / Disclaimer — reuse pi- from plant-identifier.css via global */
.pi-related-section { background:var(--aq-bg); padding:56px 0; border-top:1px solid var(--aq-border); content-visibility:auto; contain-intrinsic-size:0 500px; }
.pi-faq-section     { background:#fff; padding:56px 0; border-top:1px solid var(--aq-border); content-visibility:auto; contain-intrinsic-size:0 800px; }
.pi-disclaimer      { background:#fffbeb; border:1px solid #fde68a; border-radius:var(--aq-radius); padding:14px 18px; font-size:.82rem; color:#92400e; line-height:1.6; margin:20px 0 28px; }

/* ---------- Mobile ---------- */
@media(max-width:480px){
    .aq-tool-section   { padding:20px 0 36px; }
    .aq-chat-messages  { padding:14px; max-height:400px; }
    .aq-msg-bubble     { font-size:.82rem; padding:10px 14px; }
    .aq-chat-actions   { padding:10px 14px; }
    .aq-quick-chips    { gap:5px; }
    .aq-chip           { font-size:.68rem; padding:4px 10px; }
    .aq-ask-btn        { margin:0 12px 12px; width:calc(100% - 24px); }
    .aq-seo-section    { padding:36px 0; }
}