/* GUIDER AI - floating orbit button + chat panel */
:root {
    --gai-cyan: #22e6ff;
    --gai-violet: #8b5cff;
    --gai-blue: #3b82f6;
    --gai-bg: #070b16;
    --gai-panel: rgba(9, 13, 26, .96);
    --gai-line: rgba(120, 150, 255, .18);
    --gai-text: #e6ecff;
    --gai-dim: #8c97b8;
    --gai-ok: #2ee6a6;
    --gai-warn: #ffb547;
    --gai-bad: #ff5d7a;
}

/* ------------------------------------------------------------- button */
#gai-fab {
    position: fixed; right: 20px; bottom: 22px; z-index: 99998;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
    -webkit-tap-highlight-color: transparent; user-select: none;
}
#gai-fab .gai-orb {
    position: relative; width: 84px; height: 84px; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(34, 230, 255, .16) 0%, rgba(11, 16, 34, .92) 62%, rgba(7, 11, 22, .96) 100%);
    box-shadow: 0 0 0 1px rgba(34, 230, 255, .35), 0 0 22px rgba(34, 230, 255, .35), 0 0 46px rgba(139, 92, 255, .30), inset 0 0 18px rgba(139, 92, 255, .25);
    transition: transform .25s ease, box-shadow .25s ease;
    animation: gai-breathe 3.4s ease-in-out infinite;
}
#gai-fab:hover .gai-orb { transform: scale(1.07); box-shadow: 0 0 0 1px rgba(34, 230, 255, .6), 0 0 30px rgba(34, 230, 255, .55), 0 0 60px rgba(139, 92, 255, .45), inset 0 0 22px rgba(139, 92, 255, .35); }
#gai-fab:active .gai-orb { transform: scale(.96); }
#gai-fab svg { width: 100%; height: 100%; display: block; overflow: visible; }
#gai-fab .gai-ring { fill: none; stroke-width: .9; opacity: .9; }
#gai-fab .gai-e { filter: drop-shadow(0 0 2.5px #fff) drop-shadow(0 0 5px var(--gai-cyan)); }
#gai-fab .gai-nuc { transform-box: fill-box; transform-origin: center; animation: gai-pulse 1.9s ease-in-out infinite; filter: drop-shadow(0 0 6px var(--gai-cyan)); }
#gai-fab .gai-spin { transform-origin: 0 0; animation: gai-rotate 22s linear infinite; }
#gai-fab .gai-label {
    font-size: 10.5px; font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase; line-height: 1;
    padding: 5px 9px 5px 11px; border-radius: 20px; color: #dff9ff;
    background: linear-gradient(90deg, rgba(34, 230, 255, .18), rgba(139, 92, 255, .22));
    border: 1px solid rgba(34, 230, 255, .35); text-shadow: 0 0 8px rgba(34, 230, 255, .8);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
@keyframes gai-pulse { 0%, 100% { transform: scale(1); opacity: .95 } 50% { transform: scale(1.28); opacity: 1 } }
@keyframes gai-rotate { to { transform: rotate(360deg) } }
@keyframes gai-breathe { 0%, 100% { filter: brightness(1) } 50% { filter: brightness(1.18) } }

/* locked until the user logs in */
#gai-fab.gai-locked .gai-orb { filter: grayscale(.85) brightness(.7); animation: none; box-shadow: 0 0 0 1px rgba(140, 150, 180, .35), 0 0 14px rgba(0, 0, 0, .5); }
#gai-fab.gai-locked .gai-label { opacity: .65; text-shadow: none; }
#gai-fab .gai-lock {
    display: none; position: absolute; right: -2px; top: -2px; width: 24px; height: 24px; border-radius: 50%;
    background: #0b1020; border: 1px solid rgba(255, 255, 255, .35); align-items: center; justify-content: center; z-index: 2;
}
#gai-fab.gai-locked .gai-lock { display: flex; }
#gai-tip {
    position: fixed; right: 20px; bottom: 138px; z-index: 99998; max-width: 230px;
    background: #0e1530; color: var(--gai-text); border: 1px solid rgba(34, 230, 255, .4);
    padding: 10px 13px; border-radius: 12px; font: 600 12.5px/1.35 inherit; font-family: inherit;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .5), 0 0 18px rgba(34, 230, 255, .2);
    opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .2s, transform .2s;
}
#gai-tip.gai-show { opacity: 1; transform: none; }
#gai-tip::after { content: ""; position: absolute; right: 36px; bottom: -6px; width: 10px; height: 10px; background: #0e1530; border-right: 1px solid rgba(34, 230, 255, .4); border-bottom: 1px solid rgba(34, 230, 255, .4); transform: rotate(45deg); }

/* -------------------------------------------------------------- panel */
#gai-panel {
    position: fixed; right: 20px; bottom: 138px; z-index: 99999;
    width: 430px; max-width: calc(100vw - 24px); height: min(680px, calc(100vh - 160px));
    display: none; flex-direction: column; overflow: hidden;
    background: var(--gai-panel); color: var(--gai-text); font-family: inherit; font-size: 14px; line-height: 1.45;
    border-radius: 20px; border: 1px solid var(--gai-line);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .65), 0 0 0 1px rgba(34, 230, 255, .08), 0 0 60px rgba(139, 92, 255, .18);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
#gai-panel.gai-open { display: flex; animation: gai-in .28s cubic-bezier(.2, .9, .3, 1); }
@keyframes gai-in { from { opacity: 0; transform: translateY(14px) scale(.97) } to { opacity: 1; transform: none } }
#gai-panel * { box-sizing: border-box; }
#gai-panel button { font-family: inherit; }

.gai-head { position: relative; padding: 16px 16px 14px; border-bottom: 1px solid var(--gai-line);
    background: radial-gradient(120% 140% at 0% 0%, rgba(34, 230, 255, .14), transparent 55%), radial-gradient(120% 140% at 100% 0%, rgba(139, 92, 255, .20), transparent 60%); }
.gai-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: 2.4px; color: var(--gai-cyan); text-transform: uppercase; }
.gai-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--gai-ok); box-shadow: 0 0 8px var(--gai-ok); }
.gai-title { margin: 8px 0 4px; font-size: 17px; line-height: 1.22; font-weight: 800; letter-spacing: .2px;
    background: linear-gradient(90deg, #fff, #bfeaff 55%, #cdb8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gai-sub { margin: 0; font-size: 12px; color: var(--gai-dim); padding-right: 6px; }
.gai-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; }
.gai-ic { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--gai-line); background: rgba(255, 255, 255, .04); color: var(--gai-dim);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font-size: 11px; font-weight: 700; }
.gai-ic:hover { color: #fff; border-color: rgba(34, 230, 255, .5); background: rgba(34, 230, 255, .10); }
.gai-ic.gai-wide { width: auto; padding: 0 9px; }
.gai-ic svg { width: 15px; height: 15px; }

.gai-body { flex: 1; overflow-y: auto; padding: 14px 14px 6px; overscroll-behavior: contain; }
.gai-body::-webkit-scrollbar { width: 6px; } .gai-body::-webkit-scrollbar-thumb { background: rgba(140, 160, 255, .25); border-radius: 6px; }

.gai-label2 { margin: 2px 2px 8px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gai-dim); }
.gai-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.gai-chip { text-align: left; padding: 10px 11px; border-radius: 13px; cursor: pointer; color: var(--gai-text);
    background: linear-gradient(160deg, rgba(34, 230, 255, .07), rgba(139, 92, 255, .09)); border: 1px solid var(--gai-line); transition: transform .15s, border-color .15s, box-shadow .15s; }
.gai-chip:hover { transform: translateY(-2px); border-color: rgba(34, 230, 255, .55); box-shadow: 0 6px 20px rgba(34, 230, 255, .12); }
.gai-chip b { display: block; font-size: 12.5px; line-height: 1.2; font-weight: 800; color: #fff; }
.gai-chip small { display: block; margin-top: 4px; font-size: 10.5px; line-height: 1.3; color: var(--gai-dim); }
.gai-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
.gai-pill { display: inline-block; margin-top: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; }
.gai-pill.low { background: rgba(46, 230, 166, .14); color: var(--gai-ok); } .gai-pill.medium { background: rgba(255, 181, 71, .14); color: var(--gai-warn); } .gai-pill.high { background: rgba(255, 93, 122, .15); color: var(--gai-bad); }
.gai-ex { display: block; width: 100%; text-align: left; margin: 0 0 6px; padding: 8px 10px; border-radius: 10px; font-size: 12px; cursor: pointer; color: #b9c6ee;
    background: transparent; border: 1px dashed rgba(140, 160, 255, .3); }
.gai-ex:hover { color: #fff; border-color: var(--gai-cyan); }

.gai-msg { display: flex; margin: 0 0 11px; }
.gai-msg.me { justify-content: flex-end; }
.gai-bub { max-width: 90%; padding: 9px 12px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.gai-msg.me .gai-bub { background: linear-gradient(135deg, #5a3df0, #8b5cff); color: #fff; border-bottom-right-radius: 4px; }
.gai-msg.ai .gai-bub { background: rgba(255, 255, 255, .055); border: 1px solid var(--gai-line); border-bottom-left-radius: 4px; }
.gai-msg.err .gai-bub { background: rgba(255, 93, 122, .10); border: 1px solid rgba(255, 93, 122, .35); color: #ffc7d1; }
.gai-typing { display: inline-flex; align-items: center; gap: 5px; color: var(--gai-dim); font-size: 12px; }
.gai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--gai-cyan); animation: gai-dot 1.1s infinite ease-in-out; }
.gai-typing i:nth-child(2) { animation-delay: .15s; } .gai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes gai-dot { 0%, 80%, 100% { transform: scale(.5); opacity: .4 } 40% { transform: scale(1); opacity: 1 } }

/* robot card */
.gai-card { margin: -2px 0 13px; padding: 12px; border-radius: 15px; border: 1px solid rgba(34, 230, 255, .35);
    background: linear-gradient(160deg, rgba(34, 230, 255, .08), rgba(139, 92, 255, .10)); box-shadow: 0 0 24px rgba(34, 230, 255, .08); }
.gai-card h4 { margin: 0 0 2px; font-size: 14px; font-weight: 800; line-height: 1.3; color: #fff; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.gai-card h4 em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--gai-cyan); border: 1px solid rgba(34, 230, 255, .4); padding: 1px 6px; border-radius: 10px; }
.gai-card .gai-mk { font-size: 11.5px; color: var(--gai-dim); margin-bottom: 8px; }
.gai-kv { display: grid; grid-template-columns: 74px 1fr; gap: 3px 8px; font-size: 12px; margin-bottom: 9px; }
.gai-kv span:nth-child(odd) { color: var(--gai-dim); }
.gai-risk { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.gai-risk div { flex: 1 1 70px; text-align: center; padding: 6px 4px; border-radius: 10px; background: rgba(0, 0, 0, .28); border: 1px solid var(--gai-line); }
.gai-risk b { display: block; font-size: 13px; font-weight: 800; } .gai-risk small { font-size: 9.5px; color: var(--gai-dim); text-transform: uppercase; letter-spacing: .6px; }
.gai-risk .tp b { color: var(--gai-ok); } .gai-risk .sl b { color: var(--gai-bad); }
.gai-warn { font-size: 11.5px; color: #ffd9a1; background: rgba(255, 181, 71, .09); border: 1px solid rgba(255, 181, 71, .28); padding: 7px 9px; border-radius: 9px; margin-bottom: 9px; }
.gai-act { display: flex; gap: 7px; }
.gai-btn { flex: 1; cursor: pointer; border-radius: 11px; padding: 10px 12px; font-size: 13px; font-weight: 800; border: 1px solid var(--gai-line); color: var(--gai-text); background: rgba(255, 255, 255, .06); }
.gai-btn:hover { border-color: rgba(34, 230, 255, .55); }
.gai-btn.pri { border: 0; color: #04101a; background: linear-gradient(90deg, var(--gai-cyan), #7ab8ff 55%, var(--gai-violet)); box-shadow: 0 6px 22px rgba(34, 230, 255, .28); }
.gai-btn.pri:hover { filter: brightness(1.08); }
.gai-btn.sm { flex: 0 0 auto; padding: 10px 13px; }
.gai-btn:disabled { opacity: .6; cursor: default; }
.gai-done { color: var(--gai-ok); font-size: 12px; font-weight: 700; margin-top: 7px; }

/* composer */
.gai-foot { padding: 10px 12px 12px; border-top: 1px solid var(--gai-line); background: rgba(5, 8, 18, .6); }
.gai-modebar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; gap: 8px; }
.gai-dbg { cursor: pointer; font-size: 11.5px; font-weight: 700; color: var(--gai-dim); background: transparent; border: 1px solid var(--gai-line); border-radius: 20px; padding: 4px 10px; }
.gai-dbg:hover { color: #fff; border-color: var(--gai-warn); }
.gai-dbg.on { color: #1b1200; background: var(--gai-warn); border-color: var(--gai-warn); }
.gai-quota { font-size: 11px; color: var(--gai-dim); }
.gai-row { display: flex; gap: 8px; align-items: flex-end; }
.gai-in { flex: 1; resize: none; max-height: 130px; min-height: 42px; padding: 11px 12px; border-radius: 13px; color: var(--gai-text); font: inherit; font-size: 14px;
    background: rgba(255, 255, 255, .06); border: 1px solid var(--gai-line); outline: none; }
.gai-in:focus { border-color: var(--gai-cyan); box-shadow: 0 0 0 3px rgba(34, 230, 255, .12); }
.gai-in::placeholder { color: #6f7a9c; }
.gai-send { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #04101a;
    background: linear-gradient(135deg, var(--gai-cyan), var(--gai-violet)); }
.gai-send:disabled { opacity: .45; cursor: default; } .gai-send svg { width: 18px; height: 18px; }
.gai-fine { margin: 8px 2px 0; font-size: 10px; line-height: 1.35; color: #66708f; }

/* versions drawer */
.gai-drawer { position: absolute; inset: 0; z-index: 3; display: none; flex-direction: column; background: var(--gai-panel); }
.gai-drawer.gai-open { display: flex; }
.gai-drawer header { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; border-bottom: 1px solid var(--gai-line); font-weight: 800; }
.gai-vlist { flex: 1; overflow-y: auto; padding: 10px 14px; }
.gai-v { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 8px; border-radius: 12px; border: 1px solid var(--gai-line); background: rgba(255, 255, 255, .04); }
.gai-v div { flex: 1; min-width: 0; } .gai-v b { display: block; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gai-v small { color: var(--gai-dim); font-size: 11px; }

/* ------------------------------------------------------------- mobile */
@media (max-width: 600px) {
    .gai-hide-m { display: none; }
    .gai-title { padding-top: 6px; }
    #gai-fab { right: 12px; bottom: 14px; }
    #gai-fab .gai-orb { width: 66px; height: 66px; }
    #gai-fab .gai-label { font-size: 9px; letter-spacing: 1.6px; padding: 4px 7px 4px 9px; }
    #gai-tip { right: 12px; bottom: 112px; }
    #gai-panel { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 90vh; border-radius: 20px 20px 0 0; }
    #gai-fab.gai-hide { display: none; }
    .gai-chips { grid-template-columns: 1fr; }
    .gai-chip:last-child:nth-child(odd) { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
    #gai-fab .gai-orb, #gai-fab .gai-nuc, #gai-fab .gai-spin, #gai-panel.gai-open { animation: none !important; }
}