/* World Kiki: icon bottom right, small panel above it. Colours and
   bubbles reuse playlab_kiki_tutor.css (.pl-kiki__summary / __notice). */

.kiki-world {
    position: fixed;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 12;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}

.kiki-world[hidden] { display: none; }
.kiki-world.external-settings { z-index:22; }

.kiki-world > * { pointer-events: auto; }

.kiki-dock {
    width: 64px;
    height: 64px;
    padding: 6px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.35);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.kiki-dock img {
    display: block;
    width: 100%;
    height: 100%;
}

.kiki-dock:hover { transform: translateY(-2px); }

.kiki-dock:focus-visible {
    outline: 3px solid #bfdbfe;
    outline-offset: 2px;
}

.kiki-dock[data-kiki-state="thinking"],
.kiki-dock[data-kiki-state="guiding"] {
    animation: kiki-bob 0.9s ease-in-out infinite;
}

.kiki-world.is-open .kiki-dock {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.55), 0 10px 24px rgba(15, 23, 42, 0.35);
}

@keyframes kiki-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.kiki-panel {
    width: min(340px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid #dbeafe;
    border-radius: 20px;
    background: #fff;
    color: #0f172a;
    font-size: 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
}

.kiki-panel[hidden] { display: none; }

.kiki-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kiki-head-icon {
    width: 40px;
    height: 40px;
    flex: none;
}

.kiki-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
}

.kiki-head .pl-kiki__eyebrow { margin-bottom: 2px; }

.kiki-close {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.kiki-log {
    list-style: none;
    margin: 0;
    padding: 10px;
    min-height: 0;
    max-height: min(42vh, 360px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-wrap: anywhere;
}

.kiki-log:empty { display: none; }

.kiki-item p { margin: 0; }

.kiki-item.pl-kiki__summary { margin: 0; padding: 10px 12px; }

.kiki-user {
    align-self: flex-end;
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 14px 14px 4px 14px;
    background: #0f172a;
    color: #fff;
}

.kiki-reply {
    align-self: flex-start;
    max-width: 92%;
}

.kiki-details {
    margin-top: 6px;
    color: #334155;
    font-size: 13px;
}

.kiki-note {
    align-self: center;
    font-size: 12px;
    color: #64748b;
}

.kiki-note.is-ok { color: #15803d; }
.kiki-note.is-warn { color: #b45309; }
.kiki-note.is-error { color: #b91c1c; }

.kiki-thinking { align-self: flex-start; font-size: 13px; }

.kiki-actions,
.kiki-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kiki-actions { margin-top: 8px; }

.kiki-chip {
    padding: 6px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #fff;
    color: #1d4ed8;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.kiki-chip:hover { background: #eff6ff; }

.kiki-world.is-busy .kiki-chip { opacity: 0.55; cursor: default; }

.kiki-form {
    display: flex;
    gap: 6px;
}

.kiki-input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    color: #0f172a;
}

.kiki-input:focus {
    outline: 2px solid #93c5fd;
    border-color: #93c5fd;
}

.kiki-send {
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.kiki-send:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 640px) {
    .kiki-world { right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
    .kiki-dock { width: 54px; height: 54px; }
    .kiki-log { max-height: 34vh; }
}

/* Text entry only: never substitute unapproved character artwork. */
.kiki-wordmark { display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; color: #2452b8; letter-spacing: -.4px; }
.kiki-head-icon.kiki-wordmark { flex: 0 0 32px; height: 32px; border-radius: 50%; background: #eaf2ff; }

/* Official DOM avatar: fixed screen coordinates, never a Phaser actor. */
.kiki-world.has-avatar .kiki-dock {
    position:absolute;left:0;top:0;width:112px;height:140px;padding:0;
    border:0;border-radius:0;background:transparent;box-shadow:none;
    animation:none;transition:none;touch-action:none;user-select:none;will-change:transform;
}
.kiki-world.has-avatar .kiki-dock[hidden] { display:none; }
.kiki-world.has-avatar .kiki-dock img { width:100%;height:100%;object-fit:contain;pointer-events:none; }
.kiki-world.has-avatar .kiki-panel {
    position:fixed;right:calc(16px + env(safe-area-inset-right,0px));
    bottom:calc(204px + env(safe-area-inset-bottom,0px));
    box-sizing:border-box;max-height:calc(100dvh - 224px);overflow:auto;
}
.kiki-head-icon { object-fit:contain; }
.kiki-avatar-tools {
    position:fixed;left:0;top:0;width:112px;height:140px;pointer-events:auto;will-change:transform;
}
.kiki-restore {
    width:52px;height:52px;padding:4px;border:2px solid #fff;border-radius:50%;background:#eff6ff;
    box-shadow:0 4px 14px #0f172a40;cursor:pointer;
}
.kiki-restore img { display:block;width:100%;height:100%;object-fit:contain;pointer-events:none; }
.kiki-settings { border-top:1px solid #e2e8f0;padding-top:6px;color:#475569;font-size:12px; }
.kiki-settings-trigger { min-height:44px;padding:6px 0;border:0;background:transparent;color:#475569;font:inherit;cursor:pointer;font-weight:700; }
.kiki-settings-menu {
    position:fixed;box-sizing:border-box;width:220px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;
    padding:8px;border:1px solid #dbeafe;border-radius:16px;background:#fff;color:#334155;
    box-shadow:0 8px 24px #0f172a33;pointer-events:auto;z-index:2;font:13px system-ui;
}
.kiki-menu-head { display:flex;align-items:center;justify-content:space-between;padding-left:8px; }
.kiki-menu-close { width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#475569;font-size:20px;cursor:pointer; }
.kiki-settings-menu .kiki-hide,.kiki-settings-menu .kiki-motion {
    display:block;width:100%;min-height:44px;padding:10px;border:0;border-radius:10px;background:transparent;color:#334155;font:inherit;text-align:left;cursor:pointer;
}
.kiki-settings-menu .kiki-hide:hover,.kiki-settings-menu .kiki-motion:hover { background:#eff6ff; }
.kiki-motion-note { margin:8px 0 0;line-height:1.5; }
.kiki-hide:focus-visible,.kiki-restore:focus-visible,.kiki-motion:focus-visible,.kiki-settings-trigger:focus-visible,.kiki-menu-close:focus-visible { outline:3px solid #2563eb;outline-offset:1px; }
.kiki-avatar-tools[hidden],.kiki-restore[hidden],.kiki-motion-note[hidden],.kiki-settings-menu[hidden] { display:none; }
/* More specific than the legacy dock-greeting rules in world-ux.css. */
.kiki-world .kiki-bubble.kiki-dialogue-hint {
    position:fixed;box-sizing:border-box;width:max-content;max-width:min(236px,calc(100vw - 24px));
    margin:0;padding:10px 14px;border:1px solid #dbeafe;border-radius:16px;background:#fffdf5;
    color:#263a50;box-shadow:0 5px 18px #0f172a26;pointer-events:auto;z-index:1;
    transition:opacity .15s ease,transform .15s ease;
}
.kiki-world .kiki-dialogue-hint[hidden] { display:none; }
.kiki-world .kiki-dialogue-hint .kiki-bubble-text { display:block;font:600 12px/1.5 system-ui; }
.kiki-world .kiki-dialogue-hint::after { content:"";position:absolute;width:10px;height:10px;background:#fffdf5;transform:rotate(45deg); }
.kiki-dialogue-hint[data-placement=above]::after { bottom:-6px;left:var(--tail-x);border-right:1px solid #dbeafe;border-bottom:1px solid #dbeafe; }
.kiki-dialogue-hint[data-placement=below]::after { top:-6px;left:var(--tail-x);border-left:1px solid #dbeafe;border-top:1px solid #dbeafe; }
.kiki-dialogue-hint[data-placement=left]::after { right:-6px;top:50%;border-right:1px solid #dbeafe;border-top:1px solid #dbeafe; }
.kiki-dialogue-hint[data-placement=right]::after { left:-6px;top:50%;border-left:1px solid #dbeafe;border-bottom:1px solid #dbeafe; }
@media(max-width:640px) {
    .kiki-world.has-avatar .kiki-dock { width:96px;height:120px; }
    .kiki-avatar-tools { width:96px;height:120px; }
    .kiki-world.has-avatar .kiki-panel { bottom:calc(185px + env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 197px); }
}
body.is-building-lobby .kiki-world.has-avatar .kiki-dock { width:80px;height:100px; }
body.is-building-lobby .kiki-avatar-tools { width:80px;height:100px; }
body.is-building-lobby .kiki-world.has-avatar .kiki-panel {
    bottom:calc(116px + env(safe-area-inset-bottom,0px));
    max-height:calc(100dvh - 136px);
}
@media(max-width:640px) {
    body.is-building-lobby .kiki-world.has-avatar .kiki-dock { width:72px;height:90px; }
    body.is-building-lobby .kiki-avatar-tools { width:72px;height:90px; }
    body.is-building-lobby .kiki-world.has-avatar .kiki-panel {
        bottom:calc(106px + env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 118px);
    }
}
@media(prefers-reduced-motion:reduce) {
    .kiki-dock { animation:none !important;transition:none; }
    .kiki-world .kiki-dialogue-hint { transition:none; }
}
/* Leave the existing top toolbar clear on landscape phones/short windows. */
@media(max-height:500px) {
    .kiki-world.has-avatar .kiki-panel {
        bottom:calc(20px + env(safe-area-inset-bottom,0px));
        max-height:calc(100dvh - 100px - env(safe-area-inset-bottom,0px));
    }
}