/* =====================================================================
       Zii — liquid glass chatbot for zerokart.shop
       --------------------------------------------------------------------- */
    :root {
      --zk-emerald:       #2ecc55;
      --zk-emerald-hi:    #3ed968;
      --zk-forest:        #1e3a1f;
      --zk-forest-deep:   #0f2a14;
      --zk-wheat:         #f5efd0;
      --zk-ink:           #0d100e;
      --zk-ink-soft:      #3a4339;
      --zk-muted:         #6f766d;
      --zk-on-dark:       #fafaf5;

      /* Glass tokens */
      --zk-glass-panel:   rgba(252, 252, 248, 0.62);
      --zk-glass-header:  linear-gradient(180deg, rgba(252, 252, 248, 0.78) 0%, rgba(252, 252, 248, 0.55) 100%);
      --zk-glass-bot:     rgba(255, 255, 255, 0.55);
      --zk-glass-user:    rgba(30, 58, 31, 0.78);
      --zk-glass-chip:    rgba(245, 239, 208, 0.55);
      --zk-glass-input:   rgba(255, 255, 255, 0.45);

      --zk-rim:           rgba(255, 255, 255, 0.55);
      --zk-rim-soft:      rgba(255, 255, 255, 0.32);
      --zk-shadow-xl:     0 32px 80px rgba(10, 15, 12, 0.28),
                          0 12px 28px rgba(10, 15, 12, 0.16),
                          0 2px 4px rgba(10, 15, 12, 0.08);
      --zk-emerald-glow:  0 10px 32px rgba(46, 204, 85, 0.40),
                          0 4px 12px rgba(46, 204, 85, 0.20);

      --zk-sans:  "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --zk-serif: "Fraunces", "Times New Roman", serif;
    }

    /* ------------------------------------------------------------------ */
    /* Demo intro — light mode, warm cream backdrop                       */
    /* ------------------------------------------------------------------ */
    /* html, body {
      margin: 0;
      font-family: var(--zk-sans);
      color: var(--zk-ink);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background:
        radial-gradient(ellipse at 15% 0%,   rgba(194, 240, 74, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(30, 58, 31, 0.08)  0%, transparent 55%),
        radial-gradient(ellipse at 50% 50%,  rgba(245, 239, 208, 0.45) 0%, transparent 70%),
        linear-gradient(160deg, #fbfaf3 0%, #f4f1e3 100%);
    } */
    .zk-demo-page {
      max-width: 720px;
      margin: 0 auto;
      padding: 96px 32px 240px;
      color: var(--zk-ink);
    }
    .zk-demo-page h1 {
      font-family: var(--zk-serif);
      font-style: italic;
      font-size: 92px;
      font-weight: 400;
      letter-spacing: -0.03em;
      margin: 0 0 12px;
      line-height: 1;
      color: var(--zk-forest-deep);
      font-variation-settings: "opsz" 144;
    }
    .zk-demo-page .sub {
      font-size: 11.5px;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      color: var(--zk-muted);
      margin-bottom: 32px;
      font-weight: 500;
    }
    .zk-demo-page p {
      color: var(--zk-ink-soft);
      line-height: 1.7;
      font-size: 16px;
      max-width: 56ch;
    }
    .zk-demo-page code {
      background: rgba(30, 58, 31, 0.06);
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 13px;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      border: 1px solid rgba(30, 58, 31, 0.10);
    }

    /* ------------------------------------------------------------------ */
    /* Launcher — emerald glass orb                                        */
    /* ------------------------------------------------------------------ */
    #zk-launcher {
      position: fixed;
      right: 26px;
      bottom: 26px;
      width: 62px;
      height: 62px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,0.45) 0%, transparent 35%),
        linear-gradient(145deg, #3ed968 0%, #2ecc55 50%, #1fb845 100%);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: 1px solid rgba(255,255,255,0.35);
      box-shadow:
        inset 0 1px 1.5px rgba(255,255,255,0.55),
        inset 0 -8px 16px rgba(0, 70, 20, 0.20),
        var(--zk-emerald-glow);
      transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.22s ease;
      z-index: 999999;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    #zk-launcher:hover {
      transform: scale(1.08) translateY(-2px);
      box-shadow:
        inset 0 1px 1.5px rgba(255,255,255,0.6),
        inset 0 -8px 16px rgba(0, 70, 20, 0.20),
        0 14px 40px rgba(46, 204, 85, 0.50),
        0 6px 14px rgba(46, 204, 85, 0.25);
    }
    #zk-launcher:active { transform: scale(1.02); }
    #zk-launcher svg {
      width: 26px;
      height: 26px;
      filter: drop-shadow(0 1px 1px rgba(0, 50, 15, 0.25));
    }

    /* ------------------------------------------------------------------ */
    /* Glass panel                                                         */
    /* ------------------------------------------------------------------ */
    #zk-panel {
      position: fixed;
      right: 26px;
      bottom: 104px;
      width: 400px;
      max-width: calc(100vw - 32px);
      height: 640px;
      max-height: calc(100vh - 140px);
      background: var(--zk-glass-panel);
      backdrop-filter: blur(30px) saturate(180%);
      -webkit-backdrop-filter: blur(30px) saturate(180%);
      border: 1px solid var(--zk-rim);
      border-radius: 26px;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        inset 0 -1px 0 rgba(255,255,255,0.18),
        var(--zk-shadow-xl);
      overflow: hidden;
      display: none;
      flex-direction: column;
      z-index: 999998;
      animation: zk-rise 0.32s cubic-bezier(0.22, 1, 0.36, 1);
      font-family: var(--zk-sans);
      color: var(--zk-ink);
    }
    #zk-panel.open { display: flex; }
    @keyframes zk-rise {
      from { opacity: 0; transform: translateY(18px) scale(0.96); filter: blur(8px); }
      to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }

    /* ------------------------------------------------------------------ */
    /* Header — frosted, with the Zii wordmark as the centerpiece          */
    /* ------------------------------------------------------------------ */
    .zk-header {
      background: var(--zk-glass-header);
      padding: 22px 22px 18px;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      flex-shrink: 0;
      border-bottom: 1px solid rgba(255,255,255,0.45);
      position: relative;
    }
    .zk-header::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: -1px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(30, 58, 31, 0.08), transparent);
    }
    .zk-name {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }
    .zk-name .word {
      font-family: var(--zk-serif);
      font-style: italic;
      font-weight: 500;
      font-size: 40px;
      line-height: 0.95;
      letter-spacing: -0.025em;
      color: var(--zk-forest-deep);
      font-variation-settings: "opsz" 144;
    }
    .zk-name .sub {
      font-size: 10.5px;
      font-weight: 500;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--zk-muted);
    }
    .zk-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--zk-ink-soft);
      font-weight: 500;
      margin-top: 4px;
    }
    .zk-status::before {
      content: "";
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--zk-emerald);
      box-shadow: 0 0 0 2px rgba(46, 204, 85, 0.25);
      animation: zk-pulse 2s infinite;
    }
    @keyframes zk-pulse {
      0%, 100% { box-shadow: 0 0 0 2px rgba(46, 204, 85, 0.25); }
      50%      { box-shadow: 0 0 0 5px rgba(46, 204, 85, 0.05); }
    }
    .zk-header-actions { display: flex; gap: 4px; }
    .zk-header-btn {
      background: transparent;
      border: 0;
      color: var(--zk-ink-soft);
      cursor: pointer;
      width: 30px;
      height: 30px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.55;
      transition: opacity 0.18s ease, background 0.18s ease;
    }
    .zk-header-btn:hover { background: rgba(0,0,0,0.06); opacity: 1; }
    .zk-header-btn svg { width: 15px; height: 15px; }

    /* ------------------------------------------------------------------ */
    /* Messages                                                            */
    /* ------------------------------------------------------------------ */
    .zk-messages {
      flex: 1;
      overflow-y: auto;
      padding: 20px 18px 8px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .zk-messages::-webkit-scrollbar { width: 6px; }
    .zk-messages::-webkit-scrollbar-thumb { background: rgba(30, 58, 31, 0.20); border-radius: 4px; }
    .zk-messages::-webkit-scrollbar-track { background: transparent; }

    .zk-msg {
      max-width: 86%;
      padding: 11px 15px;
      font-size: 14px;
      line-height: 1.55;
      letter-spacing: 0.05px;
      word-wrap: break-word;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      animation: zk-bubble 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    }
    @keyframes zk-bubble {
      from { opacity: 0; transform: translateY(6px) scale(0.98); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .zk-msg.bot {
      background: var(--zk-glass-bot);
      color: var(--zk-ink);
      align-self: flex-start;
      border: 1px solid var(--zk-rim-soft);
      border-radius: 16px 16px 16px 6px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 8px rgba(10, 15, 12, 0.04);
    }
    .zk-msg.user {
      background: var(--zk-glass-user);
      color: var(--zk-on-dark);
      align-self: flex-end;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 16px 16px 6px 16px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 8px rgba(10, 15, 12, 0.10);
    }
    .zk-msg.error {
      background: rgba(253, 236, 239, 0.65);
      color: #b00020;
      align-self: flex-start;
      border: 1px solid rgba(176, 0, 32, 0.18);
      border-radius: 16px;
    }

    .zk-msg p { margin: 0 0 8px; }
    .zk-msg p:last-child { margin-bottom: 0; }
    .zk-msg strong { font-weight: 600; }
    .zk-msg em { font-style: italic; }
    .zk-msg code {
      background: rgba(0,0,0,0.07);
      padding: 1px 6px;
      border-radius: 4px;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 0.92em;
    }
    .zk-msg.user code { background: rgba(255,255,255,0.15); }
    .zk-msg ul, .zk-msg ol { margin: 6px 0 8px; padding-left: 20px; }
    .zk-msg li { margin: 3px 0; }
    .zk-msg a {
      color: var(--zk-forest);
      text-decoration: underline;
      text-underline-offset: 2px;
      font-weight: 500;
    }
    .zk-msg.user a { color: var(--zk-wheat); }
    .zk-msg a:hover { text-decoration-thickness: 2px; }

    /* Typing indicator */
    .zk-typing {
      display: inline-flex;
      gap: 5px;
      padding: 4px 2px;
      align-items: center;
    }
    .zk-typing span {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--zk-muted); opacity: 0.4;
      animation: zk-blink 1.3s infinite;
    }
    .zk-typing span:nth-child(2) { animation-delay: 0.18s; }
    .zk-typing span:nth-child(3) { animation-delay: 0.36s; }
    @keyframes zk-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

    /* ------------------------------------------------------------------ */
    /* Suggestion chips — frosted cream pills                              */
    /* ------------------------------------------------------------------ */
    .zk-suggestions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 6px 18px 10px;
    }
    .zk-chip {
      background: var(--zk-glass-chip);
      color: var(--zk-forest);
      border: 1px solid rgba(30, 58, 31, 0.45);
      border-radius: 999px;
      padding: 7px 14px;
      font-size: 12.5px;
      font-family: inherit;
      font-weight: 500;
      cursor: pointer;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
      letter-spacing: 0.1px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
    }
    .zk-chip:hover {
      background: var(--zk-forest);
      color: var(--zk-wheat);
      transform: translateY(-1px);
    }
    .zk-chip:active { transform: translateY(0); }

    /* ------------------------------------------------------------------ */
    /* Composer                                                            */
    /* ------------------------------------------------------------------ */
    .zk-composer {
      border-top: 1px solid rgba(30, 58, 31, 0.10);
      padding: 12px 14px 14px;
      display: flex;
      gap: 10px;
      align-items: flex-end;
      flex-shrink: 0;
      background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.25) 100%);
    }
    .zk-input {
      flex: 1;
      border: 1px solid rgba(30, 58, 31, 0.18);
      border-radius: 14px;
      padding: 11px 14px;
      font-size: 14px;
      background: var(--zk-glass-input);
      color: var(--zk-ink);
      outline: none;
      font-family: inherit;
      resize: none;
      max-height: 120px;
      line-height: 1.4;
      transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .zk-input:focus {
      border-color: var(--zk-forest);
      background: rgba(255,255,255,0.7);
      box-shadow: 0 0 0 3px rgba(30, 58, 31, 0.10);
    }
    .zk-input::placeholder { color: var(--zk-muted); }

    .zk-send {
      border: 1px solid rgba(255,255,255,0.25);
      background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,0.30) 0%, transparent 40%),
        linear-gradient(160deg, var(--zk-forest) 0%, var(--zk-forest-deep) 100%);
      color: var(--zk-on-dark);
      width: 44px;
      height: 44px;
      border-radius: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.12s ease, box-shadow 0.18s ease;
      flex-shrink: 0;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 4px 12px rgba(30, 58, 31, 0.28);
    }
    .zk-send:hover {
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 6px 16px rgba(30, 58, 31, 0.35);
    }
    .zk-send:active { transform: scale(0.96); }
    .zk-send:disabled { opacity: 0.4; cursor: wait; }
    .zk-send svg { width: 16px; height: 16px; }

    .zk-footer {
      font-size: 10px;
      text-align: center;
      color: var(--zk-muted);
      padding: 0 12px 12px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      font-weight: 500;
      flex-shrink: 0;
    }
    .zk-footer .mark {
      font-family: var(--zk-serif);
      font-style: italic;
      font-size: 14px;
      letter-spacing: 0;
      color: var(--zk-forest);
      text-transform: none;
      font-weight: 500;
      font-variation-settings: "opsz" 144;
    }

    @media (max-width: 480px) {
      #zk-panel { right: 8px; left: 8px; width: auto; bottom: 92px; height: 78vh; }
      #zk-launcher { right: 18px; bottom: 18px; }
      .zk-name .word { font-size: 34px; }
      .zk-demo-page h1 { font-size: 64px; }
    }


    /* image */
    .word{
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-size: 22px;
    font-weight: 700;
    color: #111;
}

.word img{
    width: 38px;
    height: 38px;
    object-fit: contain;
    display: block;
}