/* ==========================================================================
PromptWiz — Cartoon UI
========================================================================== */

:root {

    /* --------------------------------------------------
       Cartoon palette
       -------------------------------------------------- */

    --pw-blue:     oklch(92% 0.10 250);
    --pw-violet:   oklch(92% 0.08 305);
    --pw-peach:    oklch(93% 0.08 55);
    --pw-coral:    oklch(82% 0.15 20);

    --pw-bg:       oklch(95% 0.02 250);

    --pw-panel-bg: var(--pw-blue);
    --pw-group-bg: var(--pw-violet);
    --pw-descr-bg: var(--pw-peach);

    --pw-text:     oklch(18% 0.02 260);

    --pw-selected-bg: var(--pw-coral);
    --pw-selected-text: white;

    --pw-input-bg:     oklch(96% 0.03 250);
    --pw-input-text:   oklch(26% 0.08 250);
    --pw-input-border: oklch(55% 0.10 250);

    --pw-font: .84rem;

    --pw-z-panel: 1000;
    --pw-z-group: 1100;
    --pw-z-descr: 1100;

    --pw-border: #111;
}

/* ==========================================================================
Prompt input
========================================================================== */

.pw-prompt {

    outline: none !important;

    background: var(--pw-input-bg);
    color: var(--pw-input-text);

    border: 1px solid var(--pw-border);
    border-radius: 4px;

    font-weight: 600;

    box-shadow:
    0 1px 0 rgba(0,0,0,.08),
    0 6px 18px rgba(0,0,0,.10);

    transition:
        transform .08s ease,
        box-shadow .08s ease;
}

.pw-prompt:focus {

    transform: translate(-2px,-2px);

    box-shadow:
        6px 6px 0 var(--pw-border),
        12px 12px 0 rgba(0,0,0,.15);
}

input.empty {
    width: 3ch;
}

/* ==========================================================================
TipWiz visibility
========================================================================== */

.tipwiz {
    opacity: 0;
    pointer-events: none;
}

.tipwiz.is-displayed {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================================================
Shared panel styling
========================================================================== */

.promptwiz-panel,
.action-group-panel,
.action-descr-panel {

    position: absolute;

    color: var(--pw-text);

    border: 0px solid var(--pw-border);

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

/* ==========================================================================
Actions panel (square)
========================================================================== */

.promptwiz-panel {

    z-index: var(--pw-z-panel);

    background: var(--pw-panel-bg);

    border-radius: 0;

    overflow: hidden;
}

/* ==========================================================================
Group panel (rounded badge)
========================================================================== */

.action-group-panel {

    z-index: var(--pw-z-group);

    background: var(--pw-group-bg);

    border-radius: 999px;

    display: flex;
    align-items: center;
}

.action-group {

    display: flex;
    align-items: center;

    min-height: 100%;

    padding: .35rem .9rem;

    font-size: var(--pw-font);
    font-weight: 700;

    white-space: nowrap;
}

/* ==========================================================================
Description panel (square)
========================================================================== */

.action-descr-panel {

    z-index: var(--pw-z-descr);

    background: var(--pw-descr-bg);

    border-radius: 0;

    padding: .6rem .7rem;

    max-width: 26rem;
}

/* ==========================================================================
Action list
========================================================================== */

.action-list {

    margin: 0;
    padding: 0;

    list-style: none;

    display: flex;
    flex-direction: column;
}

/* ==========================================================================
Action items
========================================================================== */

.promptwiz-item {

    display: flex;
    align-items: center;

    padding: .38rem .7rem;

    font-size: var(--pw-font);
    line-height: 1.2;

    color: var(--pw-text);

    cursor: pointer;
}

.promptwiz-item:hover {
    background: rgba(255,255,255,.25);
}

.promptwiz-item.selected {

    background: var(--pw-selected-bg);
    color: var(--pw-selected-text);

    font-weight: 700;
}

.promptwiz-item::before {
    content: "";
}

/* ==========================================================================
Description content
========================================================================== */

.action-descr {

    font-size: var(--pw-font);
    line-height: 1.3;

    color: var(--pw-text);
}

.action-descr h1,
.action-descr h2,
.action-descr h3 {

    margin: 0 0 .3rem 0;

    font-size: var(--pw-font);

    font-weight: 700;
}

/* ==========================================================================
Measurement helper
========================================================================== */

.pw-measure {

    position: absolute;

    visibility: hidden;

    white-space: pre;

    pointer-events: none;
}

/* ==========================================================================
Empty prompt blink
========================================================================== */

@keyframes pw-blink {

    0%   { opacity: 1; }
    50%  { opacity: .45; }
    100% { opacity: 1; }
}

.pw-prompt:empty,
.pw-prompt[value=""] {
    animation: pw-blink 1s infinite;
}