/* v001 rasa-phone.css — iPhone-optimized full-screen recording UI */

/* Hide desktop chrome on phone */
.rasa-phone .menu,
.rasa-phone .menubar { display: none !important; }
.rasa-phone.phone-show-menu .menu { display: inline-block !important; }

/* Eliminate site grid gaps and hide empty grid areas (keep mheader/mtitle for animated fade) */
.rasa-phone { grid-row-gap: 0 !important; grid-gap: 0 !important; }
.rasa-phone .maintop,
.rasa-phone .lbar,
.rasa-phone .rbar,
.rasa-phone .mfooter,
.rasa-phone #feedbox-container { display: none !important; }

/* Full-viewport screen container */
.rasa-phone-screen {
    display: flex;           flex-direction: column;
    width: 100vw;           height: 100vh;  height: 100dvh;
    box-sizing: border-box;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
}

/* === Screen 1: Prompt + Record === */
.phone-prompt-area {
    flex: 1;                display: flex;
    flex-direction: column; justify-content: center;
    align-items: center;    text-align: center;
    overflow-y: auto;       padding: 8px;
}
.phone-prompt-s { font-size: 2.4em; font-weight: bold; margin-bottom: 8px; line-height: 1.2; }
.phone-prompt-c { font-size: 1.4em; color: #555;       margin-bottom: 6px; }
.phone-prompt-d { font-size: 1.1em; color: #777;       margin-bottom: 12px; }
.phone-progress { font-size: 0.95em; color: #999;      margin-bottom: 16px; }
.phone-status   { font-size: 0.9em;  color: #28a745;   margin-top: 8px; min-height: 1.2em; }

.phone-record-btn {
    width: 120px;           height: 120px;
    border-radius: 50%;     border: 4px solid #c00;
    background: #e33;       color: #fff;
    font-size: 1.3em;       font-weight: bold;
    cursor: pointer;        margin: 20px auto;
    display: flex;          align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}
.phone-record-btn.recording {
    background: #333;       border-color: #666;
    animation: pulse-rec 1s infinite;
}
@keyframes pulse-rec {
    0%, 100% { box-shadow: 0 0 0 0 rgba(204,0,0,0.5); }
    50%      { box-shadow: 0 0 0 12px rgba(204,0,0,0); }
}

.phone-skip-btn {
    background: none;       border: 1px solid #aaa;
    color: #666;            padding: 8px 24px;
    border-radius: 20px;    font-size: 1em;
    cursor: pointer;        margin-top: 8px;
    margin-bottom: 1in;
}

.phone-load-btn {
    background: #007cba;    color: #fff;
    border: none;           padding: 14px 32px;
    border-radius: 8px;     font-size: 1.1em;
    cursor: pointer;        margin: 12px 4px;
}

/* === Screen 2: Waveform + Segment === */
.phone-waveform-wrap {
    flex: 1;                display: flex;
    flex-direction: column; justify-content: center;
    overflow: hidden;
}
.phone-waveform-wrap canvas {
    width: 100% !important; background: #111;
    border-radius: 6px;     touch-action: none;
}
.phone-seg-info {
    text-align: center;     padding: 8px;
    font-size: 0.9em;       color: #666;
}

.phone-action-bar {
    display: flex;          gap: 8px;
    padding: 8px 0;         justify-content: center;
    flex-wrap: wrap;
}
.phone-action-btn {
    flex: 1;                min-width: 80px;
    padding: 14px 8px;      border: none;
    border-radius: 8px;     font-size: 1em;
    font-weight: bold;      cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.phone-action-btn.accept  { background: #28a745; color: #fff; }
.phone-action-btn.play    { background: #007cba; color: #fff; }
.phone-action-btn.reject  { background: #dc3545; color: #fff; }
.phone-action-btn.mode    { background: #6c757d; color: #fff; }

/* === Screen 3: Actions === */
.phone-actions-list {
    flex: 1;                display: flex;
    flex-direction: column; gap: 12px;
    justify-content: center; padding: 20px 0;
}
.phone-actions-list button {
    width: 100%;            padding: 16px;
    border: 1px solid #ddd; border-radius: 8px;
    background: #f9f9f9;    font-size: 1.1em;
    cursor: pointer;        text-align: left;
}
.phone-actions-list button:active { background: #e0e0e0; }

.phone-actions-title {
    text-align: center;     font-size: 1.3em;
    font-weight: bold;      margin-bottom: 8px;
    color: #333;
}
.phone-actions-version {
    text-align: center;     font-size: 0.8em;
    color: #aaa;            margin-top: auto;
    padding: 12px 0;
}