/* ═══════════════════════════════════════════════
   Tabby Chatbot — Aqua-themed Styles
   Extracted from index2.html inline styles
   ═══════════════════════════════════════════════ */

.tabby-wrap{position:fixed;right:16px;bottom:0;z-index:99999999;pointer-events:none;display:flex;flex-direction:column;align-items:flex-end}
.tabby-wrap *{pointer-events:auto}
.tabby-img{display:block;width:110px;height:auto;cursor:pointer;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));transition:transform .2s ease}
.tabby-img:hover{transform:scale(1.05)}

/* ── Grey Aqua speech bubble (dormant) ── */
.tabby-speech{position:absolute;bottom:100%;right:60px;margin-bottom:4px;color:#fff;font-family:'Lucida Grande','IBM Plex Sans',sans-serif;font-size:.82rem;font-weight:600;padding:7px 14px;white-space:nowrap;cursor:pointer;transition:opacity .25s ease;line-height:1.4;text-shadow:0 -1px 1px rgba(0,0,0,.2);border:1px solid rgba(120,130,140,.5);border-radius:14px!important;background:linear-gradient(180deg,#d0d6dc 0%,#a8b2bc 45%,#8a96a2 55%,#b8c2cc 100%);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -1px 0 rgba(0,0,0,.12) inset,0 3px 10px rgba(60,70,80,.25)}
.tabby-speech::after{content:'';position:absolute;bottom:-7px;right:24px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #8a96a2;filter:drop-shadow(0 1px 1px rgba(60,70,80,.2))}

/* ── Aqua panel ── */
.tabby-panel{display:none;width:min(370px,90vw);max-height:min(60vh,500px);color:#222;border:1px solid rgba(0,70,140,.5);border-radius:12px!important;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 14px 44px rgba(0,40,90,.28);margin-bottom:8px;overflow:hidden;flex-direction:column;font-family:'Lucida Grande','IBM Plex Sans',sans-serif;background:linear-gradient(180deg,#eaf4fb 0%,#ffffff 100%)}
.tabby-panel.is-open{display:flex}

/* ── Aqua title bar ── */
.tabby-panel-head{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#fff;text-shadow:0 -1px 1px rgba(0,0,0,.3);border-bottom:1px solid rgba(0,60,120,.35);background:linear-gradient(180deg,#8dd0f7 0%,#4ba3dc 42%,#2a7dc0 58%,#5db8ee 100%);box-shadow:0 1px 0 rgba(255,255,255,.35) inset}
.tabby-panel-close{background:none;border:none;font-size:1rem;cursor:pointer;color:rgba(255,255,255,.85);line-height:1;padding:0 2px;text-shadow:0 -1px 1px rgba(0,0,0,.25)}
.tabby-panel-close:hover{color:#fff}

/* ── Inventory bar ── */
.tabby-inv{display:none;padding:5px 14px;font-size:.68rem;color:#3a6080;border-bottom:1px solid rgba(0,60,120,.12);background:linear-gradient(180deg,#e0eef8 0%,#f0f7fd 100%);white-space:nowrap;overflow-x:auto}
.tabby-inv.has-items{display:block}
.tabby-inv-label{font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-right:6px}
.tabby-inv-item{display:inline-block;padding:2px 7px;margin:1px 3px;font-size:.64rem;font-weight:600;color:#1a4060;border:1px solid rgba(0,70,140,.25);border-radius:4px!important;background:linear-gradient(180deg,#f8fcff 0%,#dce9f4 100%);box-shadow:0 1px 0 rgba(255,255,255,.5) inset}

/* ── Log area ── */
.tabby-log{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(180deg,rgba(220,238,252,.4) 0%,rgba(255,255,255,0) 60%)}

/* ── Message bubbles ── */
.tabby-msg{font-size:.84rem;line-height:1.45;padding:8px 11px;max-width:88%}
.tabby-msg--bot{align-self:flex-start;color:#1a1a1a;border:1px solid rgba(0,70,140,.18);border-radius:10px 10px 10px 2px!important;background:linear-gradient(180deg,#f0f7fd 0%,#dfedf8 100%);box-shadow:0 1px 3px rgba(0,60,120,.1)}
.tabby-msg--user{align-self:flex-end;color:#fff;text-shadow:0 -1px 1px rgba(0,0,0,.2);border:1px solid rgba(0,60,130,.45);border-radius:10px 10px 2px 10px!important;background:linear-gradient(180deg,#7ec8f3 0%,#3895d3 45%,#2575b5 55%,#52b0ea 100%);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 2px 6px rgba(0,50,110,.18)}
.tabby-msg--system{align-self:center;color:#6a4fb8;font-size:.72rem;font-style:italic;padding:4px 10px;border:1px dashed rgba(100,80,180,.3);border-radius:8px!important;background:rgba(140,120,220,.08)}
.tabby-msg--item{align-self:center;color:#2a7040;font-size:.72rem;font-weight:700;padding:4px 10px;border:1px solid rgba(40,120,70,.3);border-radius:8px!important;background:linear-gradient(180deg,#e8f7ed 0%,#d4eeda 100%);box-shadow:0 1px 2px rgba(40,100,60,.1)}

/* ── Choices ── */
.tabby-choices{padding:8px 14px 12px;display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid rgba(0,60,120,.12);background:linear-gradient(180deg,#f6fafd 0%,#eef5fb 100%)}
.tabby-choice{color:#1a3a5c;padding:6px 12px;font-size:.74rem;font-weight:700;cursor:pointer;text-shadow:0 1px 0 rgba(255,255,255,.7);border:1px solid rgba(0,70,140,.35);border-radius:6px!important;background:linear-gradient(180deg,#fafeff 0%,#d8eaf8 100%);box-shadow:0 1px 0 rgba(255,255,255,.65) inset,0 1px 3px rgba(0,50,100,.12);transition:background .15s,box-shadow .15s,border-color .15s}
.tabby-choice:hover{border-color:rgba(0,80,160,.55);background:linear-gradient(180deg,#e4f1fb 0%,#c5ddf2 100%);box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 2px 6px rgba(0,50,100,.18)}
.tabby-choice:active{background:linear-gradient(180deg,#b8d4ec 0%,#d4e8f8 100%);box-shadow:0 1px 2px rgba(0,50,100,.2) inset}
.tabby-choice:disabled{opacity:.4;cursor:default}

/* ── Input row ── */
.tabby-input-row{padding:6px 14px 10px;border-top:1px solid rgba(0,60,120,.1);background:#f8fbfe}
.tabby-input-row input{width:100%;padding:7px 10px;font-size:.78rem;color:#999;cursor:not-allowed;border:1px solid rgba(0,70,140,.3);border-radius:6px!important;background:linear-gradient(180deg,#edf3f9 0%,#fff 100%);box-shadow:0 1px 3px rgba(0,50,100,.1) inset}
.tabby-input-hint{font-size:.65rem;color:#8aa;margin-top:3px;text-align:center}
@keyframes tabby-shake{0%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-4px)}100%{transform:translateX(0)}}
.tabby-panel.is-shake{animation:tabby-shake .35s ease}

/* ── Mobile: move Tabby to left, flip image ── */
@media (max-width: 960px) {
  .tabby-wrap {
    right: auto;
    left: 16px;
    align-items: flex-start;
  }
  .tabby-img {
    width: 55px;
    transform: scaleX(-1);
  }
  .tabby-img:hover {
    transform: scaleX(-1) scale(1.05);
  }
  .tabby-speech {
    right: auto;
    left: 40px;
    font-size: .68rem;
    padding: 5px 10px;
  }
  .tabby-speech::after {
    right: auto;
    left: 16px;
  }
  .tabby-panel {
    /* align panel to left edge instead of right */
  }
}