:root{
  --tgla-bg:#070b12;
  --tgla-panel:#0b111b;
  --tgla-surface:#111925;
  --tgla-surface-2:#151f2d;
  --tgla-border:rgba(255,255,255,.09);
  --tgla-border-strong:rgba(244,208,77,.42);
  --tgla-text:#f6f8fb;
  --tgla-muted:#a9b3c2;
  --tgla-subtle:#778398;
  --tgla-gold:#f4d04d;
  --tgla-gold-2:#b88816;
  --tgla-cyan:#63d8ff;
  --tgla-green:#62e49a;
  --tgla-red:#ff8f86;
  --tgla-shadow:0 30px 90px rgba(0,0,0,.55);
}

.tempogroup-assistant-open{
  position:fixed;
  right:24px;
  bottom:28px;
  z-index:1349000;

  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:11px;

  min-width:170px;
  height:58px;
  padding:8px 15px 8px 9px;

  border:1px solid rgba(244,208,77,.58);
  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      rgba(28,31,32,.97),
      rgba(12,16,23,.98)
    );

  color:#fff;

  font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;

  cursor:pointer;

  box-shadow:
    0 18px 48px rgba(0,0,0,.48),
    0 0 0 1px rgba(244,208,77,.05),
    inset 0 1px rgba(255,255,255,.07);

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  transition:
    translate .18s ease,
    scale .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}


.tempogroup-assistant-open[hidden]{
  display:none !important;
}


.tgla-floating-icon{
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  flex:0 0 auto;

  border:1px solid rgba(244,208,77,.52);
  border-radius:13px;

  background:
    linear-gradient(
      145deg,
      rgba(244,208,77,.20),
      rgba(244,208,77,.06)
    );

  color:#ffe36d;

  font-size:17px;

  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    0 6px 18px rgba(0,0,0,.22);
}


.tgla-floating-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;

  min-width:0;
}


.tgla-floating-copy strong{
  color:#fff4bd;

  font-size:13px;
  line-height:1.15;
  font-weight:850;
}


.tgla-floating-copy small{
  margin-top:3px;

  color:#8f99a8;

  font-size:10px;
  line-height:1.1;
  font-weight:600;
}


.tgla-floating-online{
  width:8px;
  height:8px;

  margin-left:auto;

  flex:0 0 auto;

  border-radius:50%;

  background:#62e49a;

  box-shadow:
    0 0 0 4px rgba(98,228,154,.09),
    0 0 12px rgba(98,228,154,.72);
}


.tempogroup-assistant-open:hover{
    /*
     * Gunakan individual translate
     * supaya tidak bertabrakan dengan
     * transform milik entrance animation.
     */
    translate:
        0 -3px;

    /*
     * Border wajib tetap transparan.
     * Energy Trace berasal dari
     * conic-gradient pada border-box.
     */
    border-color:
        transparent;
}

.tempogroup-assistant-open:hover::after{
  transform:
    translateY(-4px)
    scale(1.025);

  border-color:
    rgba(255,226,107,.72);

  color:#fff0ae;

  box-shadow:
    0 18px 45px rgba(0,0,0,.48),
    0 0 24px rgba(244,208,77,.16),
    inset 0 1px rgba(255,255,255,.09);
}

.tempogroup-assistant-open:active{
    translate:
        0 -1px;

    scale:
        .985;
}


@media (max-width:700px){
  .tempogroup-assistant-open{
    right:14px;
    bottom:16px;

    min-width:145px;
    height:54px;

    padding:
      7px 13px
      7px 8px;

    border-radius:17px;
  }

  .tgla-floating-icon{
    width:38px;
    height:38px;
  }
}

.tempogroup-assistant-open::after{
  max-width:190px;

  padding:8px 11px;

  font-size:10px;

  right:0;
  bottom:calc(100% + 10px);
}

/* =========================================================
   TEMPOGROUP FLOATING ASSISTANT
   SIGNATURE MOTION SYSTEM
   ========================================================= */

@property --tgla-border-angle{
    syntax:"<angle>";
    initial-value:0deg;
    inherits:false;
}


.tempogroup-assistant-open{
    --tgla-border-angle:
        0deg;

    overflow:
        visible;

    isolation:
        isolate;

    /*
     * Border transparan diperlukan agar
     * layer conic-gradient menjadi
     * garis perimeter Assistant.
     */
    border:
        1px solid transparent;


    background:

        /*
         * Isi utama Assistant.
         */
        linear-gradient(
            110deg,
            rgba(18,23,31,.985) 0%,
            rgba(34,31,19,.985) 27%,
            rgba(17,23,31,.985) 50%,
            rgba(14,28,35,.985) 73%,
            rgba(18,23,31,.985) 100%
        )
        padding-box,


        /*
         * ENERGY TRACE.
         *
         * Cahaya hanya menempati sebagian
         * perimeter sehingga terlihat
         * seperti sedang berjalan.
         */
        conic-gradient(
            from var(--tgla-border-angle),

            rgba(244,208,77,.16) 0deg,

            rgba(244,208,77,.22) 40deg,

            #ffe46f 69deg,

            rgba(255,232,125,.92) 82deg,

            rgba(99,216,255,.90) 101deg,

            rgba(99,216,255,.18) 129deg,

            rgba(244,208,77,.12) 185deg,

            rgba(244,208,77,.16) 360deg
        )
        border-box;


    background-size:
        260% 100%,
        100% 100%;


    box-shadow:
        0 18px 48px rgba(0,0,0,.48),

        0 0 0 1px
            rgba(244,208,77,.035),

        0 0 18px
            rgba(244,208,77,.045),

        inset 0 1px
            rgba(255,255,255,.075);


    animation:

        /*
         * Animasi hanya sekali
         * ketika Assistant muncul.
         */
        tglaLauncherPremiumEntrance
        .78s
        cubic-bezier(.16,1,.3,1)
        both,


        /*
         * Gerakan surface sangat pelan.
         */
        tglaLauncherSurfacePremium
        7s
        1s
        ease-in-out
        infinite,


        /*
         * Garis perimeter berjalan.
         */
        tglaLauncherBorderTrace
        8s
        .8s
        linear
        infinite;
}


/* Ring energi luar */
.tempogroup-assistant-open::before{
    content:"";

    position:absolute;

    inset:-5px;

    border:
        1px solid rgba(244,208,77,.45);

    border-radius:
        22px;

    opacity:0;

    pointer-events:none;

    box-shadow:
        0 0 0 0 rgba(244,208,77,.18);

    animation:
        tglaLauncherRing
        8s
        1.8s
        ease-out
        infinite;
}


/* Bubble bantuan */
.tempogroup-assistant-open::after{
    content:
        "Butuh bantuan? Klik Assistant";

    position:absolute;

    right:0;
    bottom:
        calc(100% + 12px);

    width:
        max-content;

    max-width:
        245px;

    padding:
        10px 14px;

    border:
        1px solid rgba(244,208,77,.46);

    border-radius:
        13px 13px 5px 13px;

    background:
        linear-gradient(
            110deg,
            rgba(17,23,32,.98),
            rgba(38,33,17,.98),
            rgba(17,27,34,.98)
        );

    background-size:
        220% 100%;

    color:
        #ffe891;

    font:
        750 11px/1.35
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    letter-spacing:
        .015em;

    white-space:
        normal;

    box-shadow:
        0 14px 36px rgba(0,0,0,.42),
        inset 0 1px rgba(255,255,255,.07);

    transform-origin:
        right bottom;

    pointer-events:
        none;

    animation:
        tglaLauncherHint
        5.2s
        ease-in-out
        infinite;
}


/* Saat mouse masuk, bubble berhenti
   supaya tidak terasa liar */
.tempogroup-assistant-open:hover::after{
    animation:
        none;

    transform:
        translateY(-4px)
        scale(1.025);
}


/* Icon utama Assistant */
.tgla-floating-icon{
    position:
        relative;

    overflow:
        hidden;

    animation:
        tglaAssistantIconFloat
        2.8s
        ease-in-out
        infinite;
}


/* Highlight bergerak pada icon */
.tgla-floating-icon::after{
    content:"";

    position:absolute;

    inset:-45%;

    background:
        linear-gradient(
            90deg,
            transparent 25%,
            rgba(255,244,184,.42) 50%,
            transparent 75%
        );

    transform:
        translateX(-145%)
        rotate(18deg);

    animation:
        tglaAssistantIconSheen
        3.8s
        ease-in-out
        infinite;

    pointer-events:
        none;
}


/* Nama Assistant ikut hidup */
.tgla-floating-copy strong{
    animation:
        tglaAssistantLabelGlow
        4s
        ease-in-out
        infinite;
}


.tgla-floating-copy small{
    animation:
        tglaAssistantSubBreath
        3.2s
        ease-in-out
        infinite;
}


/* Status online */
.tgla-floating-online{
    animation:
        tglaAssistantOnline
        2s
        ease-out
        infinite;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes tglaLauncherPremiumEntrance{

    0%{
        opacity:
            0;

        transform:
            translateY(18px)
            scale(.92);

        filter:
            blur(7px);

        box-shadow:
            0 8px 28px
                rgba(0,0,0,.30),

            0 0 0
                rgba(244,208,77,0);
    }


    42%{
        opacity:
            1;

        transform:
            translateY(-2px)
            scale(1.018);

        filter:
            blur(0);

        box-shadow:
            0 22px 58px
                rgba(0,0,0,.54),

            0 0 29px
                rgba(244,208,77,.19),

            0 0 12px
                rgba(99,216,255,.10);
    }


    72%{
        transform:
            translateY(1px)
            scale(.998);
    }


    100%{
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0);
    }
}


@keyframes tglaLauncherSurfacePremium{

    0%,
    100%{
        background-position:
            100% 50%,
            center;

        box-shadow:
            0 18px 48px
                rgba(0,0,0,.48),

            0 0 0 1px
                rgba(244,208,77,.035),

            0 0 13px
                rgba(244,208,77,.045),

            inset 0 1px
                rgba(255,255,255,.075);
    }


    45%{
        background-position:
            20% 50%,
            center;

        box-shadow:
            0 21px 54px
                rgba(0,0,0,.53),

            0 0 0 1px
                rgba(244,208,77,.055),

            0 0 23px
                rgba(244,208,77,.10),

            0 0 9px
                rgba(99,216,255,.045),

            inset 0 1px
                rgba(255,255,255,.09);
    }


    72%{
        background-position:
            0% 50%,
            center;
    }
}

@keyframes tglaLauncherBorderTrace{

    from{
        --tgla-border-angle:
            0deg;
    }

    to{
        --tgla-border-angle:
            360deg;
    }
}


@keyframes tglaLauncherRing{
    0%,
    67%,
    100%{
        opacity:0;

        transform:
            scale(1);
    }

    73%{
        opacity:.72;
    }

    90%{
        opacity:0;

        transform:
            scale(1.11);
    }
}


@keyframes tglaLauncherHint{
    0%,
    100%{
        opacity:.72;

        transform:
            translateY(0)
            scale(1);

        background-position:
            100% 50%;
    }

    45%{
        opacity:94;

        transform:
            translateY(-3px)
            scale(1.018);

        background-position:
            0% 50%;
    }

    58%{
        transform:
            translateY(-3px)
            scale(1.018);
    }
}


@keyframes tglaAssistantIconFloat{
    0%,
    100%{
        transform:
            translateY(0)
            rotate(0deg)
            scale(1);

        box-shadow:
            inset 0 1px rgba(255,255,255,.08),
            0 6px 18px rgba(0,0,0,.22);
    }

    35%{
        transform:
            translateY(-2px)
            rotate(-1.5deg)
            scale(1.025);

        box-shadow:
            inset 0 1px rgba(255,255,255,.1),
            0 8px 21px rgba(0,0,0,.25),
            0 0 18px rgba(244,208,77,.20);
    }

    68%{
        transform:
            translateY(.5px)
            rotate(1deg)
            scale(.995);
    }
}


@keyframes tglaAssistantIconSheen{
    0%,
    58%{
        transform:
            translateX(-145%)
            rotate(18deg);

        opacity:0;
    }

    66%{
        opacity:1;
    }

    82%{
        transform:
            translateX(145%)
            rotate(18deg);

        opacity:.9;
    }

    100%{
        transform:
            translateX(145%)
            rotate(18deg);

        opacity:0;
    }
}


@keyframes tglaAssistantLabelGlow{
    0%,
    100%{
        color:#fff4bd;

        text-shadow:
            0 0 0 rgba(244,208,77,0);
    }

    50%{
        color:#fff8cf;

        text-shadow:
            0 0 12px rgba(244,208,77,.22);
    }
}


@keyframes tglaAssistantSubBreath{
    0%,
    100%{
        opacity:.68;
    }

    50%{
        opacity:1;
    }
}


@keyframes tglaAssistantOnline{
    0%{
        box-shadow:
            0 0 0 0 rgba(98,228,154,.38),
            0 0 10px rgba(98,228,154,.66);
    }

    70%{
        box-shadow:
            0 0 0 7px rgba(98,228,154,0),
            0 0 15px rgba(98,228,154,.80);
    }

    100%{
        box-shadow:
            0 0 0 0 rgba(98,228,154,0),
            0 0 10px rgba(98,228,154,.62);
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .tempogroup-assistant-open,
    .tempogroup-assistant-open::before,
    .tempogroup-assistant-open::after,
    .tgla-floating-icon,
    .tgla-floating-icon::after,
    .tgla-floating-copy strong,
    .tgla-floating-copy small,
    .tgla-floating-online,
    .tgla-loader-node,
    .tgla-loader-core,
    .tgla-loader-sweep,
    .tgla-loading-avatar,
    .tgla-welcome,
    .tgla-welcome-orb{
        animation:
            none !important;
    }

}

.tgla-overlay{
  position:fixed;inset:0;z-index:1350000;display:flex;align-items:center;justify-content:center;
  padding:24px;background:
    radial-gradient(circle at 12% 16%,rgba(49,196,255,.08),transparent 30%),
    radial-gradient(circle at 88% 86%,rgba(153,87,255,.08),transparent 31%),
    rgba(3,6,11,.74);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  font-family:"Inter","Segoe UI",Arial,sans-serif;color:var(--tgla-text);
}
.tgla-panel{
  width:min(1080px,96vw);height:min(860px,94vh);display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;
  overflow:hidden;border:1px solid rgba(244,208,77,.34);border-radius:24px;
  background:linear-gradient(180deg,rgba(13,19,30,.98),rgba(7,11,18,.99));
  box-shadow:var(--tgla-shadow),inset 0 1px rgba(255,255,255,.04);position:relative;
}
.tgla-panel:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,225,108,.85),transparent);pointer-events:none}

/* =========================================================
   TEMPOGROUP ASSISTANT — ADAPTIVE PANEL HEIGHT
   ========================================================= */

@media (min-width:781px){

    /*
     * Ukuran penuh tetap digunakan
     * ketika sudah ada percakapan.
     */
    .tgla-panel{
        transition:
            height
            .34s
            cubic-bezier(.22,1,.36,1),

            box-shadow
            .28s
            ease;
    }


    /*
     * Empty state dibuat lebih compact.
     *
     * Desktop besar:
     * maksimal sekitar 720px.
     *
     * Laptop pendek:
     * maksimal 90% viewport.
     */
    .tgla-panel.is-empty-state{
        height:
            min(
                720px,
                90vh
            );

        box-shadow:
            0 26px 78px
            rgba(0,0,0,.52),

            inset 0 1px
            rgba(255,255,255,.04);
    }


    /*
     * Welcome card berada lebih seimbang
     * di tengah area kosong.
     */
    .tgla-panel.is-empty-state
    .tgla-chat-stream{
        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        padding-top:
            18px;

        padding-bottom:
            18px;
    }


    .tgla-panel.is-empty-state
    .tgla-welcome{
        width:
            min(
                720px,
                100%
            );

        margin:
            0 auto;
    }

}
.tgla-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 24px 19px;border-bottom:1px solid var(--tgla-border);background:rgba(10,15,24,.83)}
.tgla-brand-row{display:flex;align-items:center;gap:15px;min-width:0}
.tgla-brand-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(244,208,77,.48);background:linear-gradient(145deg,rgba(244,208,77,.18),rgba(96,208,255,.08));box-shadow:inset 0 1px rgba(255,255,255,.07),0 10px 26px rgba(0,0,0,.2)}
.tgla-brand-icon span{font-size:22px;color:#fff1a7;filter:drop-shadow(0 0 12px rgba(244,208,77,.55))}
.tgla-brand-copy{min-width:0}
.tgla-title-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tgla-title{margin:0;font-size:24px;line-height:1.15;letter-spacing:-.025em;color:#fff;font-weight:800}
.tgla-premium-badge{display:inline-flex;align-items:center;min-height:23px;padding:3px 9px;border:1px solid rgba(244,208,77,.38);border-radius:999px;background:rgba(244,208,77,.09);color:#f7dc68;font-size:10px;font-weight:800;letter-spacing:.12em}
.tgla-online-dot{width:9px;height:9px;border-radius:50%;background:var(--tgla-green);box-shadow:0 0 0 5px rgba(98,228,154,.08),0 0 14px rgba(98,228,154,.7)}
.tgla-subtitle{margin:6px 0 0;color:var(--tgla-muted);font-size:13px;line-height:1.45}
.tgla-header-actions{display:flex;align-items:center;gap:9px}
.tgla-icon-btn,.tgla-close{width:42px;height:42px;border-radius:13px;border:1px solid var(--tgla-border);background:rgba(255,255,255,.035);color:#d7dee8;font:500 22px/1 "Segoe UI",Arial,sans-serif;cursor:pointer;transition:.16s}
.tgla-icon-btn:hover,.tgla-close:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.16);color:#fff}

.tgla-mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 18px;border-bottom:1px solid var(--tgla-border);background:rgba(8,13,21,.72)}
.tgla-mode-switch button{display:flex;align-items:center;gap:12px;min-height:66px;padding:12px 15px;text-align:left;border:1px solid var(--tgla-border);border-radius:16px;background:rgba(255,255,255,.02);color:#b7c0ce;cursor:pointer;transition:.18s ease}
.tgla-mode-switch button:hover{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
.tgla-mode-switch button.is-active{border-color:rgba(244,208,77,.48);background:linear-gradient(135deg,rgba(244,208,77,.14),rgba(244,208,77,.045));color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.035)}
.tgla-mode-icon{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.035);font-size:16px}
.tgla-mode-switch button.is-active .tgla-mode-icon{border-color:rgba(244,208,77,.44);background:rgba(244,208,77,.12);color:#ffe270}
.tgla-mode-switch strong{display:block;font-size:14px;line-height:1.25;font-weight:800}
.tgla-mode-switch small{display:block;margin-top:4px;color:#818da0;font-size:12px;line-height:1.35;font-weight:500}
.tgla-mode-switch button.is-active small{color:#b6aa74}

.tgla-mode-switch{
  min-width:0;
}

.tgla-mode-switch button{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  box-sizing:border-box;
}

.tgla-mode-switch .tgla-mode-copy{
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  overflow:hidden;
}

.tgla-mode-switch strong{
  display:block;
  max-width:100%;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
}

.tgla-mode-switch small{
  display:block;
  max-width:100%;
  margin-top:4px;

  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;

  line-height:1.35;
}

/* =========================================================
   TEMPOGROUP AI CONTEXT BAR
   ========================================================= */

.tgla-context-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    min-height:52px;

    padding:
        10px 18px;

    border-bottom:
        1px solid var(--tgla-border);

    background:
        rgba(7,12,19,.78);
}


.tgla-context-info{
    display:flex;
    flex-direction:column;

    min-width:0;

    gap:3px;
}


.tgla-context-eyebrow{
    display:block;

    color:
        #73d9ff;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}


#tgla-context-label{
    display:block;

    min-width:0;

    color:
        #d7dee8;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1.35;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.tgla-context-reset{
    flex:
        0 0 auto;

    min-height:
        32px;

    padding:
        6px 11px;

    border:
        1px solid rgba(99,216,255,.22);

    border-radius:
        10px;

    background:
        rgba(99,216,255,.06);

    color:
        #9fe5ff;

    font:
        700 11px/1
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    cursor:
        pointer;

    transition:
        .16s ease;
}


.tgla-context-reset:hover{
    border-color:
        rgba(99,216,255,.42);

    background:
        rgba(99,216,255,.11);

    color:
        #d6f6ff;
}


.tgla-context-reset[hidden]{
    display:
        none !important;
}

.tgla-chat-stream{min-height:0;overflow:auto;padding:24px 26px 30px;scroll-behavior:smooth;background:
  radial-gradient(circle at 14% 5%,rgba(73,199,255,.035),transparent 32%),
  linear-gradient(180deg,rgba(3,6,11,.1),rgba(3,6,11,.32))}
.tgla-chat-stream::-webkit-scrollbar{width:9px}.tgla-chat-stream::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:999px;border:2px solid transparent;background-clip:padding-box}

.tgla-welcome{max-width:720px;margin:22px auto;padding:25px 26px;display:flex;align-items:flex-start;gap:17px;border:1px solid var(--tgla-border);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));box-shadow:0 18px 45px rgba(0,0,0,.15)}
.tgla-welcome-orb{width:48px;height:48px;display:grid;place-items:center;flex:0 0 auto;border-radius:16px;border:1px solid rgba(99,216,255,.3);background:linear-gradient(145deg,rgba(99,216,255,.14),rgba(244,208,77,.08));color:#9fe8ff;font-size:20px}
.tgla-eyebrow{display:block;margin-bottom:7px;color:#73d9ff;font-size:11px;font-weight:800;letter-spacing:.13em}
.tgla-welcome h3{margin:0;color:#fff;font-size:20px;line-height:1.25;letter-spacing:-.015em}
.tgla-welcome p{margin:8px 0 0;color:var(--tgla-muted);font-size:14px;line-height:1.6}

/* Welcome masuk dengan lembut */
.tgla-welcome{
    animation:
        tglaWelcomeReveal
        .42s
        cubic-bezier(.22,1,.36,1)
        both;
}


@keyframes tglaWelcomeReveal{

    from{
        opacity:
            0;

        transform:
            translateY(8px)
            scale(.985);

        filter:
            blur(3px);
    }


    to{
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0);
    }

}

.tgla-welcome-orb{
    animation:
        tglaWelcomeOrbBreath
        3.4s
        ease-in-out
        infinite;
}


@keyframes tglaWelcomeOrbBreath{

    0%,
    100%{
        transform:
            translateY(0)
            scale(1);

        box-shadow:
            0 0 0
            rgba(99,216,255,0);
    }


    50%{
        transform:
            translateY(-2px)
            scale(1.025);

        box-shadow:
            0 0 20px
            rgba(99,216,255,.10);
    }

}

.tgla-message{display:flex;align-items:flex-start;gap:11px;max-width:80%;margin:0 0 18px}
.tgla-message-user{margin-left:auto;flex-direction:row}
.tgla-avatar{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(99,216,255,.24);border-radius:12px;background:rgba(99,216,255,.07);color:#9fe5ff;font-size:12px;font-weight:800}
.tgla-message-user .tgla-avatar{border-color:rgba(244,208,77,.32);background:rgba(244,208,77,.09);color:#f9df69}
.tgla-message-content{min-width:0;padding:14px 16px;border:1px solid var(--tgla-border);border-radius:7px 18px 18px 18px;background:var(--tgla-surface);box-shadow:0 12px 32px rgba(0,0,0,.15)}
.tgla-message-user .tgla-message-content{border-radius:18px 7px 18px 18px;border-color:rgba(244,208,77,.24);background:linear-gradient(145deg,rgba(92,72,12,.42),rgba(47,39,13,.34))}
.tgla-message-content pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:#f4f6f9;font:500 14px/1.55 "Inter","Segoe UI",Arial,sans-serif}
.tgla-message-mode{display:block;margin-bottom:7px;color:#edd75f;font-size:10px;font-weight:800;letter-spacing:.12em}
.tgla-review-message{min-width:300px}
.tgla-topic-divider{display:flex;align-items:center;gap:11px;margin:25px 0;color:#718096;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.tgla-topic-divider span{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1))}.tgla-topic-divider span:last-child{background:linear-gradient(90deg,rgba(255,255,255,.1),transparent)}

.tgla-typing{display:flex;align-items:center;gap:6px;min-height:28px}.tgla-typing span{width:7px;height:7px;border-radius:50%;background:var(--tgla-cyan);animation:tgla-bounce 1s infinite ease-in-out}.tgla-typing span:nth-child(2){animation-delay:.13s}.tgla-typing span:nth-child(3){animation-delay:.26s}.tgla-typing em{margin-left:7px;color:#8793a5;font-size:13px;font-style:normal}@keyframes tgla-bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* =========================================================
   TEMPOGROUP AI — SIGNATURE LOADER
   ========================================================= */

.tgla-ai-loader{
    position:relative;

    display:flex;
    align-items:center;
    gap:13px;

    min-width:270px;
    min-height:58px;

    padding:
        11px 16px;

    overflow:hidden;

    border-color:
        rgba(99,216,255,.18);

    background:
        linear-gradient(
            110deg,
            rgba(12,19,28,.97),
            rgba(18,24,31,.97)
        );
}


.tgla-loader-sigil{
    position:relative;

    width:40px;
    height:40px;

    flex:
        0 0 40px;
}


.tgla-loader-node,
.tgla-loader-core{
    position:absolute;

    display:block;

    transform:
        rotate(45deg);
}


.tgla-loader-node{
    width:7px;
    height:7px;

    border:
        1px solid rgba(99,216,255,.48);

    background:
        rgba(99,216,255,.20);

    box-shadow:
        0 0 9px rgba(99,216,255,.22);

    animation:
        tglaLoaderNodePulse
        1.6s
        ease-in-out
        infinite;
}


.tgla-loader-node.is-top{
    top:2px;
    left:16px;

    animation-delay:
        0s;
}


.tgla-loader-node.is-right{
    top:16px;
    right:2px;

    animation-delay:
        .2s;
}


.tgla-loader-node.is-bottom{
    bottom:2px;
    left:16px;

    animation-delay:
        .4s;
}


.tgla-loader-node.is-left{
    top:16px;
    left:2px;

    animation-delay:
        .6s;
}


.tgla-loader-core{
    width:12px;
    height:12px;

    left:50%;
    top:50%;

    margin:
        -6px 0 0 -6px;

    border:
        1px solid rgba(255,226,107,.78);

    background:
        linear-gradient(
            145deg,
            #ffe36d,
            #bd8d15
        );

    box-shadow:
        0 0 13px rgba(244,208,77,.34);

    animation:
        tglaLoaderCorePulse
        1.35s
        ease-in-out
        infinite;
}


.tgla-loader-copy{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;

    min-width:0;
}


.tgla-loader-copy strong{
    color:#8fe4ff;

    font-size:10px;
    line-height:1.2;

    font-weight:850;

    letter-spacing:.13em;
}


.tgla-loader-copy em{
    margin-top:5px;

    color:#a9b3c2;

    font-size:12px;
    line-height:1.35;

    font-style:normal;
    font-weight:600;
}


.tgla-loader-sweep{
    position:absolute;

    left:-45%;
    bottom:0;

    width:42%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(99,216,255,.8),
            rgba(255,226,107,.92),
            transparent
        );

    box-shadow:
        0 0 10px rgba(99,216,255,.28);

    animation:
        tglaLoaderSweep
        2.1s
        ease-in-out
        infinite;
}


.tgla-loading-avatar{
    animation:
        tglaLoadingAvatarPulse
        1.8s
        ease-in-out
        infinite;
}


@keyframes tglaLoaderNodePulse{
    0%,
    100%{
        opacity:.28;

        transform:
            rotate(45deg)
            scale(.72);
    }

    45%{
        opacity:1;

        transform:
            rotate(45deg)
            scale(1.08);

        background:
            rgba(99,216,255,.62);

        box-shadow:
            0 0 13px rgba(99,216,255,.45);
    }
}


@keyframes tglaLoaderCorePulse{
    0%,
    100%{
        transform:
            rotate(45deg)
            scale(.88);

        box-shadow:
            0 0 9px rgba(244,208,77,.22);
    }

    50%{
        transform:
            rotate(45deg)
            scale(1.12);

        box-shadow:
            0 0 18px rgba(244,208,77,.52);
    }
}


@keyframes tglaLoaderSweep{
    0%{
        transform:
            translateX(0);

        opacity:0;
    }

    20%{
        opacity:1;
    }

    80%{
        opacity:1;
    }

    100%{
        transform:
            translateX(360%);

        opacity:0;
    }
}


@keyframes tglaLoadingAvatarPulse{
    0%,
    100%{
        box-shadow:
            0 0 0 rgba(99,216,255,0);
    }

    50%{
        box-shadow:
            0 0 18px rgba(99,216,255,.22);
    }
}

.tgla-assistant-card{width:min(680px,100%);padding:0;overflow:hidden;border-radius:20px;background:linear-gradient(180deg,#111925,#0f1722)}
.tgla-result-heading{display:flex;align-items:flex-start;gap:12px;padding:15px 16px;border-bottom:1px solid var(--tgla-border)}
.tgla-result-heading p{margin:1px 0 0;color:#b0bac8;font-size:13px;line-height:1.5}
.tgla-status-pill{display:inline-flex;align-items:center;flex:0 0 auto;min-height:27px;padding:5px 10px;border-radius:999px;font-size:10px;font-weight:850;letter-spacing:.055em;white-space:nowrap}
.tgla-status-pill.is-ready{background:rgba(98,228,154,.12);color:#7df0ad;border:1px solid rgba(98,228,154,.2)}
.tgla-status-pill.is-revision,.tgla-status-pill.is-danger{background:rgba(255,113,103,.12);color:#ff9e96;border:1px solid rgba(255,113,103,.2)}
.tgla-status-pill.is-info{background:rgba(99,216,255,.11);color:#8fe4ff;border:1px solid rgba(99,216,255,.2)}
.tgla-status-pill.is-warning{background:rgba(244,208,77,.11);color:#f7dc68;border:1px solid rgba(244,208,77,.2)}
.tgla-status-pill.is-muted{background:rgba(255,255,255,.055);color:#b4becc;border:1px solid rgba(255,255,255,.09)}
.tgla-reply-box{margin:15px 16px 12px;padding:14px;border:1px solid rgba(244,208,77,.28);border-radius:15px;background:linear-gradient(145deg,rgba(244,208,77,.075),rgba(244,208,77,.025))}
.tgla-reply-box label{display:block;margin-bottom:9px;color:#f1d65d;font-size:11px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.tgla-reply-editor{display:block;width:100%;min-height:86px;resize:vertical;box-sizing:border-box;padding:13px 14px;border:1px solid rgba(255,255,255,.1);border-radius:12px;outline:0;background:rgba(4,7,12,.34);color:#fff;font:500 15px/1.55 "Inter","Segoe UI",Arial,sans-serif;transition:.16s}
.tgla-reply-editor:not([readonly]){border-color:rgba(244,208,77,.66);box-shadow:0 0 0 4px rgba(244,208,77,.08);background:rgba(244,208,77,.035)}
.tgla-reply-box.is-empty p{margin:0;color:#c1cad6;font-size:14px}
.tgla-inline-actions{display:flex;gap:9px;padding:0 16px 14px}
.tgla-inline-actions button{min-height:40px;padding:9px 14px;border-radius:11px;font:800 12px/1 "Inter","Segoe UI",Arial,sans-serif;cursor:pointer;transition:.16s}
.tgla-edit-btn{border:1px solid rgba(255,255,255,.11);background:#1b2635;color:#edf1f6}.tgla-edit-btn:hover{background:#233146}
.tgla-copy-btn{border:1px solid #e2bd2b;background:linear-gradient(135deg,#ffe36d,#d4a817);color:#15120a;box-shadow:0 8px 20px rgba(208,164,24,.16)}.tgla-copy-btn:hover{filter:brightness(1.04);transform:translateY(-1px)}
.tgla-feedback-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 16px 15px;padding-top:13px;border-top:1px solid var(--tgla-border)}
.tgla-feedback-row>span{margin-right:2px;color:#8692a4;font-size:12px;font-weight:600}
.tgla-feedback-row button{min-height:31px;padding:6px 10px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.025);color:#b8c2d0;font:700 11px/1 "Inter","Segoe UI",Arial,sans-serif;cursor:pointer;transition:.15s}
.tgla-feedback-row button:hover,.tgla-feedback-row button.is-selected{border-color:rgba(244,208,77,.48);background:rgba(244,208,77,.1);color:#f3da64}

.tgla-composer-shell{position:relative;z-index:20;padding:14px 18px 18px;border-top:1px solid var(--tgla-border);background:linear-gradient(180deg,rgba(9,14,22,.92),rgba(7,11,18,.99))}
.tgla-composer{overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:19px;background:linear-gradient(180deg,#101824,#0d141f);box-shadow:0 18px 45px rgba(0,0,0,.18);transition:.17s}
.tgla-composer:focus-within{border-color:rgba(244,208,77,.52);box-shadow:0 0 0 4px rgba(244,208,77,.07),0 18px 45px rgba(0,0,0,.2)}
.tgla-input-pane{padding:15px 16px 7px}.tgla-input-pane[hidden]{display:none}
.tgla-input-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:6px}
.tgla-input-heading label{color:#eef2f7;font-size:13px;font-weight:800}.tgla-input-heading span{color:#748196;font-size:11px;line-height:1.35;text-align:right}
.tgla-input-pane textarea{display:block;width:100%;min-height:68px;max-height:150px;box-sizing:border-box;padding:10px 0;border:0;outline:0;resize:none;background:transparent;color:#f8fafc;font:500 14px/1.55 "Inter","Segoe UI",Arial,sans-serif}
.tgla-input-pane textarea::placeholder{color:#59667a}
.tgla-composer-toolbar{display:flex;align-items:center;gap:12px;padding:10px 11px 11px;border-top:1px solid rgba(255,255,255,.06)}
.tgla-composer-hint{margin-left:auto;color:#6f7b8e;font-size:11px}
.tgla-send-btn{position:relative;z-index:3;display:inline-flex;align-items:center;gap:8px;min-height:43px;padding:10px 16px;border:1px solid #e4bf2e;border-radius:12px;background:linear-gradient(135deg,#ffe46f,#d4a818);color:#171309;font:800 12px/1 "Inter","Segoe UI",Arial,sans-serif;cursor:pointer;box-shadow:0 9px 24px rgba(210,166,23,.18);transition:.16s;pointer-events:auto!important;touch-action:manipulation}
.tgla-send-btn:hover{filter:brightness(1.04);transform:translateY(-1px)}.tgla-send-btn.is-loading{opacity:.86}.tgla-send-btn:disabled{opacity:1;cursor:pointer}

.tgla-toast{position:fixed;right:22px;bottom:22px;z-index:1360000;max-width:380px;padding:13px 16px;border:1px solid rgba(98,228,154,.4);border-radius:13px;background:#111a25;color:#ecfff3;font:600 13px/1.45 "Inter","Segoe UI",Arial,sans-serif;box-shadow:0 20px 48px rgba(0,0,0,.45)}.tgla-toast.is-error{border-color:rgba(255,113,103,.5);color:#ffe8e6}

@media(max-width:780px){
  .tgla-overlay{padding:0}.tgla-panel{width:100%;height:100%;max-height:none;border:0;border-radius:0}
  .tgla-header{padding:15px}.tgla-brand-icon{width:42px;height:42px}.tgla-title{font-size:20px}.tgla-premium-badge{display:none}.tgla-subtitle{font-size:12px}
  .tgla-mode-switch{padding:10px;gap:7px}.tgla-mode-switch button{min-height:55px;padding:9px 10px}.tgla-mode-switch small{display:none}.tgla-mode-icon{width:32px;height:32px}
  .tgla-chat-stream{padding:18px 12px}.tgla-message{max-width:94%}.tgla-assistant-card{width:100%}.tgla-welcome{margin:10px auto;padding:18px}.tgla-welcome p{font-size:13px}
  .tgla-composer-shell{padding:9px}.tgla-input-heading span{display:none}.tgla-composer-hint{display:none}.tgla-feedback-row{align-items:flex-start}
.tgla-context-bar{
    padding:
        9px 12px;

    min-height:
        46px;
}


.tgla-context-eyebrow{
    font-size:
        8px;
}


#tgla-context-label{
    font-size:
        11px;
}


.tgla-context-reset{
    min-height:
        29px;

    padding:
        5px 8px;

    font-size:
        10px;
}

}

@media(max-width:480px){
  .tgla-brand-row{gap:10px}.tgla-brand-icon{display:none}.tgla-title{font-size:18px}.tgla-header-actions{gap:6px}.tgla-icon-btn,.tgla-close{width:36px;height:36px}
  .tgla-mode-switch strong{font-size:12px}.tgla-mode-icon{display:none}.tgla-message{max-width:98%;gap:7px}.tgla-avatar{width:30px;height:30px}.tgla-message-content{padding:12px}.tgla-reply-editor{font-size:14px}.tgla-result-heading{flex-direction:column;gap:8px}.tgla-inline-actions{flex-wrap:wrap}.tgla-send-btn{margin-left:auto}
}

/* =========================================================
   MANUAL PATCH P5.4 — BALANCED CONVERSATION LAYOUT
   Mengatur posisi pesan, draft, dan kartu Assistant tanpa
   mengubah struktur HTML atau JavaScript.
   ========================================================= */

/* Jalur percakapan utama dibuat lebih sempit dan berada
   tepat di tengah panel premium */
@media (min-width: 901px) {
    .tgla-chat-stream {
        width: min(100%, 1160px) !important;
        max-width: 1160px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: clamp(24px, 3vw, 44px) !important;
        padding-right: clamp(24px, 3vw, 44px) !important;
        box-sizing: border-box !important;
    }

    /* Jawaban Assistant berada di sisi kiri jalur percakapan */
    .tgla-message-assistant {
        width: min(820px, 72%) !important;
        max-width: 72% !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* Pesan member dan Draft CS berada di sisi kanan */
    .tgla-message-user {
        display: flex !important;
        width: fit-content !important;
        max-width: 58% !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    /* Bubble pesan member biasa mengikuti panjang teks */
    .tgla-message-user .tgla-message-content {
        width: fit-content !important;
        min-width: 0 !important;
        max-width: min(520px, 46vw) !important;
        box-sizing: border-box !important;
    }

    /* Draft CS dibuat cukup lebar, tetapi tidak memenuhi layar */
    .tgla-message-user .tgla-review-message {
        width: clamp(360px, 40vw, 560px) !important;
        min-width: 0 !important;
        max-width: min(560px, 46vw) !important;
        box-sizing: border-box !important;
    }

    /* Pastikan bubble panjang tetap turun ke baris berikutnya */
    .tgla-message-user,
    .tgla-message-user *,
    .tgla-message-assistant,
    .tgla-message-assistant * {
        overflow-wrap: anywhere;
        word-break: normal;
    }
}

/* Tablet: tetap memakai pola kiri dan kanan,
   tetapi menggunakan ruang lebih luas */
@media (min-width: 781px) and (max-width: 900px) {
    .tgla-chat-stream {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }

    .tgla-message-assistant {
        width: 78% !important;
        max-width: 78% !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    .tgla-message-user {
        display: flex !important;
        width: fit-content !important;
        max-width: 70% !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        gap: 10px !important;
    }

    .tgla-message-user .tgla-message-content {
        width: fit-content !important;
        max-width: 56vw !important;
    }

    .tgla-message-user .tgla-review-message {
        width: clamp(320px, 52vw, 500px) !important;
        max-width: 56vw !important;
        min-width: 0 !important;
    }
}

/* HP: seluruh kartu menggunakan lebar layar secara aman */
@media (max-width: 780px) {
    .tgla-chat-stream {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }

    .tgla-message-assistant {
        width: 94% !important;
        max-width: 94% !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    .tgla-message-user {
        display: flex !important;
        width: fit-content !important;
        max-width: 88% !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    .tgla-message-user .tgla-message-content,
    .tgla-message-user .tgla-review-message {
        width: auto !important;
        min-width: 0 !important;
        max-width: 72vw !important;
    }
}

/* =========================================================
   MANUAL PATCH P5.5 — PREMIUM FLOATING RIGHT ASSISTANT
   Desktop/Tablet = floating side assistant.
   Mobile tetap fullscreen agar nyaman digunakan.
   ========================================================= */

@media (min-width: 781px) {

    /*
     * Overlay tidak lagi menutupi website secara visual
     * dan area kosong tetap dapat digunakan.
     */
    .tgla-overlay {
        position: fixed !important;
        inset: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        padding: 16px 18px !important;

        background: transparent !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        pointer-events: none !important;
    }

    /*
     * Panel Assistant menjadi window premium
     * yang mengambang di sebelah kanan.
     */
    .tgla-panel {
        pointer-events: auto !important;

        width: min(
            600px,
            calc(100vw - 36px)
        ) !important;

        height: min(
            900px,
            calc(100vh - 32px)
        ) !important;

        max-height:
            calc(100vh - 32px) !important;

        margin: 0 !important;

        border:
            1px solid
            rgba(244, 208, 77, .38) !important;

        border-radius:
            22px !important;

        background:
            linear-gradient(
                180deg,
                rgba(13, 19, 30, .985),
                rgba(7, 11, 18, .995)
            ) !important;

        box-shadow:
            0 34px 110px
                rgba(0, 0, 0, .64),
            0 0 0 1px
                rgba(244, 208, 77, .035),
            inset 0 1px
                rgba(255, 255, 255, .045) !important;
    }

    /*
     * Header dipadatkan agar side panel
     * tidak terasa terlalu besar.
     */
    .tgla-header {
        padding:
            17px 18px 15px !important;
    }

    .tgla-brand-icon {
        width: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
    }

    .tgla-title {
        font-size:
            20px !important;
    }

    .tgla-subtitle {
        font-size:
            12px !important;
        margin-top:
            4px !important;
    }

    /*
     * Dua mode tetap berdampingan.
     */
    .tgla-mode-switch {
        padding:
            11px 13px !important;

        gap:
            8px !important;
    }

    .tgla-mode-switch button {
        min-height:
            58px !important;

        padding:
            9px 11px !important;

        border-radius:
            14px !important;
    }

    .tgla-mode-switch strong {
        font-size:
            13px !important;
    }

    .tgla-mode-switch small {
        font-size:
            10.5px !important;
    }

    /*
     * P5.4 sebelumnya dibuat untuk panel lebar.
     * Pada side panel stream kembali menggunakan
     * seluruh lebar internal.
     */
    .tgla-chat-stream {
        width:
            100% !important;

        max-width:
            none !important;

        margin:
            0 !important;

        padding:
            20px 17px 24px !important;

        box-sizing:
            border-box !important;
    }

    /*
     * Balasan Assistant: kiri.
     */
    .tgla-message-assistant {
        width:
            min(92%, 500px) !important;

        max-width:
            92% !important;

        margin-left:
            0 !important;

        margin-right:
            auto !important;
    }

    /*
     * Member / Draft CS: kanan.
     */
    .tgla-message-user {
        width:
            fit-content !important;

        max-width:
            84% !important;

        margin-left:
            auto !important;

        margin-right:
            0 !important;

        gap:
            9px !important;
    }

    .tgla-message-user
    .tgla-message-content {
        width:
            fit-content !important;

        max-width:
            430px !important;
    }

    .tgla-message-user
    .tgla-review-message {
        width:
            min(430px, 72vw) !important;

        min-width:
            280px !important;

        max-width:
            430px !important;
    }

    /*
     * Kartu hasil menggunakan lebar yang tersedia,
     * tetapi tidak melewati jalur percakapan.
     */
    .tgla-assistant-card {
        width:
            100% !important;

        max-width:
            100% !important;
    }

    /*
     * Composer lebih compact.
     */
    .tgla-composer-shell {
        padding:
            10px 12px 12px !important;
    }

    .tgla-input-pane {
        padding:
            13px 14px 6px !important;
    }

    .tgla-input-pane textarea {
        min-height:
            62px !important;

        max-height:
            130px !important;
    }
}


/*
 * Untuk laptop dengan area kerja lebih sempit.
 */
@media (
    min-width: 781px
) and (
    max-width: 1100px
) {

    .tgla-panel {
        width:
            min(
                560px,
                calc(100vw - 24px)
            ) !important;

        height:
            calc(100vh - 24px) !important;

        max-height:
            calc(100vh - 24px) !important;
    }

    .tgla-overlay {
        padding:
            12px !important;
    }
}

/* =========================================================
   MANUAL PATCH P5.6
   COMPACT SIGNATURE ASSISTANT LAUNCHER
   Identitas utama: ❖
   ========================================================= */

.tempogroup-assistant-open {
    right: 22px !important;
    bottom: 22px !important;

    box-sizing: border-box !important;

    width: 56px !important;
    min-width: 56px !important;
    max-width: 164px !important;
    height: 56px !important;

    padding: 7px !important;
    gap: 10px !important;

    border-radius: 18px !important;
    overflow: visible !important;

    transition:
        width .26s cubic-bezier(.2, .8, .2, 1),
        translate .18s ease,
        scale .18s ease,
        box-shadow .18s ease !important;
}

/* Melebar hanya ketika perangkat memiliki mouse */
@media (hover: hover) and (pointer: fine) {
    .tempogroup-assistant-open:hover {
        width: 164px !important;
    }
}

/* Tetap ramah untuk navigasi keyboard */
.tempogroup-assistant-open:focus-visible {
    width: 164px !important;
    outline: 2px solid rgba(244, 208, 77, .7);
    outline-offset: 4px;
}

/* Simbol khas Assistant */
.tgla-floating-icon {
    width: 40px !important;
    height: 40px !important;

    flex: 0 0 40px !important;

    border-radius: 13px !important;

    font-size: 21px !important;
    line-height: 1 !important;

    animation: none !important;
}

/* Hilangkan kilatan yang terlalu ramai */
.tgla-floating-icon::after {
    opacity: 0 !important;
    animation: none !important;
}

/* Tulisan disembunyikan pada kondisi normal */
.tgla-floating-copy {
    max-width: 0 !important;

    opacity: 0;
    visibility: hidden;
    overflow: hidden;

    white-space: nowrap;

    transform: translateX(-5px);

    transition:
        max-width .26s ease,
        opacity .18s ease,
        transform .26s ease,
        visibility .18s ease;
}

/* Tulisan muncul saat launcher dibuka dengan hover */
.tempogroup-assistant-open:hover .tgla-floating-copy,
.tempogroup-assistant-open:focus-visible .tgla-floating-copy {
    max-width: 88px !important;

    opacity: 1;
    visibility: visible;

    transform: translateX(0);
}

.tgla-floating-copy strong,
.tgla-floating-copy small {
    animation: none !important;
}

/* Titik online tetap terlihat pada tombol compact */
.tgla-floating-online {
    position: absolute !important;

    top: 3px !important;
    right: 3px !important;

    width: 7px !important;
    height: 7px !important;

    margin: 0 !important;

    box-shadow:
        0 0 0 3px rgba(98, 228, 154, .08),
        0 0 8px rgba(98, 228, 154, .55) !important;
}

/* Nonaktifkan ring besar agar tidak mengganggu konten */
.tempogroup-assistant-open::before {
    opacity: 0 !important;
    animation: none !important;
}

/* Tooltip disembunyikan secara default */
.tempogroup-assistant-open::after {
    max-width: 210px !important;
    padding: 8px 11px !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transform: translateY(5px) scale(.97) !important;

    animation: none !important;

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease !important;
}

/* JavaScript menambahkan class ini selama 4,2 detik */
.tempogroup-assistant-open.tgla-show-hint::after {
    opacity: 1 !important;
    visibility: visible !important;

    transform: translateY(0) scale(1) !important;
}

/* Tampilan smartphone */
@media (max-width: 700px) {
    .tempogroup-assistant-open,
    .tempogroup-assistant-open:hover,
    .tempogroup-assistant-open:focus-visible {
        right: 14px !important;
        bottom: 16px !important;

        width: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        height: 54px !important;

        padding: 7px !important;
        border-radius: 17px !important;
    }

    .tgla-floating-icon {
        width: 38px !important;
        height: 38px !important;

        flex-basis: 38px !important;

        font-size: 20px !important;
    }

    .tgla-floating-copy {
        display: none !important;
    }

    .tempogroup-assistant-open::after {
        display: none !important;
    }
}