/* ========== GLOBAL LAYOUT ========== */
        html, body {
            overflow: hidden;
            background: #e8e8ed;
        }
    
        body {
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }
    
        /* ========== APP CONTAINER (PHONE FRAME) ========== */
        #phone-frame {
            width: 420px;
            height: 100dvh;
            max-height: 900px;
            background: #f5f5f7;
            border-radius: 24px;
            box-shadow: 0 0 28px rgba(0,0,0,0.12);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
        }
    
        /* ========== HEADER ========== */
        #header {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            background: white;
            border-bottom: 1px solid #ddd;
            z-index: 50;
        }
    
        #header h1 {
            font-size: 20px;
            font-weight: 700;
            margin: 0;
        }
    
        #reset-btn {
            background: #ddd;
            border: none;
            border-radius: 6px;
            padding: 6px 12px;
            font-size: 13px;
            cursor: pointer;
            transition: background 0.15s ease;
        }
    
        #reset-btn:hover {
            background: #ccc;
        }
    
        /* ========== CHAT AREA ========== */
        #chat-container {
            flex: 1;
            overflow-y: auto;
            padding: 4px 16px 16px 16px;
            background: #f5f5f7;
            -webkit-overflow-scrolling: touch;
        }
    
        /* ========== CHAT BUBBLES ========== */
        .bubble {
            max-width: 78%;
            padding: 12px 14px;
            margin: 10px 0;
            border-radius: 18px;
            line-height: 1.45;
            font-size: 16px;
            white-space: pre-wrap;
            word-break: break-word;
            box-shadow: 0px 1px 2px rgba(0,0,0,0.06);
        }
    
        .bubble.user {
            background: #007aff;
            color: white;
            margin-left: auto;
            border-top-right-radius: 10px;
        }
    
        .bubble.bot {
            background: #e8e8ed;
            color: #000;
            margin-right: auto;
            border-top-left-radius: 10px;
        }
    
        /* Remove spacing on VERY first bubble (your original logic preserved) */
        .bubble.bot:first-child {
            margin-top: 2px !important;
            margin-bottom: 2px !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            max-width: 94% !important;
            width: 94% !important;
        }
    
        /* ========== INTRO BLOCK TIGHTENING (yours, preserved) ========== */
        .intro-bubble {
            padding: 2px 0px !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            line-height: 1.25 !important;
        }
    
        .bubble.bot .intro-bubble > *:first-child { margin-top: 0 !important; }
        .bubble.bot .intro-bubble > *:last-child { margin-bottom: 0 !important; }
    
        .intro-bubble button {
            margin-bottom: 0 !important;
        }
    
        .intro-bubble div {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }
    
        /* ========== CAP LOGO ========== */
        .cap-logo {
            display: block;
            margin: 18px auto 8px auto;
            width: 140px;
            opacity: 0.95;
        }
    
        /* ========== LINKS ========== */
        .bubble a {
            color: #0647d4;
            text-decoration: underline;
        }
    
        /* ========== TYPING INDICATOR ========== */
        #typing-indicator {
            display: flex;
            gap: 4px;
            align-items: center;
            margin: 8px 0 4px 6px;
        }
    
        #typing-indicator.hidden {
            visibility: hidden;
        }
    
        #typing-indicator .dot {
            width: 7px;
            height: 7px;
            background: #666;
            border-radius: 50%;
            opacity: 0.2;
            animation: typing-blink 1.4s infinite;
        }
    
        #typing-indicator .dot:nth-child(2) { animation-delay: 0.2s; }
        #typing-indicator .dot:nth-child(3) { animation-delay: 0.4s; }
    
        @keyframes typing-blink {
            0% { opacity: 0.2; }
            20% { opacity: 1; }
            100% { opacity: 0.2; }
        }
    
        /* ========== INPUT BAR ========== */
        #input-area {
            position: sticky;
            bottom: 0;
            display: flex;
            gap: 8px;
            padding: 12px;
            background: white;
            border-top: 1px solid #ddd;
            z-index: 50;
        }
    
        #msg {
            flex: 1;
            padding: 12px;
            border-radius: 10px;
            border: 1px solid #ccc;
            min-height: 40px;
            max-height: 140px;
            resize: none;
            overflow-y: hidden;
            font-size: 16px;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
    
        #msg:focus-visible {
            outline: none;
            border-color: #007aff;
            box-shadow: 0 0 4px rgba(0,122,255,0.4);
        }
    
        /* ========== BATTLE MODE TEXTBOX RED ========== */
        #msg.battle-mode {
            border: 2px solid #8B0000 !important;
            box-shadow: 0 0 6px rgba(139,0,0,0.6) !important;
        }
    
        #msg.battle-mode::placeholder {
            opacity: 0.5;
            color: #8B0000 !important;
        }
    
    
    #copy-btn {
	background: #ddd;
	border: none;
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.15s ease;
}

#copy-btn:hover {
	background: #ccc;
}
    
        /* ========== SEND BUTTON ========== */
        #send-btn {
            background: #007aff;
            color: white;
            padding: 12px 16px;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.15s ease, transform 0.1s ease;
        }
    
        #send-btn:hover {
            background: #0065d6;
        }
    
        #send-btn:active {
            transform: scale(0.96);
        }
    
        /* BATTLE MODE SEND BUTTON — SCOTUS Dissent Red */
        #send-btn.battle-mode {
            background: #8B0000 !important;
        }
    
        #send-btn.battle-mode:hover {
            background: #750000 !important;
        }
    
        /* ========== MOBILE TWEAKS ========== */
        @media (max-width: 480px) {
            #phone-frame { width: 100%; border-radius: 0; }
            #header h1 { font-size: 18px; }
            #msg, #send-btn { font-size: 17px; }
        }