/* ===== UFO PANEL: Exact screenshot color gradient (Option A) ===== */
.ufo-control-panel {
  position: fixed !important;
  top: 200px !important;
  right: 20px !important;
  width: 320px !important;
  max-width: 320px !important;
  z-index: 2147483647 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  perspective: 1000px;
}

/* COVER SCREEN (folded) */
.ufo-control-panel .ufo-cover-screen {
  width: 320px;
  height: 220px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.65) 0%,
    rgba(120,160,255,0.45) 25%,
    rgba(145,120,255,0.45) 50%,
    rgba(255,180,220,0.40) 75%,
    rgba(255,120,120,0.35) 100%);
  box-shadow: 0 12px 36px rgba(15,20,30,0.45), 0 0 32px rgba(160,120,255,0.12);
  padding: 12px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  transition: height 0.5s cubic-bezier(0.4,0,0.2,1);
}

/* top row inside cover */
.ufo-cover-screen .cover-top { display:flex; gap:12px; align-items:center; width:100%; }
.ufo-cover-screen .cover-left { width:72px; display:flex; justify-content:center; align-items:center; }
.ufo-cover-screen .cover-center { flex:1; display:flex; flex-direction:column; gap:8px; }
.ufo-cover-screen .cover-right { width:62px; display:flex; align-items:center; justify-content:flex-end; }

/* analog clock container */
.analog-wrap { width:64px; height:64px; display:grid; place-items:center; }

/* temperature bubble */
.temp-bubble {
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.95);
  color:#0b1430; font-weight:700; padding:6px 12px; border-radius:14px; cursor:pointer;
  box-shadow: 0 6px 18px rgba(20,30,60,0.18);
  width:110px; max-width:100%;
  font-size:14px;
}

/* top small icon row */
.icon-row { display:flex; gap:8px; align-items:center; margin-top:6px; }
.cover-icon { background:transparent; border:none; padding:6px;border-radius:10px; cursor:pointer; display:inline-grid; place-items:center; }
.cover-icon svg { opacity:0.95; transform:translateZ(0); }

/* digital clock */
.digital-clock { font-family: 'Courier New', monospace; font-weight:700; font-size:20px; color:#fff; text-shadow: 0 0 8px rgba(255,255,255,0.18); }

/* expanded wrapper */
.ufo-expanded-wrap {
  height: 0;
  overflow: hidden;
  transition: height 420ms cubic-bezier(.2,.9,.2,1);
  margin-top: 12px;
  border-radius: 18px;
}

/* expanded header */
.expanded-header { display:flex; align-items:center; gap:12px; padding:10px; color:#fff; }
.collapse-btn { width:44px; height:44px; border-radius:10px; border:none; background:linear-gradient(180deg,#f4f5fa,#dcd4ff); color:#0b1430; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,0.4); font-weight:bold; font-size:18px; }
.exp-title { flex:1; }
.exp-title-main { font-weight:800; font-size:15px; }
.exp-sub { font-size:12px; color:rgba(255,255,255,0.72); }

/* content */
.ufo-content { padding:12px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06)); border-radius:12px; }
.chat-bubble.assistant { background: linear-gradient(90deg,#7b61e6,#b687f3); color:#fff; padding:12px 14px; border-radius:12px; display:inline-block; font-size:14px; box-shadow:0 8px 18px rgba(0,0,0,0.18); }

/* conversation area */
.conversation-area { margin-top:12px; min-height:220px; max-height:360px; overflow:auto; padding:6px; background: #f4f5f7; border-radius:10px; }

/* input row */
.input-row { display:flex; gap:8px; margin-top:10px; }
#ufoInput { flex:1; padding:10px 12px; border-radius:18px; border:1px solid rgba(0,0,0,0.06); outline:none; font-size:14px; }
#ufoSend { width:52px; border-radius:12px; border:none; background:linear-gradient(180deg,#6f4ef0,#a05be9); color:#fff; font-size:16px; cursor:pointer; }

/* bottom bar */
.bottom-bar { margin-top:12px; border-radius:12px; padding:10px; background: linear-gradient(90deg,#5f49f2,#b16be6); color:#fff; }
.bottom-icons { display:flex; gap:8px; margin-bottom:8px; }
.bottom-item { background: rgba(255,255,255,0.08); border:none; padding:8px 10px; border-radius:8px; color:#fff; cursor:pointer; }
.bottom-search { display:flex; gap:8px; }
.bottom-search input { flex:1; padding:8px 10px; border-radius:10px; border:none; }

/* folded state helpers */
.ufo-control-panel.folded .ufo-expanded-wrap { height:0 !important; }
.ufo-control-panel.expanded .ufo-expanded-wrap { height: 620px !important; }

/* small responsive tweak */
@media (max-width:420px) {
  .ufo-control-panel { right: 12px !important; }
  .ufo-control-panel .ufo-cover-screen { transform:scale(0.95); transform-origin: top right; }
}