:root{
  --aic-bg:#0b0f14;
  --aic-panel:#0f1620;
  --aic-text:#e7eef7;
  --aic-muted:#9fb0c2;
  --aic-border:rgba(255,255,255,.08);
  --aic-radius:14px;
}

/* base */
#ai-catalog-root, #ai-catalog-root * { box-sizing:border-box; }

.aic-layout{
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:100vh;
  border:1px solid var(--aic-border);
  border-radius:var(--aic-radius);
  overflow:hidden;
  background:var(--aic-bg);
  color:var(--aic-text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.aic-sidebar-toggle,
.aic-sidebar-overlay{
  display:none;
}

.aic-sidebar{
  background:var(--aic-panel);
  border-right:1px solid var(--aic-border);
  padding:14px;
  display:flex;
  flex-direction:column;
}

.aic-main{ padding:14px; }

.aic-main-grid{
  display:grid;
  grid-template-rows: 1fr;
  min-height:78vh;
}

.aic-panels{
  display:flex;
  flex-direction:column;
  min-height:78vh;
  height: calc(100vh - 140px);
  max-height: calc(100vh - 70px);
}

.aic-panel{
  min-height: 0;
}

.aic-panel-top{
  flex: 1 1 auto;
  overflow: hidden;
}

.aic-panel-bottom{
  flex: 0 0 180px;
  min-height: 140px;
  display:flex;
  flex-direction:column;
  border-top: 1px solid var(--aic-border);
  background: rgba(0,0,0,0.22);
}

.aic-resizer{
  height: 8px;
  cursor: ns-resize;
  background: rgba(255,255,255,0.06);
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.aic-resizer:hover{
  background: rgba(255,255,255,0.12);
}

body.aic-resizing{
  cursor: ns-resize;
  user-select: none;
}

.aic-chat{ padding:18px; height:100%; }

.aic-chat .aic-workspace,
.aic-chat .aic-welcome{
  height:100%;
}

.aic-chatlog{
  flex: 1 1 auto;
  overflow: auto;
  padding: 10px 14px 6px 14px;
  color: var(--aic-text);
  min-height: 0;
}

/* input bar */
.aic-inputbar{
  padding:14px;
  border-top:1px solid var(--aic-border);
  display:grid;
  grid-template-columns: 1fr auto auto; /* input, spinner, send */
  align-items:center;
  gap:10px;
  background: rgba(0,0,0,0.25);
}

.aic-input{
  width:100%;
  border:1px solid var(--aic-border);
  background: rgba(255,255,255,0.03);
  color: var(--aic-text);
  padding:12px 12px;
  border-radius:12px;
  outline:none;
}

.aic-input::placeholder{ color: rgba(159,176,194,0.8); }

.aic-send{
  border:1px solid var(--aic-border);
  background: rgba(255,255,255,0.08);
  color: var(--aic-text);
  padding:12px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
}

.aic-send:hover{ background: rgba(255,255,255,0.12); }

.aic-auth-top{
  margin-top: 12px;
  margin-bottom: 10px;
}

/* spinner inside inputbar (added by JS) */
.aic-input-spinner{
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.25);
  border-top-color: rgba(255,255,255,0.85);
  animation: aic-spin 0.8s linear infinite;
  display:none; /* JS toggles */
}

.aic-inputbar.aic-loading .aic-send{
  opacity:0.7;
  cursor:not-allowed;
}

.aic-inputbar.aic-loading .aic-input{
  opacity:0.9;
}

/* sidebar bottom auth */
#aic-auth-box{
  margin-top:auto;
  font-size:12px;
  font-weight:700;
}

#aic-auth-box > div{
  font-size:12px;
  font-weight:700;
}

.aic-logo{
  width: 40%;
  height: auto;
  display: block;
  margin: 6px 0 14px 0;
}

/* Contact card */
.aic-contact-card{
  margin: 18px 12px;
  padding: 14px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.aic-contact-title{
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 10px;
}

.aic-contact-item{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0;
  font-size: 14px;
}

.aic-contact-link{
  color: rgba(255,255,255,0.92);
  text-decoration: none;
}

.aic-contact-link:hover{ text-decoration: underline; }

.aic-contact-note{
  color: rgba(159,176,194,0.9);
  font-size: 13px;
}

.aic-contact-divider{
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 12px 0;
}

.aic-contact-subtitle{
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 6px;
}

.aic-contact-address{
  color: rgba(255,255,255,0.88);
  font-size: 13px;
  line-height: 1.35;
}

/* --- Icons --- */
.aic-contact-icon{
  font-size: 15px;
  line-height: 1;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  transform: translateY(1px);
}

/* Attempt: color emoji (works for monochrome emoji fonts) */
.aic-contact-item .aic-contact-icon{ color: #e53935; }

/* Email icon (keep blue) */
.aic-contact-item:first-child .aic-contact-icon{ color: #4fc3f7; }

/* Fallback: tint colorful emoji via filter */
.aic-contact-item:nth-child(3) .aic-contact-icon,
.aic-contact-item:nth-child(4) .aic-contact-icon{
  filter: hue-rotate(-35deg) saturate(4) brightness(1.15);
}

/* =========================================================
   Workspace board
   ========================================================= */
.aic-workspace{
  position: relative;
  min-height: 320px;
  border: 1px solid var(--aic-border);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  padding: 16px;
  overflow: auto;
  height: 100%;
}

.aic-workspace__empty{
  color: var(--aic-muted);
  padding: 10px;
}

/* Toast inside workspace */
.aic-ws-toast{
  position: sticky;
  bottom: 10px;
  margin-top: 12px;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  color: var(--aic-muted);
  backdrop-filter: blur(6px);
}

/* Toolbar */
.aic-wsbar{
  position: sticky;
  top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  z-index: 9999;
  pointer-events: none; /* don't block dragging */
}

.aic-wsbar__btn{
  pointer-events: auto;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(0,0,0,0.25);
  color: var(--aic-text);
  cursor: pointer;
  backdrop-filter: blur(6px);
  min-width: 40px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.aic-wsbar__btn:hover{
  background: rgba(0,0,0,0.32);
}

.aic-wsbar__icon{
  width: 18px;
  height: 18px;
  display: block;
}

/* =========================================================
   Window-like product card
   ========================================================= */
.aic-cardwin{
  position: absolute;
  width: 320px;
  height: 190px;

  /* single, clear white-ish frame */
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 16px;

  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  overflow: hidden;
  user-select: none;
}

.aic-cardwin__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  cursor: grab;
}

.aic-cardwin__title{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.aic-cardwin__badge{
  font-size: 12px;
  color: var(--aic-muted);
  padding: 2px 8px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  flex: 0 0 auto;
}

.aic-cardwin__close{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.25);
  color: var(--aic-text);
  cursor: pointer;
}

.aic-cardwin__close:hover{
  background: rgba(0,0,0,0.35);
}

.aic-cardwin__body{
  padding: 12px;
  height: calc(100% - 52px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aic-cardwin__centername{
  flex: 1;
  color: var(--aic-text);
  font-weight: 650;
  font-size: 15px;
  line-height: 1.25;
  white-space: normal;
  overflow: auto;        /* inner scroll for long names */
  max-height: 92px;      /* keeps price visible */
  padding-right: 6px;
}

.aic-cardwin__footer{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end; /* only price on the right */
}

.aic-cardwin__price{
  color: var(--aic-text);
  font-size: 22px;
  font-weight: 700;
}

/* =========================================================
   Mobile sidebar
   ========================================================= */
@media (max-width: 900px){
  .aic-layout{
    grid-template-columns: 1fr;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
  }

  .aic-sidebar{
    position: fixed;
    top: 0;
    left: 0;
    width: min(84vw, 320px);
    height: 100vh;
    max-height: 100vh;
    transform: translateX(-102%);
    transition: transform 220ms ease;
    z-index: 10010;
    box-shadow: 12px 0 30px rgba(0,0,0,0.45);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .aic-sidebar > div:last-child{
    margin-top: 0;
  }

  #ai-catalog-root.aic-sidebar-open .aic-sidebar{
    transform: translateX(0);
  }

  .aic-main{
    padding: 12px;
    width: 100%;
    max-width: 100%;
  }

  .aic-panels{
    height: calc(100vh - 120px);
    max-height: calc(100vh - 60px);
  }

  .aic-sidebar-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 16px;
    left: 12px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.45);
    color: var(--aic-text);
    z-index: 10020;
    cursor: pointer;
    backdrop-filter: blur(6px);
  }

  #ai-catalog-root.aic-sidebar-open .aic-sidebar-toggle{
    left: calc(min(84vw, 320px) - 21px);
  }

  .aic-sidebar-overlay{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease;
    z-index: 10000;
  }

  #ai-catalog-root.aic-sidebar-open .aic-sidebar-overlay{
    opacity: 1;
    visibility: visible;
  }

  body{
    overflow-x: hidden;
  }
}

/* =========================================================
   Animations
   ========================================================= */
@keyframes aic-spin{
  to { transform: rotate(360deg); }
}