/*
 * ThisBarkingLife — Styles
 * TBL default persona — layout, components, UI, utilities
 *
 * styleguide.css = tokens + personas + brand + admin
 * Load order: styleguide.css → styles.css
 * See: _instructions/ui-patterns.md
 */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 1 — BASE
   Box model reset, body. Font faces live in styleguide.css.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: monospace, sans-serif;  /* TBL default body font. See: _instructions/personas.md */
    background-color: #e1c79d59;
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    overflow-y: auto;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 2 — TYPOGRAPHY
   Text classes. TBL persona = default body font.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.text-hdg {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4rem;
}

.text-std {
    font-size: 16px;
    line-height: 1.4rem;
    margin: 10px 0;
}

.text-std2 {
    font-size: 12px;
    line-height: 16px;
    margin: 10px 0;
    width: 100%;
}




/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 3 — LAYOUT
   Page shell: container, header, logo, icons
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.container {
    margin: 0 auto;
    padding: 5px;
    padding-bottom: 20px;
    overflow-y: visible;
    height: auto;
    width: 100%;
}

.container-lower {
    padding-top: 5px;
    width: 100%;
    display: inline-block;
    border-top: 1px solid lightgray;
}

.container-resume {
    border-top: solid 1px grey;
    border-bottom: solid 1px grey;
    padding: 0.5rem;
}

.header {
    text-align: center;
    display: inline-block;
    width: 100%;
}

.logo {
    height: 60px;
    float: left;
}

.icon-poo, .icon-share {
    width: 50px;
    height: 50px;
    float: right;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.15));
    transition: transform 0.2s;
    padding: 5px;
    cursor: pointer;
}

.icon-menu {
    width: 30px;
    height: 30px;
    float: right;
    margin: 18px 10px 10px 10px;
}

.icon-tiny {
    width: 20px;
    height: 20px;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.15));
    margin: 3px;
}

.icon-share {
    padding: 0;
}

.icon-share3 {
    height: 25px;
    width: 25px !important;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.15));
    margin: 0 5px 0 0;
    position: absolute;
    bottom: 6px;
    right: -23px;
}

.icon-nav-hex {
    width: 14px;
    height: 15px;
    vertical-align: -2px;
    margin-right: 3px;
}
.icon-nav-cloud {
    width: 20px;
    height: 15px;
    vertical-align: -2px;
    margin-right: -3;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 4 — NAVIGATION
   Nav menu, panel, items
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.nav-menu-name {
    margin-top: 26px;
    font-weight: bold;
    float: right;
}

.nav-menu {
    float: right;
    position: relative;
}

.nav-panel {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: max-content;
    background: #f8f9fa;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    padding: 0 10px;
    overflow-y: auto;
    z-index: 1000;
    animation: slideIn 0.1s ease-out;
    text-align: left;
    border-radius: 5px;
    min-width: 150%;
}

.nav-panel a {
    display: block;
    padding: 10px;
    color: #333;
    text-decoration: none;
    border-bottom: solid 0.5px lightgrey;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 5 — UI INPUTS
   Standard input system. See: _instructions/userinput-standard.md
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── Base inputs ────────────────────────────────────────── */

input, textarea {
    font-family: monospace, sans-serif;
    font-size: 1.0rem;
    padding: 5px;
    margin: 2px 0;
    border: 1px solid #999;
    border-radius: 15px;
    width: 100%;
    position: relative;
    background-color: var(--color-bisque);
}

textarea {
    min-height: 100px;
}

input:focus, textarea:focus {
    outline: none;
    background: var(--color-green)66;
}

.text-input {
    width: 15rem;
    font-size: 1.0rem;
    padding: 1rem;
    border-radius: 10px;
    border: 5px solid var(--color-green);
    background-color: bisque;
}

h1 input {
    font-size: inherit;
    font-weight: inherit;
    border: none;
    background: transparent;
    width: calc(100% - 2.5rem) !important;
    float: right;
    padding: 5px;
}

input.entity-name {
    font-weight: bold;
    width: 90%;
}

input.entity-type, input.entity-rel {
    width: 50%;
    float: right;
    display: block;
}

input.entity-fam, input.entity-sen {
    width: 2rem;
    display: inline-block;
}

.save-msg, .refresh-msg {
    position: absolute;
    right: 0;
    font-size: 0.8rem;
    color: #555;
    background-color: #88888870;
    padding: 5px;
    border-radius: 5px;
}

/* ─── Buttons ────────────────────────────────────────────── */

button {
    all: unset;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: relative;
    border-radius: 999vw;
    background-color: rgba(0, 0, 0, 0.75);
    box-shadow: -0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25),
        0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1);
}

button::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: calc(100% + 0.3em);
    height: calc(100% + 0.3em);
    top: -0.15em;
    left: -0.15em;
    border-radius: inherit;
    background: linear-gradient(-135deg,
            rgba(5, 5, 5, 0.5),
            transparent 20%,
            transparent 100%);
    filter: blur(0.0125em);
    opacity: 0.25;
    mix-blend-mode: multiply;
}

.share-btn {
    background-color: unset;
    box-shadow: none;
    margin: 7px 12px;
}

/* ─── ui_ component system ───────────────────────────────── */
/* Legacy toggle classes removed — all converted to ui_option / ui_selected / ui_tab */

.ui_select {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    float: right;
}

.ui_select_tab {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    float: left;
    margin-bottom: -15px;
    padding-left: 2rem;
    z-index: 0;
    position: relative;
}

.ui_option {
    margin: calc(4px + 0.5rem);
    padding: 0.5rem;
    text-align: center;
    background-color: var(--color-bisque);
    border: 1px solid darkgray;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 100;
    width: fit-content;
    float: left;
}

.ui_option.ui_selected {
    background-color: var(--color-green);
    color: white;
    font-weight: bold;
}

.ui_option.ui_tab {
    margin: calc(4px + 0.25rem);
    border-radius: 10px 10px 0 0;
}

.ui_button {
    background-color: var(--color-green);
    color: white;
    padding: 0.5rem 1rem;
    margin: 0.5rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    float: right;
    width: fit-content;
    text-decoration: none;
}

.ui_button_subscribe {
    background-color: #635BFF;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    text-align: center;
    margin: 0.5rem auto;
    line-height: 1.5rem;
}

.ui_yourdog{
    font-weight: 600;
    text-shadow: 1px 1px 3px #635bff8c;
    white-space: nowrap;
}

.ui_button_subscribe .poweredby {
    font-size: 11px;
    margin-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    padding-left: 8px;
    display: flex;
    align-items: center;
    text-align: right;
    line-height: 0.8rem;
}

.poweredby img {
    height: 26px;
    margin-left: 4px;
    filter: brightness(0) invert(1);
}

.ui_button_play {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid grey;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.4);
    color: white;
    font-size: 36px;
    line-height: 1;
    margin-left: 3px;
}

.ui_button_cancel {
    background: none;
    border: none;
    box-shadow: none;
    font-size: 2rem;
    line-height: 2rem;
    color: darkslategrey;
    text-shadow: 2px 2px 2px lightgrey;
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 0.5rem;
}

.ui_button_cancel_text {
    font-size: 0.8rem;
    padding-right: 10px;
    float: left;
}

.ui_modal {
    color: black;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: calc(100% - 2rem);
    height: fit-content;
    padding: 2rem;
    margin: 1rem;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: none;
}

.ui_modal_combo {
    width: 100%;
    border-bottom: 1px solid grey;
    margin: 1rem 0;
    float: left;
}

.ui_modal_combo_text {
    padding: 1.5rem 0 0 1rem;
    float: left;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

/* ─── Age input ──────────────────────────────────────────── */

.age-input-container {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    width: 50%;
    float: right;
}

.age-input-container select {
    width: auto;
    min-width: 65px;
    font-size: 16px; /* prevents iOS zoom on focus */
}

/* ─── State classes ──────────────────────────────────────── */

.activated {
    background-color: lightgreen;
}

.missing {
    background-color: lightpink !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 6 — COMPONENTS
   All reusable UI components
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── subscribe styles ────────────────────────────── */

.subscribe-guts{
    padding: 1.5rem;
    background-color: #d5d3f5;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
    transition: transform 0.2s;
    position: relative;
    margin-bottom: 1rem;
    overflow: hidden; /* forces scene-link to expand to hold child div */
}

/* ─── Scene card ─────────────────────────────────────────── */

.scene-container {
    width: 100%;
    padding: 10px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    position: relative;
    margin-bottom: 1rem;
    overflow: hidden; /* forces scene-link to expand to hold child div */
}

.scene-container ul {
    list-style-type: disc;
    padding-left: 0px;
}

.scene-container li {
    list-style: disc;
    margin-left: 20px;
    padding-left: 10px;
}

.scene-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color:var(--color-text);
    z-index: 1;
}

.scene-image {
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 10px;
    display: block;
    cursor: pointer;
}

/* ─── Scene view ─────────────────────────────────────────── */

.scene-description-container,
.scene-thoughts-container {
    padding: 0 15px;
    border-radius: 5px;
    margin: 10px 0;
    float: left;
    width: 100%;
}

.scene-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    float: left;
    width: 100%;
    margin: var(--space-2) 0 var(--space-1);
}

.scene-controls {
    float: left;
    width: 100%;
    border-top: 1px solid rgba(44, 26, 14, 0.15);
    padding-top: var(--space-3);
    margin-top: var(--space-2);
}

#sceneName {
    width: 100%;
}

/* ─── Image + thought bubbles ────────────────────────────── */

.image-thoughts-container {
    position: relative;
    width: 100%;
    margin: 0 0;
    float: left;
}

.image-title {
    padding: 5px;
    text-shadow: 2px 2px 8px grey;
    margin: 0;
    font-family: 'AmericanTypeWriter', 'American Typewriter', 'Courier New', monospace;
    font-size: 1.8em;
    line-height: 1.8rem;
    z-index: 10;
    text-align: center;
}

.thought-bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 12px 18px;
    max-width: 280px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(0);
    left: 20px;
    z-index: 100;
    color: #312313;
    font-size: 1.4rem;
    line-height: 1.9rem;
    margin: 12px 0;
    font-family: 'Comic Sans MS', ComicSansMS, 'Chalkboard SE', sans-serif;
}

.thought-bubble::before {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 20px;
    width: 15px;
    height: 15px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.thought-bubble::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 15px;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: 'Comic Sans MS', ComicSansMS, 'Chalkboard SE', sans-serif;
    font-size: 1.4rem;
    line-height: 1.6rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.audio-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

/* ─── Story view ─────────────────────────────────────────── */

.story-image-container {
    position: relative;
    top: 0;
    width: calc(100% + 1rem);
    margin-left: -0.5rem;
    overflow: hidden;
}
.story-image {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
}

/* ─── Profile ────────────────────────────────────────────── */

.profile-image {
    float: left;
    width: 50%;
    padding-right: 10px;
    border-radius: 8px;
    position: relative;
    display:flex;
}

.profile-image2 {
    float: left;
    margin: -10px -10px 15px -10px;
    width: calc(100% + 20px);
    border-radius: 8px;
    position: relative;
}

.profile-image3 {
    margin: 0;
    width: 100%;
    border-radius: 8px;
    position: relative;
}

.profile-image img, .profile-image2 img {
    width: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 8px;
    margin: 0;
}

.profile-image2 img {
    height: unset;
}

#dogProfile_Selfintro {
    position: relative;
}

.profile-narrative.expanded {
    max-height: none;
}

.profile-basic-container {
    width: 100%;
    float: left;
    margin-bottom: 1.0rem;
}

/* ─── Progress ───────────────────────────────────────────── */

.progress-container {
    width: calc(100% - 10px);
    display: none;
    position: absolute;
    z-index: 1000;
    top: 1rem;
    left:5px;
}

.progress-message {
    margin: 5px 0;
    font-family: monospace;
    color: black;
    transition: transform 0.2s;
    white-space: nowrap;
    width: 30%;
    display: block;
    float: left;
    text-align: right;
    padding-right: 0.5rem;
}

.askprog-container {
    margin: 2rem 0;
    position: absolute;
    width: calc(100% - 10px);
    top: 3.5rem;
}

/* ─── Thumbnails ─────────────────────────────────────────── */
.whois-container {
    margin: -15px 0px;
    float: right;
    width: 100%;
}

.thumb-container {
    float: right;
    width: 60px;
    padding: 0;
    margin: 5px 5px 5px 5px;
    position: relative;
    transition: opacity 200ms ease, transform 400ms cubic-bezier(.2, 1.2, .2, 1);
}

.thumb-container-2{
    position: relative;
}

.thumb-bounce {
    animation: thumb-bounce-frames 1500ms cubic-bezier(.2, .8, .2, 1);
}

@keyframes thumb-bounce-frames {
    0%   { transform: scale(0.42); }
    15%  { transform: scale(0.82); }
    30%  { transform: scale(1.06); }
    50%  { transform: scale(0.94); }
    70%  { transform: scale(1.06); }
    90%  { transform: scale(0.98); }
    100% { transform: scale(1); }
}

.thumb-imgentity {
    width: 100%;
    max-width: 100px;
    border-radius: 50%;
    margin-bottom: -0.5rem;
    border: 1px solid white;
}

.thumb-editbtn {
    position: absolute;
    bottom: -3px;
    right: -3px;
    background: var(--color-green);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
}

.thumb-imgloc {
    width: 100%;
    max-width: 100px;
    border-radius: 15%;
    margin-bottom: -0.5rem !important;
    border: 1px solid darkgray;
}

.thumb-imgscene {
    width: 60px;
    margin-left: 5px;
    border-radius: 10%;
    float: right;
    border: 1px solid darkgray;
}

.thumb-text {
    font-size: 0.8rem;
    text-align: center;
    border: none;
    margin: 0;
    white-space: normal;
    line-height: 0.8rem;
}

/* ─── Navigation cards ───────────────────────────────────── */

.navcard-leftcontainer {
    float: left;
    width: 100px;
    height: 60px;
    margin-right: 12px;
    position: relative;
}

.navcard-emptyscene {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    border: 2px dashed #ccc;
    float: left;
    margin-right: 10px;
    font-weight: bold;
    font-size: 3rem;
    text-align: center;
    line-height: 3.5rem;
    color: var(--color-green);
    text-shadow: 2px 2px 4px darkgrey;
}

/* ─── Upload + create flow ───────────────────────────────── */

.upload-box {
    border: 2px dashed #ccc;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    right: 10px;
    width: calc(50% - 10px);
    margin-right: 10px;
    float: left;
    cursor: pointer;
}

#description {
    width: 50%;
}

#previewImageContainer {
    display: none;
}

#sceneDatetime, #sceneLocation, #sceneLat, #sceneLon {
    width: 48%;
    margin-bottom: 10px;
    display: none;
}

#sceneDescription, #sceneName {
    display: none;
}

.preview-image {
    max-width: 100%;
    max-height: 300px;
    margin: 10px 0;
}

.preview-canvas, .preview-canvas-overlay {
    pointer-events: none;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.preview-canvas-overlay {
    position: absolute;
    top: 0;
    left: 0;
}

#imageStatus, #processingStatus {
    font-size: 0.9rem;
}

#dogSelect {
    font-size: 1.2em;
    width: fit-content;
    position: absolute;
    margin: 0;
    bottom: 0;
    right: 0;
}

/* ─── Entities + knowledge graph ─────────────────────────── */

#entitiesContainer, #locationContainer {
    float: left;
    width: 100%;
}

#entityCircleContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    justify-content: flex-start;
    z-index: 100;
    margin-bottom: 10px;
}


/* ─── Voice / ElevenLabs ─────────────────────────────────── */

.voice-div {
    margin-bottom: 10px;
    float: left;
    width: 100%;
    padding: 10px;
    text-align: left;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

/* ─── Share ──────────────────────────────────────────────── */

.share-modal {
    display: none;
    float: left;
    text-align: right;
    transition: all 0.5s ease;
    background-color: #f5f5f5;
    border: solid 1px #333;
    border-radius: 5px;
    width: 100%;
}

.share-text {
    float: right;
    line-height: 1rem;
    text-align: right;
    margin-top: 18px;
    margin-right: 10px;
}

#instagramSharePopup {
    margin-top: 5px;
    padding: 15px;
    text-align: left;
}

#instagramSharePopup button {
    width: unset;
}

.insta-step {
    width: 100%;
    padding: 0.5rem 0;
    float: left;
    text-align: left;
    border-bottom: 1.5px solid darkgray;
}

/* ─── Saleslead (admin CRM view) ─────────────────────────── */

.saleslead-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5px;
    padding: 0;
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.saleslead {
    font-family: monospace, sans-serif;
    font-size: 1.0rem;
    width: 200px;
    flex: 0 0 200px;
    padding: 3px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow-y: scroll;
}

.saleslead-step {
    width: calc(100% - 6px);
    margin: 3px;
    float: left;
    overflow: hidden;
    border-radius: 5px;
    background-color: #e7e7e7;
    white-space: normal;
    line-height: 1rem;
}

.saleslead-step:first-child {
    position: sticky;
    top: 0;
    z-index: 2;
}

.saleslead p, .saleslead select, .saleslead input, .saleslead textarea {
    border-radius: 5px;
    padding: 5px;
    margin: 0;
    width: 100%;
    font-family: monospace, sans-serif;
    font-size: 1.0rem;
    background-color: unset;
    display: block;
}

p.saleslead-label {
    font-size: 0.8rem;
    padding: 0 0 0 3px;
    margin: 0;
    color: #888;
}

/* ─── Setup / onboarding ─────────────────────────────────── */

.setup-msg, .setup-msg2 {
    font-size: 1.3rem;
    line-height: 1.5rem;
}

.setup-msg2 {
    padding: 1rem 0;
    border-bottom: solid 1.5px darkgray;
}

/* ─── Transactions ───────────────────────────────────────── */

.transaction-row {
    width: 100%;
    display: flex;
    font-size: 0.9rem;
    padding: 0.2rem 0;
}

.transaction-row .date-time {
    width: 15%;
    line-height: 0.95rem;
}

.transaction-row .desc {
    width: 37%;
    line-height: 0.95rem;
}

.transaction-row .value {
    width: 12%;
    text-align: right;
}

.transaction-row:nth-child(odd) {
    background-color: #f8f9fa;
}

/* ─── T&Cs ───────────────────────────────────────────────── */

.tandcbutton {
    float: left;
}

.tandcpopup {
    float: left;
}

.tandcpopup ul {
    padding: revert;
}

.tandcpopup li {
    font-size: 1.0em;
    line-height: 1.1em;
    margin: 0.5rem 0;
}

/* ─── Messaging ──────────────────────────────────────────── */

.msg-div {
    float: left;
    width: 100%;
    backdrop-filter: blur(5px);
    background-color: rgb(211 211 211 / 30%);
    padding: 0.5rem;
    margin-bottom: 3px;
    border-radius: 10px;
}

/* ─── Paw / decorative ───────────────────────────────────── */


.paw-span {
    float: right;
    width: 70%;
    margin-bottom: -0.5rem;
}

.paw-rotated {
    display: inline-block;
    transform: rotate(90deg);
}

.bone {
    font-size: 2.0rem;
    float: right;
    margin-top: -0.8rem;
}

/* ─── Word group (knowledge graph visual) ────────────────── */

.word-group {
    display: flex;
    justify-content: space-between;
    line-height: 1.0rem;
    width: calc(100% + 1.0rem);
    box-shadow: 0 0px 20px rgba(0, 0, 0, 0.1);
}

/* ─── Delete button ──────────────────────────────────────── */

.deleteScene-button2 {
    border: none;
    background: none;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
    z-index: 2;
    box-shadow: none;
    float: right;
}

/* ─── iOS / PWA install ──────────────────────────────────── */

.add-to-homescreen {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.5);
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 95%;
    height: 95%;
    z-index: 9999;
    animation: slideUp 0.3s ease-out;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.add-to-homescreen-logo {
    height: 70px;
    float: left;
    background: white;
    border-radius: 10px;
    padding: 3px;
    box-shadow: 2px 2px 10px rgba(255, 255, 255);
    border: 0.5px solid darkgray;
    margin-bottom: 1.0rem;
}

/* ─── control footer ────────────────────── */
.controls-container{
    width: 100%;
    border-top: 1px solid var(--color-text);
    padding: 5px;
    margin-top: 10px;
    display: inline-block;
}

.control-item{
    width: fit-content;
    padding: 5px 10px;
    /*border-right: 1px solid var(--color-text);*/
    float: right;
}
.control-text{
    font-size: var(--text-sm);
    padding-right: 5px;
    line-height: 2.5;
}
.control-icon{
    width: 35px;
    height: 35px;
    float: right;
}
.control-emoji{
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    float: right;
}

/* ─── Animations ─────────────────────────────────────────── */

@keyframes slideUp {
    from {
        transform: translate(-50%, 100%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@keyframes pulse2 {
    0%   { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #FF9800; }
    50%  { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #2196F3; }
    100% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #FF9800; }
}

@keyframes double-pulse {
    0%   { transform: scale(1); }
    20%  { transform: scale(1.15); }
    30%  { transform: scale(1); }
    40%  { transform: scale(1.1); }
    50%  { transform: scale(1); }
    100% { transform: scale(1); }
}

.pulse-heartbeat {
    animation: double-pulse 1s infinite;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 7 — UTILITIES
   Single-purpose helpers and state classes
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hidden {
    display: none;
}

.visible {
    display: block;
}

.error {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
}

.success {
    color: #28a745;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
}


.float-left {
    float: left;
}
.float-right {
    float: right;
}

.text-align-right {
    text-align: right;
}
.margin-zero{
    margin: 0;
}
.border-bottom{
    border-bottom: solid 1px grey;
}
.border-top{
    border-top: solid 1px grey;
}

.text-neon-green{
    text-shadow: 1px 0px 5px #00ff0a, 1px 0px 10px #00ff0a, 1px 0px 15px #00ff0a, 1px 0px 20px #00ff0a;}
.text-neon-pink{
    text-shadow: 1px 0px 5px #fa7af8, 1px 0px 10px #fa7af8, 1px 0px 15px #fa7af8, 1px 0px 20px #fa7af8;}
.text-neon-yell{
    text-shadow: 1px 0px 5px #f8f800, 1px 0px 10px #f8f800, 1px 0px 15px #f8f800, 1px 0px 20px #f8f800;}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 8 — RESPONSIVE
   Desktop overrides. Mobile-first base above.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (min-width: 769px) {

    .scene-container, .item-container {
        width: 49%;
    }

    .container {
        padding-bottom: 80px;
        overflow-y: visible;
        height: auto;
    }

    .header {
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .logo {
        height: 60px;
        margin-right: 15px;
        margin-bottom: 0;
    }

    .scene-image {
        max-height: 500px;
        object-fit: contain;
    }

    .thought-bubble {
        max-width: 300px;
        font-size: 14px;
        left: 20px;
    }

    .image-title {
        font-size: 1.4em;
        padding: 10px;
    }

}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 9 — PRINT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media print {

    body {
        background-color: white;
        color: black;
    }

    .noprint {
        display: none !important;
    }

    .container-resume {
        border: none;
        padding: 0;
    }

}