/* iOS 2-3 era styling */
html {
    background-color: #000;  /* Black background for bottom safe area */
    overflow: hidden;  /* Prevent scrolling on html - content scrolls instead */
    height: 100%;
    min-height: calc(100% + env(safe-area-inset-top));
}

body {
    font-family: Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #000;
    overflow: hidden;  /* Prevent scrolling on body - content scrolls instead */
    height: 100%;
    max-width: 100%;
}

.app-shell {
    background-image: repeating-linear-gradient(90deg, 
        rgba(159, 167, 176, 0.3) 1px, 
        rgba(182, 192, 203, 0.3) 2px, 
        rgba(201, 208, 216, 0.3) 3px,
        rgba(182, 192, 203, 0.3) 4px);
    background-color: #c5ccd4;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Portrait phones - normal full-width behavior */
@media screen and (max-aspect-ratio: 3/4) and (orientation: portrait) {
    .app-shell {
        border-radius: 0;
        border: none;
        box-shadow: none;
    }
    
    .app-screen {
        position: relative;
        border-radius: 0;
        overflow: visible;
    }
    
    .app-shell::before,
    .app-shell::after {
        display: none;
    }
}

.status-bar {
    background: -webkit-gradient(linear, left top, left bottom, from(#8a98a9), to(#647184));
    background: linear-gradient(to bottom, #8a98a9, #647184);
    height: 20px;
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
    align-items: center;
    color: white;
    font-size: 12px;
    border-bottom: 1px solid #45505a;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
}

.status-bar .signal,
.status-bar .battery {
    flex: 1;
    min-width: 0;
}

.status-bar .battery {
    text-align: right;
}

.status-bar .time {
    flex: 0 0 auto;
    text-align: center;
}

.signal {
    display: flex;
    align-items: center;
}

.signal-bars {
    display: inline-block;
    margin-right: 5px;
}

.header {
    /* iOS 4 era glossy blue toolbar gradient */
    background: -webkit-gradient(linear, left top, left bottom, 
        color-stop(0%, #b0bfcf),
        color-stop(2%, #8ea2ba),
        color-stop(50%, #5d7fa5),
        color-stop(51%, #4a6d94),
        color-stop(100%, #3a5d84));
    background: linear-gradient(to bottom, 
        #b0bfcf 0%,
        #8ea2ba 2%,
        #5d7fa5 50%,
        #4a6d94 51%,
        #3a5d84 100%);
    color: white;
    padding: 10px;
    height: 42px;
    box-sizing: border-box;
    text-align: center;
    border-bottom: 1px solid #2a3d55;
    position: fixed;
    top: 20px;
    left: 0;
    right: 0;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 
        0 1px 0 rgba(255,255,255,0.25) inset,
        0 2px 4px rgba(0,0,0,0.3);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header h1 {
    margin: 0;
    font-size: 20px;
    font-weight: normal;
    line-height: 1.2;
}

/* CJK (Salihionic) font adjustments - smaller to fit header */
.lang-sh .header h1 {
    font-size: 18px;
}

.lang-sh .back-button,
.lang-sh .add-button {
    font-size: 11px;
}

.back-button {
    position: absolute;
    left: 10px;
    top: 10px;
    color: white;
    text-decoration: none;
    /* iOS 4 glossy toolbar button */
    background: -webkit-gradient(linear, left top, left bottom, 
        color-stop(0%, #8ea6c8),
        color-stop(2%, #7a94b8),
        color-stop(50%, #5a7aa0),
        color-stop(51%, #4a6a90),
        color-stop(100%, #3c5c82));
    background: linear-gradient(to bottom, 
        #8ea6c8 0%,
        #7a94b8 2%,
        #5a7aa0 50%,
        #4a6a90 51%,
        #3c5c82 100%);
    border: 1px solid #2a4a6a;
    border-radius: 5px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 
        0px 1px 0px rgba(255, 255, 255, 0.25) inset,
        0px -1px 0px rgba(0, 0, 0, 0.15) inset,
        0px 1px 3px rgba(0, 0, 0, 0.3);
}

.header-buttons {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.add-button {
    color: white;
    font-size: 20px;
    text-decoration: none;
    /* iOS 4 glossy toolbar button */
    background: -webkit-gradient(linear, left top, left bottom, 
        color-stop(0%, #8ea6c8),
        color-stop(2%, #7a94b8),
        color-stop(50%, #5a7aa0),
        color-stop(51%, #4a6a90),
        color-stop(100%, #3c5c82));
    background: linear-gradient(to bottom, 
        #8ea6c8 0%,
        #7a94b8 2%,
        #5a7aa0 50%,
        #4a6a90 51%,
        #3c5c82 100%);
    border: 1px solid #2a4a6a;
    border-radius: 5px;
    padding: 0px 10px;
    line-height: 1.2;
    font-weight: bold;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 
        0px 1px 0px rgba(255, 255, 255, 0.25) inset,
        0px -1px 0px rgba(0, 0, 0, 0.15) inset,
        0px 1px 3px rgba(0, 0, 0, 0.3);
}

.content {
    background: #fff;
    border-top: 1px solid #fff;
    box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1) inset;
    /* Use fixed positioning to fill space between header and tab bar */
    position: fixed;
    top: 62px;  /* Below status bar (20px) + header (42px) */
    left: 0;
    right: 0;

    bottom: calc(49px + env(safe-area-inset-bottom, 0px));  /* Above tab bar */
    overflow-x: hidden;
    overflow-y: auto;  /* Content scrolls here */
    -webkit-overflow-scrolling: touch;  /* Smooth scrolling on iOS */
    box-sizing: border-box;
    /* Prevent child margins from creating extra scroll space */
    padding-bottom: 0;
}

/* iPad scale button - hidden (feature removed) */
.ipad-scale-button {
    display: none !important;
}

.list-item {
    padding: 12px 10px;
    border-bottom: 1px solid #c8c8c8;
    position: relative;
    /* Classic iOS list gradient */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f0f0f0));
    background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%);
}

/* Highlight line at top of cell */
.list-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: rgba(255,255,255,0.8);
}

.list-item-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #8e8e93;
    font-size: 24px;
}

/* Disclosure arrow - iOS 4 style */
.list-item::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'%3E%3Cpath d='M1 1l6 6-6 6' stroke='%23888' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.button {
    /* iOS 4 glossy blue button */
    background: -webkit-gradient(linear, left top, left bottom, 
        color-stop(0%, #6d9fd8),
        color-stop(2%, #5a8dc8),
        color-stop(50%, #4a7ab8),
        color-stop(51%, #3a6aa8),
        color-stop(100%, #2c5595));
    background: linear-gradient(to bottom, 
        #6d9fd8 0%,
        #5a8dc8 2%,
        #4a7ab8 50%,
        #3a6aa8 51%,
        #2c5595 100%);
    border: 1px solid #25467c;
    border-radius: 8px;
    color: white;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: bold;
    margin: 5px;
    cursor: pointer;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 
        0px 1px 0px rgba(255, 255, 255, 0.3) inset,
        0px -1px 0px rgba(0, 0, 0, 0.2) inset,
        0px 2px 4px rgba(0, 0, 0, 0.3);
}

.button:active {
    background: linear-gradient(to bottom, 
        #4a7ab8 0%,
        #3a6aa8 50%,
        #2c5595 51%,
        #1e4585 100%);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4) inset;
}

.form-group {
    margin: 15px;
}

.form-control {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #8090a0;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    /* iOS 4 inset input field */
    box-shadow: 
        0 1px 3px rgba(0,0,0,0.2) inset,
        0 1px 0 rgba(255,255,255,0.5);
    background: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#ffffff));
    background: linear-gradient(to bottom, #e8e8e8, #ffffff);
}

.tab-bar {
    display: flex;
    /* iOS 4 glossy black tab bar */
    background: -webkit-gradient(linear, left top, left bottom, 
        color-stop(0%, #434343),
        color-stop(2%, #363636),
        color-stop(50%, #1d1d1d),
        color-stop(51%, #0f0f0f),
        color-stop(100%, #000000));
    background: linear-gradient(to bottom, 
        #434343 0%,
        #363636 2%,
        #1d1d1d 50%,
        #0f0f0f 51%,
        #000000 100%);
    border-top: 1px solid #555;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 49px;
    padding-bottom: env(safe-area-inset-bottom);
    /* Glossy shine */
    box-shadow: 
        0 -1px 0 rgba(255,255,255,0.1) inset,
        0 1px 0 rgba(0,0,0,0.5) inset;
    z-index: 1000;
    /* Horizontal scroll without visible scrollbar */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.tab-bar::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

.tab {
    flex: 0 0 25%; /* Fixed width: 4 tabs visible at once */
    min-width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #8a8a8a;
    text-decoration: none;
    font-size: 10px;
    font-weight: bold;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.8);
    height: 49px;
    position: relative;
}

.tab-icon {
    font-size: 24px;
    margin-bottom: 2px;
    position: relative;
}

/* Active tab - Blue glow effect */
.active-tab {
    color: #7ab8f5;
    /* Blue glow behind icon */
    text-shadow: 
        0 0 10px rgba(90, 170, 255, 0.8),
        0 0 20px rgba(90, 170, 255, 0.5),
        0 -1px 0 rgba(0,0,0,0.5);
}

.active-tab::before {
    content: '';
    position: absolute;
    top: 2px;
    width: 40px;
    height: 40px;
    background: radial-gradient(ellipse at center, 
        rgba(90, 170, 255, 0.3) 0%,
        transparent 70%);
    pointer-events: none;
}

.error {
    color: #8b0000;
    padding: 12px;
    text-align: center;
    /* iOS 4 glossy error banner */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffcccc), to(#ffaaaa));
    background: linear-gradient(to bottom, #ffcccc 0%, #ffaaaa 100%);
    border: 1px solid #cc6666;
    border-radius: 8px;
    margin: 10px;
    box-shadow: 
        0px 2px 4px rgba(0, 0, 0, 0.2),
        0px 1px 0px rgba(255, 255, 255, 0.5) inset;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    font-weight: bold;
}

.tweet {
    padding: 15px;
    border-bottom: 1px solid #c8c8c8;
    /* Classic iOS list gradient */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f0f0f0));
    background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%);
    position: relative;
}

/* Highlight line at top of cell */
.tweet::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: rgba(255,255,255,0.8);
}

.tweet:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.7);
}

.tweet-header {
    display: flex;
    margin-bottom: 5px;
    align-items: center;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    margin-right: 10px;
    border: 1px solid #888;
    box-shadow: 
        0 2px 4px rgba(0,0,0,0.3),
        0 1px 0 rgba(255,255,255,0.5) inset;
    background: #eee;
    overflow: hidden;
    position: relative;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Glossy reflection on avatar */
.avatar::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(to bottom, 
        rgba(255,255,255,0.25) 0%,
        rgba(255,255,255,0.1) 50%,
        transparent 100%);
    pointer-events: none;
    border-radius: 5px 5px 0 0;
}

.tweet-user-info {
    display: flex;
    flex-direction: column;
}

.tweet-username {
    font-weight: bold;
    margin-right: 5px;
    color: #000;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.tweet-handle {
    color: #666;
    font-size: 12px;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.tweet-time {
    color: #666;
    font-size: 12px;
    margin-left: auto;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.tweet-content,
a.tweet-content,
.tweet-content-wrapper .tweet-content,
.tweet .tweet-content,
.tweet a.tweet-content {
    margin-bottom: 10px;
    margin-left: 50px;
    line-height: 1.4;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
    white-space: pre-wrap !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.tweet-actions {
    display: flex;
    margin-left: 50px;
    font-size: 12px;
}

.tweet-action {
    display: flex;
    align-items: center;
    margin-right: 20px;
    color: #666;
    text-decoration: none;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.tweet-action:active {
    opacity: 0.7;
}

.tweet-action.liked {
    color: #ff2d55;
}

.tweet-action.retweeted {
    color: #4cd964;
}

.tweet-action-count {
    margin-left: 5px;
}

.retweet-banner {
    margin-bottom: 10px;
    font-size: 12px;
    color: #8e8e93;
    display: flex;
    align-items: center;
    padding-left: 50px;
}

.retweet-icon {
    margin-right: 5px;
    color: #4cd964;
}

.profile-header {
    padding: 15px;
    border-bottom: 1px solid #c8c8c8;
    /* Classic iOS list gradient */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f0f0f0));
    background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%);
    display: flex;
    align-items: center;
    position: relative;
}

/* Highlight line at top */
.profile-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: rgba(255,255,255,0.8);
}

.profile-avatar {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    margin-right: 15px;
    border: 1px solid #888;
    box-shadow: 
        0 3px 6px rgba(0,0,0,0.3),
        0 1px 0 rgba(255,255,255,0.5) inset;
    background: #eee;
    overflow: hidden;
    position: relative;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Glossy reflection on profile avatar */
.profile-avatar::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(to bottom, 
        rgba(255,255,255,0.3) 0%,
        rgba(255,255,255,0.1) 50%,
        transparent 100%);
    pointer-events: none;
    border-radius: 9px 9px 0 0;
}

.profile-info {
    flex: 1;
}

.profile-name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #000;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.profile-handle {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.profile-bio {
    font-size: 14px;
    margin-bottom: 10px;
    line-height: 1.3;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.profile-stats {
    display: flex;
    font-size: 12px;
    color: #666;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.profile-stat {
    margin-right: 10px;
}

.profile-stat-count {
    font-weight: bold;
    color: #2c5595;
}

.profile-edit-button {
    /* iOS 4 glossy blue button */
    background: -webkit-gradient(linear, left top, left bottom, 
        color-stop(0%, #6d9fd8),
        color-stop(2%, #5a8dc8),
        color-stop(50%, #4a7ab8),
        color-stop(51%, #3a6aa8),
        color-stop(100%, #2c5595));
    background: linear-gradient(to bottom, 
        #6d9fd8 0%,
        #5a8dc8 2%,
        #4a7ab8 50%,
        #3a6aa8 51%,
        #2c5595 100%);
    border: 1px solid #25467c;
    border-radius: 6px;
    color: white;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: bold;
    margin-left: auto;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 
        0px 1px 0px rgba(255, 255, 255, 0.3) inset,
        0px -1px 0px rgba(0, 0, 0, 0.2) inset,
        0px 2px 4px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

/* iOS 4 style segmented control buttons */
.segment-button {
    border: none;
    margin: 0;
    padding: 8px 0;
    font-size: 13px;
    font-weight: bold;
    color: #4a5568;
    /* iOS 4 grouped table header gradient */
    background: -webkit-gradient(linear, left top, left bottom, from(#d8dce0), to(#b8c0c8));
    background: linear-gradient(to bottom, #d8dce0, #b8c0c8);
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    box-shadow: 
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 -1px 0 rgba(0,0,0,0.1) inset;
}

.segment-button:first-child {
    border-right: 1px solid #90a0b0;
}

.segment-button:focus {
    outline: none;
}

.segment-button.active {
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e8eaec));
    background: linear-gradient(to bottom, #ffffff, #e8eaec);
    color: #2c5595;
    box-shadow: 
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 -1px 2px rgba(0,0,0,0.1) inset;
}

.status-select {
    padding: 12px 10px;
    border-bottom: 1px solid #c8c8c8;
    /* Classic iOS list gradient */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f0f0f0));
    background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%);
    font-size: 17px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    position: relative;
    border: none;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

/* Highlight line at top */
.status-select::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: rgba(255,255,255,0.8);
}

/* Disclosure arrow */
.status-select::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'%3E%3Cpath d='M1 1l6 6-6 6' stroke='%23888' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.status-select:active {
    /* iOS blue selection */
    background: -webkit-gradient(linear, left top, left bottom, from(#0080e8), to(#0055c0));
    background: linear-gradient(to bottom, #0080e8, #0055c0);
    color: white;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
}

.current-status {
    /* iOS 4 grouped table header gradient */
    background: -webkit-gradient(linear, left top, left bottom, from(#b8c4d0), to(#a8b4c0));
    background: linear-gradient(to bottom, #b8c4d0, #a8b4c0);
    padding: 6px 10px;
    color: #4a5568;
    font-size: 15px;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
    border-top: 1px solid #d0d8e0;
    border-bottom: 1px solid #90a0b0;
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
}

.status-container {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #888;
    border-radius: 10px;
    margin: 10px;
    box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255,255,255,0.5) inset;
    overflow: hidden;
}

/* Simple photo filter effects using CSS filters */
.filter-normal {
    filter: none;
}
.filter-warm {
    filter: sepia(0.2) saturate(1.2) contrast(1.05);
}
.filter-cool {
    filter: contrast(1.1) saturate(1.1) hue-rotate(-10deg);
}
.filter-bw {
    filter: grayscale(1) contrast(1.1);
}
.filter-faded {
    filter: sepia(0.3) saturate(0.8) brightness(1.08);
}
.filter-anime_ai {
    filter: none; /* AI transformation is applied server-side, no CSS needed */
}

/* 2009-style photo processing placeholder */
.photo-processing-frame {
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(#d0d3d9), to(#a4a8b0));
    background: linear-gradient(to bottom,#d0d3d9,#a4a8b0);
    position: relative;
    overflow: hidden;
}
.photo-processing-bar {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 45%;
    height: 14px;
    border-radius: 8px;
    background: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#c2c6ce));
    background: linear-gradient(to bottom,#f7f7f7,#c2c6ce);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9),
        0 -1px 0 rgba(0,0,0,0.15),
        0 0 6px rgba(0,0,0,0.25) inset;
}
.photo-processing-label {
    position: absolute;
    top: 52%;
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: #555b65;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

/* Chat backgrounds */
.chat-background-classic_blue {
    background:#e5f2ff;
    background-image:linear-gradient(to bottom,#f8fcff,#d6e6f5);
}
.chat-background-linen_dark {
    background:#222;
    background-image:linear-gradient(to bottom,#444,#111);
}
.chat-background-green_felt {
    background:#0a4f2a;
    background-image:radial-gradient(circle at top,#1ecc5b,#0a4f2a);
}
.chat-background-paper {
    background:#f8f3e8;
    background-image:repeating-linear-gradient(90deg,rgba(0,0,0,0.03) 0,rgba(0,0,0,0.03) 1px,transparent 1px,transparent 3px);
}

/* =========================================================
   iOS 1–2 style in-call screen
   Full‑screen glossy call UI used from chat voice calls
========================================================= */
.call-screen {
    display: none; /* toggled to block by JS */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background-color: #000;
    background-image: url("{{ url_for('static', filename='photos/planet-earth-from-space-north-america_u-l-pixhbw0.jpg') }}");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
}

/* In‑call status bar (black style) */
.call-status-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
    background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#1a1a1a));
    background: linear-gradient(to bottom, #000000, #1a1a1a);
    color: #ffffff;
    font-size: 12px;
    border-bottom: 1px solid #000000;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.9);
}

.call-status-bar .signal,
.call-status-bar .battery {
    flex: 1;
    min-width: 0;
}

.call-status-bar .battery {
    text-align: right;
}

.call-status-bar .time {
    flex: 0 0 auto;
    text-align: center;
}

.call-screen-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0;
}

.call-screen-header {
    position: absolute;
    top: 20px; /* below in-call status bar */
    left: 0;
    right: 0;
    height: 120px;
    background: -webkit-gradient(linear, left top, left bottom,
                                 from(#4a4a4a),
                                 color-stop(0.45,#2a2a2a),
                                 color-stop(0.50,#1a1a1a),
                                 color-stop(0.51,#000000),
                                 to(#000000));
    background: linear-gradient(to bottom,
                                #4a4a4a 0%,
                                #2a2a2a 45%,
                                #1a1a1a 50%,
                                #000000 51%,
                                #000000 100%);
    border-bottom: 1px solid #000000;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.8);
    text-align: center;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.9);
    padding-top: 40px;
}

.call-screen-title {
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 6px;
}

.call-screen-status {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 10px;
}

.call-screen-timer {
    font-size: 24px;
    letter-spacing: 1px;
}

.call-glass-panel {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 52%;
    transform: translateY(-50%);
    padding: 14px 12px 12px 12px;
    border-radius: 18px;
    background: -webkit-gradient(linear, left top, left bottom,
                                 from(#5a5a5a),
                                 color-stop(0.45,#1d1d1d),
                                 to(#000000));
    background: linear-gradient(to bottom,
                                #5a5a5a 0%,
                                #1d1d1d 45%,
                                #000000 100%);
    border: 1px solid #a0a0a0;
    box-shadow:
        0px 2px 6px rgba(0, 0, 0, 0.9),
        0px 1px 0px rgba(255, 255, 255, 0.7) inset;
}

.call-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: 10px;
    grid-column-gap: 6px;
    text-align: center;
}

.call-grid-button {
    border: none;
    border-radius: 0;
    padding: 14px 0 8px 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
    color: #ffffff;
    font-size: 12px;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.9);
}
.call-grid-button span {
    display: block;
}

.call-grid-button span.call-icon {
    font-size: 24px;
    margin-bottom: 4px;
}
.call-grid-button span.call-icon svg {
    width: 26px;
    height: 26px;
}

.call-bottom-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: -webkit-gradient(linear, left top, left bottom, from(#111111), to(#000000));
    background: linear-gradient(to bottom, #111111, #000000);
    border-top: 1px solid #222222;
    box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.9) inset;
    display: flex;
    align-items: center;
    justify-content: center;
}

.call-end-button {
    min-width: 260px;
    padding: 14px 0;
    border-radius: 12px;
    border: 1px solid #5a0000;
    background: -webkit-gradient(linear, left top, left bottom, from(#ff6556), to(#9b0000));
    background: linear-gradient(to bottom, #ff6556, #9b0000);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.9);
    box-shadow:
        0px 1px 0px rgba(255, 255, 255, 0.5) inset,
        0px -1px 0px rgba(0, 0, 0, 0.7) inset,
        0px 3px 6px rgba(0, 0, 0, 0.8);
}

.call-end-button:active {
    background: linear-gradient(to bottom, #e04435, #6f0000);
    box-shadow:
        0px 1px 3px rgba(0, 0, 0, 0.9) inset;
}

/* Black status bar for notched devices */
.notch-area {
    background-color: #000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top);
    z-index: 10000;
}

/* =========================================================
   iOS 2-3 era Toast Notifications
   Glossy slide-down notification banners
========================================================= */
.notification-container {
    position: fixed;
    top: env(safe-area-inset-top, 20px);
    left: 10px;
    right: 10px;
    z-index: 9000;
    pointer-events: none;
}

.notification-toast {
    pointer-events: auto;
    /* iOS 4 glossy dark notification */
    background: -webkit-gradient(linear, left top, left bottom, 
        color-stop(0%, #5a5a5a),
        color-stop(2%, #4a4a4a),
        color-stop(50%, #2a2a2a),
        color-stop(51%, #1d1d1d),
        color-stop(100%, #0f0f0f));
    background: linear-gradient(to bottom, 
        #5a5a5a 0%,
        #4a4a4a 2%,
        #2a2a2a 50%,
        #1d1d1d 51%,
        #0f0f0f 100%);
    border: 1px solid #707070;
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    box-shadow:
        0px 4px 16px rgba(0, 0, 0, 0.6),
        0px 1px 0px rgba(255, 255, 255, 0.25) inset,
        0px -1px 0px rgba(0, 0, 0, 0.3) inset;
    transform: translateY(-120%);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    cursor: pointer;
}

.notification-toast.show {
    transform: translateY(0);
    opacity: 1;
}

.notification-toast.hiding {
    transform: translateY(-120%);
    opacity: 0;
}

.notification-avatar {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    margin-right: 10px;
    border: 1px solid #888;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-body {
    color: #ccc;
    font-size: 12px;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.notification-app-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    flex-shrink: 0;
}

.notification-close {
    color: #888;
    font-size: 18px;
    margin-left: 8px;
    padding: 4px;
    flex-shrink: 0;
}

/* =========================================================
   iOS 2-3 era Incoming Call Screen
   Full-screen call with Accept/Decline buttons
========================================================= */
.incoming-call-screen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    background-color: #000;
    background-image: url("{{ url_for('static', filename='photos/planet-earth-from-space-north-america_u-l-pixhbw0.jpg') }}");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
}

.incoming-call-header {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 180px;
    background: -webkit-gradient(linear, left top, left bottom,
                                 from(#4a4a4a),
                                 color-stop(0.45,#2a2a2a),
                                 color-stop(0.50,#1a1a1a),
                                 color-stop(0.51,#000000),
                                 to(#000000));
    background: linear-gradient(to bottom,
                                #4a4a4a 0%,
                                #2a2a2a 45%,
                                #1a1a1a 50%,
                                #000000 51%,
                                #000000 100%);
    border-bottom: 1px solid #000000;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.8);
    text-align: center;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.9);
    padding-top: 30px;
}

.incoming-call-avatar {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    margin: 0 auto 10px auto;
    border: 2px solid #666;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);
}

.incoming-call-name {
    font-size: 28px;
    font-weight: normal;
    margin-bottom: 6px;
}

.incoming-call-label {
    font-size: 16px;
    opacity: 0.8;
}

.incoming-call-buttons {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    background: -webkit-gradient(linear, left top, left bottom, from(#111111), to(#000000));
    background: linear-gradient(to bottom, #111111, #000000);
    border-top: 1px solid #222222;
    box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.9) inset;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 20px;
}

.call-accept-button {
    min-width: 120px;
    padding: 14px 20px;
    border-radius: 12px;
    border: 1px solid #1a5a00;
    background: -webkit-gradient(linear, left top, left bottom, from(#56d556), to(#1a8a00));
    background: linear-gradient(to bottom, #56d556, #1a8a00);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.7);
    box-shadow:
        0px 1px 0px rgba(255, 255, 255, 0.4) inset,
        0px -1px 0px rgba(0, 0, 0, 0.5) inset,
        0px 3px 6px rgba(0, 0, 0, 0.6);
}

.call-accept-button:active {
    background: linear-gradient(to bottom, #45c445, #157000);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.8) inset;
}

.call-decline-button {
    min-width: 120px;
    padding: 14px 20px;
    border-radius: 12px;
    border: 1px solid #5a0000;
    background: -webkit-gradient(linear, left top, left bottom, from(#ff6556), to(#9b0000));
    background: linear-gradient(to bottom, #ff6556, #9b0000);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.9);
    box-shadow:
        0px 1px 0px rgba(255, 255, 255, 0.5) inset,
        0px -1px 0px rgba(0, 0, 0, 0.7) inset,
        0px 3px 6px rgba(0, 0, 0, 0.8);
}

.call-decline-button:active {
    background: linear-gradient(to bottom, #e04435, #6f0000);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9) inset;
}

/* Pulsing animation for incoming call - subtle, era-appropriate */
@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(86, 213, 86, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(86, 213, 86, 0); }
    100% { box-shadow: 0 0 0 0 rgba(86, 213, 86, 0); }
}

.incoming-call-avatar.ringing {
    animation: pulse-ring 2s infinite;
}

/* =========================================================
   iOS 2-3 Era Authentic Animations
   Simple, snappy transitions that emulate original iPhone
========================================================= */

/* --- iOS 2-3 Activity Indicator (Spinning Wheel) --- */
@keyframes ios2-spin {
    0% { opacity: 1; }
    100% { opacity: 0.25; }
}

.ios-activity-indicator {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
}

.ios-activity-indicator .spoke {
    position: absolute;
    width: 2px;
    height: 6px;
    background: #555;
    border-radius: 1px;
    left: 50%;
    top: 50%;
    transform-origin: center 10px;
    animation: ios2-spin 1s infinite linear;
}

.ios-activity-indicator.light .spoke {
    background: #fff;
}

.ios-activity-indicator .spoke:nth-child(1)  { transform: translateX(-50%) rotate(0deg);   animation-delay: 0s; }
.ios-activity-indicator .spoke:nth-child(2)  { transform: translateX(-50%) rotate(30deg);  animation-delay: -0.083s; }
.ios-activity-indicator .spoke:nth-child(3)  { transform: translateX(-50%) rotate(60deg);  animation-delay: -0.166s; }
.ios-activity-indicator .spoke:nth-child(4)  { transform: translateX(-50%) rotate(90deg);  animation-delay: -0.25s; }
.ios-activity-indicator .spoke:nth-child(5)  { transform: translateX(-50%) rotate(120deg); animation-delay: -0.333s; }
.ios-activity-indicator .spoke:nth-child(6)  { transform: translateX(-50%) rotate(150deg); animation-delay: -0.416s; }
.ios-activity-indicator .spoke:nth-child(7)  { transform: translateX(-50%) rotate(180deg); animation-delay: -0.5s; }
.ios-activity-indicator .spoke:nth-child(8)  { transform: translateX(-50%) rotate(210deg); animation-delay: -0.583s; }
.ios-activity-indicator .spoke:nth-child(9)  { transform: translateX(-50%) rotate(240deg); animation-delay: -0.666s; }
.ios-activity-indicator .spoke:nth-child(10) { transform: translateX(-50%) rotate(270deg); animation-delay: -0.75s; }
.ios-activity-indicator .spoke:nth-child(11) { transform: translateX(-50%) rotate(300deg); animation-delay: -0.833s; }
.ios-activity-indicator .spoke:nth-child(12) { transform: translateX(-50%) rotate(330deg); animation-delay: -0.916s; }

/* --- List Row Tap Highlight (Classic Blue Selection) --- */
.list-item,
.tweet,
.chat-list-item,
.status-select,
[data-tappable] {
    -webkit-tap-highlight-color: transparent;
    transition: none;
}

.list-item.tapped,
.tweet.tapped,
.chat-list-item.tapped,
.status-select.tapped,
[data-tappable].tapped {
    /* iOS blue selection */
    background: -webkit-gradient(linear, left top, left bottom, from(#0080e8), to(#0055c0)) !important;
    background: linear-gradient(to bottom, #0080e8, #0055c0) !important;
    color: #fff !important;
}

.list-item.tapped *,
.tweet.tapped *,
.chat-list-item.tapped *,
[data-tappable].tapped * {
    color: #fff !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.4) !important;
}

/* --- Button Press Effect (Immediate Darkening) --- */
.button,
.back-button,
.add-button,
.profile-edit-button,
.segment-button,
.call-end-button,
.call-accept-button,
.call-decline-button {
    -webkit-tap-highlight-color: transparent;
    transition: none;
}

.button.pressed,
.back-button.pressed,
.add-button.pressed,
.profile-edit-button.pressed {
    filter: brightness(0.85);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4) inset;
}

/* --- Page/Content Slide Transitions --- */
.content.slide-in-right {
    animation: slideInRight 0.3s ease-out;
}

.content.slide-in-left {
    animation: slideInLeft 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0.7;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-30%);
        opacity: 0.7;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* --- Modal Slide Up (Authentic iOS 2 Style) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 5000;
    transition: background 0.25s ease-out;
}

.modal-overlay.active {
    background: rgba(0, 0, 0, 0.4);
}

.modal-content {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, #e8e8e8, #d4d4d4);
    border-top: 1px solid #a0a0a0;
    border-radius: 12px 12px 0 0;
    transform: translateY(100%);
    transition: transform 0.25s ease-out;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.3);
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

/* --- Compose Form Slide Down --- */
.compose-form-container {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease-out;
}

.compose-form-container.open {
    max-height: 200px;
}

/* --- Tab Bar Selection Effect --- */
.tab {
    -webkit-tap-highlight-color: transparent;
    transition: none;
}

.tab.pressed {
    background: rgba(255, 255, 255, 0.15);
}

/* --- Tweet Action Feedback (Like/Retweet) --- */
.tweet-action {
    -webkit-tap-highlight-color: transparent;
    transition: none;
}

.tweet-action.tap-feedback {
    transform: scale(0.92);
}

/* Quick scale back - very subtle, authentic feel */
.tweet-action.liked,
.tweet-action.retweeted {
    color: inherit; /* Maintain base style if no specifics */
}

/* --- Chat Bubble Entry (Simple Slide) --- */
.chat-bubble-enter {
    animation: chatBubbleSlide 0.2s ease-out;
}

@keyframes chatBubbleSlide {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Alert Dialog (iOS 2 Style) --- */
.ios-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: background 0.2s ease-out, opacity 0.2s ease-out;
}

.ios-alert-overlay.active {
    background: rgba(0, 0, 0, 0.35);
    opacity: 1;
    pointer-events: auto;
}

.ios-alert {
    /* iOS 4 glossy alert dialog */
    background: -webkit-gradient(linear, left top, left bottom, 
        color-stop(0%, #e8ecf0),
        color-stop(2%, #dde2e8),
        color-stop(50%, #c8cdd5),
        color-stop(51%, #bec4cc),
        color-stop(100%, #b0b6be));
    background: linear-gradient(to bottom, 
        #e8ecf0 0%,
        #dde2e8 2%,
        #c8cdd5 50%,
        #bec4cc 51%,
        #b0b6be 100%);
    border: 1px solid #7a7f85;
    border-radius: 14px;
    width: 270px;
    box-shadow: 
        0px 4px 20px rgba(0, 0, 0, 0.5),
        0px 1px 0px rgba(255, 255, 255, 0.5) inset,
        0px -1px 0px rgba(0, 0, 0, 0.1) inset;
    transform: scale(0.85);
    transition: transform 0.15s ease-out;
    overflow: hidden;
}

.ios-alert-overlay.active .ios-alert {
    transform: scale(1);
}

.ios-alert-title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 15px 15px 5px 15px;
    color: #000;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}

.ios-alert-message {
    text-align: center;
    font-size: 14px;
    padding: 5px 15px 15px 15px;
    color: #333;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7);
}

.ios-alert-buttons {
    display: flex;
    border-top: 1px solid #9a9fa5;
}

.ios-alert-button {
    flex: 1;
    padding: 14px 12px;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    color: #1c54b9;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
    /* iOS 4 glossy button */
    background: -webkit-gradient(linear, left top, left bottom, 
        color-stop(0%, #f8f9fa),
        color-stop(50%, #e8eaed),
        color-stop(51%, #dfe2e6),
        color-stop(100%, #d0d4d8));
    background: linear-gradient(to bottom, 
        #f8f9fa 0%,
        #e8eaed 50%,
        #dfe2e6 51%,
        #d0d4d8 100%);
    border: none;
    border-left: 1px solid #9a9fa5;
    cursor: pointer;
}

.ios-alert-button:first-child {
    border-left: none;
}

.ios-alert-button:active {
    background: -webkit-gradient(linear, left top, left bottom, from(#0080e8), to(#0055c0));
    background: linear-gradient(to bottom, #0080e8, #0055c0);
    color: #fff;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
}

.ios-alert-button.destructive {
    color: #d70015;
}

.ios-alert-button.destructive:active {
    background: -webkit-gradient(linear, left top, left bottom, from(#ff5555), to(#cc0000));
    background: linear-gradient(to bottom, #ff5555, #cc0000);
    color: #fff;
}

/* --- Swipe to Delete Row (iOS 2 Style) --- */
.swipe-row {
    position: relative;
    overflow: hidden;
}

.swipe-row-content {
    position: relative;
    z-index: 1;
    background: inherit;
    transition: transform 0.2s ease-out;
}

.swipe-row-delete {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 80px;
    background: linear-gradient(to bottom, #ff5950, #c9302c);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
}

.swipe-row.swiped .swipe-row-content {
    transform: translateX(-80px);
}

/* --- Image Loading Fade --- */
.img-loading {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.img-loading.loaded {
    opacity: 1;
}

/* --- Segmented Control Press --- */
.segment-button {
    -webkit-tap-highlight-color: transparent;
    transition: none;
}

.segment-button:active:not(.active) {
    background: linear-gradient(to bottom, #d0d0d0, #b5b5b5);
}

/* --- Header Button Press --- */
.back-button:active,
.add-button:active {
    filter: brightness(0.8);
}

/* --- Form Focus Highlight (Authentic iOS 2) --- */
.form-control:focus {
    border-color: #5794e5;
    box-shadow: 0px 0px 3px rgba(87, 148, 229, 0.5),
                0px 1px 3px rgba(0, 0, 0, 0.1) inset;
    outline: none;
}

/* --- Loading State for Tweet Actions --- */
.tweet-action.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* =========================================================
   Persistent Radio Player Bar
   iOS 2-3 era style - sits above tab bar
========================================================= */
.radio-player-bar {
    position: fixed;
    bottom: calc(49px + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    height: 36px;
    /* iOS 4 glossy dark bar */
    background: -webkit-gradient(linear, left top, left bottom, 
        color-stop(0%, #4a4a4a),
        color-stop(2%, #3a3a3a),
        color-stop(50%, #252525),
        color-stop(51%, #1a1a1a),
        color-stop(100%, #0f0f0f));
    background: linear-gradient(to bottom, 
        #4a4a4a 0%,
        #3a3a3a 2%,
        #252525 50%,
        #1a1a1a 51%,
        #0f0f0f 100%);
    border-top: 1px solid #5a5a5a;
    border-bottom: 1px solid #000;
    box-shadow: 
        0 -1px 0 rgba(255,255,255,0.08) inset,
        0 1px 0 rgba(0,0,0,0.5) inset;
    z-index: 999;
    display: flex;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.radio-player-bar:active {
    background: -webkit-gradient(linear, left top, left bottom, 
        color-stop(0%, #3a3a3a),
        color-stop(50%, #1a1a1a),
        color-stop(100%, #0a0a0a));
    background: linear-gradient(to bottom, #3a3a3a 0%, #1a1a1a 50%, #0a0a0a 100%);
}

.radio-player-inner {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 10px;
    gap: 10px;
}

.radio-status-indicator {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    /* Recessed indicator */
    background: -webkit-gradient(linear, left top, left bottom, from(#1a1a1a), to(#0a0a0a));
    background: linear-gradient(to bottom, #1a1a1a, #0a0a0a);
    border: 1px solid #000;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.radio-icon {
    color: #666;
    font-size: 10px;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}

.radio-status-indicator.playing .radio-icon {
    color: #4cd964;
    text-shadow: 0 0 4px rgba(76, 217, 100, 0.5);
}

.radio-status-indicator.error .radio-icon {
    color: #ff3b30;
}

.radio-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.radio-station-name {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.radio-status-text {
    color: #888;
    font-size: 10px;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.radio-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.radio-volume-btn {
    width: 26px;
    height: 22px;
    border: none;
    border-radius: 4px;
    /* iOS 4 glossy button */
    background: -webkit-gradient(linear, left top, left bottom, 
        color-stop(0%, #6a6a6a),
        color-stop(2%, #555),
        color-stop(50%, #404040),
        color-stop(51%, #333),
        color-stop(100%, #252525));
    background: linear-gradient(to bottom, 
        #6a6a6a 0%,
        #555 2%,
        #404040 50%,
        #333 51%,
        #252525 100%);
    border: 1px solid #1a1a1a;
    box-shadow: 
        0 1px 0 rgba(255,255,255,0.15) inset,
        0 -1px 0 rgba(0,0,0,0.2) inset,
        0 1px 2px rgba(0,0,0,0.3);
    color: #ddd;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.6);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.radio-volume-btn:active {
    background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a1a1a));
    background: linear-gradient(to bottom, #333, #1a1a1a);
    box-shadow: 0 1px 2px rgba(0,0,0,0.4) inset;
}

.radio-volume-level {
    color: #aaa;
    font-size: 10px;
    min-width: 28px;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.6);
}


/* Adjust content bottom when radio is visible */
body.radio-active .content {
    bottom: calc(49px + 36px + env(safe-area-inset-bottom, 0px));  /* tab bar + radio bar */
}

/* Landscape mode adjustments for radio */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .radio-player-bar {
        /* Position above the camera button panel */
        bottom: auto;
        top: 0;
        left: 0;
        /* Match screen width */
        width: calc((100vh - 20px) * 4 / 3 + 12px);
        max-width: min(60vw, calc(100vw - 120px));
        height: 28px;
        border-radius: 0;
        border-top: none;
        border-bottom: 1px solid #5a5a5a;
        z-index: 1003;
    }
    
    .radio-player-inner {
        padding: 0 6px;
        gap: 6px;
    }
    
    .radio-status-indicator {
        width: 18px;
        height: 18px;
    }
    
    .radio-icon {
        font-size: 8px;
    }
    
    .radio-station-name {
        font-size: 10px;
    }
    
    .radio-status-text {
        font-size: 8px;
    }
    
    .radio-volume-btn {
        width: 20px;
        height: 18px;
        font-size: 12px;
    }
    
    .radio-volume-level {
        font-size: 8px;
        min-width: 22px;
    }
}

/* ===========================================
   Music Now-Playing Bar — iPod touch mini-player
   Fixed above the tab bar, visible on every page
=========================================== */
.music-np-bar {
    position: fixed;
    bottom: 49px;
    left: 0;
    right: 0;
    z-index: 999;
    /* iPod touch dark chrome bar */
    background: linear-gradient(to bottom,
        #4a4a4a 0%, #3a3a3a 2%,
        #222 50%, #1a1a1a 51%, #111 100%);
    border-top: 1px solid #666;
    border-bottom: 1px solid #000;
    box-shadow:
        0 -1px 0 rgba(255,255,255,0.08) inset,
        0 1px 0 rgba(0,0,0,0.5);
    /* Safe area for bottom-bar stacking */
    padding-bottom: 0;
}

.music-np-inner {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    gap: 8px;
    height: 44px;
    box-sizing: border-box;
}

.music-np-art {
    width: 34px;
    height: 34px;
    border-radius: 3px;
    overflow: hidden;
    background: #333;
    flex-shrink: 0;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.6),
        0 0 0 1px rgba(255,255,255,0.08) inset;
}

.music-np-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.music-np-info {
    flex: 1;
    min-width: 0;
    padding: 0 2px;
}

.music-np-title {
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.6);
    line-height: 1.2;
}

.music-np-artist {
    font-size: 11px;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
    line-height: 1.2;
}

.music-np-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.music-np-btn {
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.music-np-btn:active {
    background: rgba(255,255,255,0.12);
}

.music-np-btn svg {
    filter: drop-shadow(0 -1px 0 rgba(0,0,0,0.4));
}

.music-np-play {
    width: 38px;
    height: 38px;
}

.music-np-close {
    margin-left: 4px;
    opacity: 0.7;
}

.music-np-close:active {
    opacity: 1;
}

.music-np-progress {
    height: 2px;
    background: rgba(255,255,255,0.08);
    width: 100%;
}

.music-np-progress-bar {
    height: 100%;
    background: #e8497e;
    width: 0%;
    transition: width 0.5s linear;
    box-shadow: 0 0 4px rgba(232,73,126,0.4);
}

/* Account for safe area on notched devices */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .music-np-bar {
        bottom: calc(49px + env(safe-area-inset-bottom));
    }
}

/* When music bar is visible, push chat/composer bars above it so input stays usable */
body.music-active #composer-bar,
body.music-active #comment-form-container {
    bottom: calc(95px + env(safe-area-inset-bottom)) !important; /* 49px nav + 46px music bar */
    z-index: 1000; /* above .music-np-bar (999) */
}
body.music-active #reply-preview,
body.music-active #media-preview-bar,
body.music-active #sticker-picker {
    bottom: calc(145px + env(safe-area-inset-bottom)) !important; /* above composer when music active */
}

/* PWA Standalone mode styles */
@media all and (display-mode: standalone) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    .status-bar {
        display: none;
    }
    
    .header {
        top: env(safe-area-inset-top);
    }
    
    .content {
        top: calc(42px + env(safe-area-inset-top));  /* header height + safe area, no status bar */
    }
}


/* ==========================================================================
   mIRC / IRC Client — Windows 98 Chrome
   ========================================================================== */

.mirc-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #008080; /* Classic Win98 teal desktop */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    -webkit-font-smoothing: auto;
}

/* ---- Window Frame ---- */
.mirc-window {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    border: 2px outset #dfdfdf;
    background: #c0c0c0;
}

/* ---- Title Bar ---- */
.mirc-titlebar {
    display: flex;
    align-items: center;
    height: 22px;
    padding: 0 3px;
    background: linear-gradient(to right, #000080, #1084d0);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    user-select: none;
    flex-shrink: 0;
}
.mirc-titlebar-icon { margin-right: 4px; display: flex; align-items: center; }
.mirc-titlebar-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 1px 1px 0 rgba(0,0,0,0.4); }
.mirc-titlebar-buttons { display: flex; gap: 2px; }
.mirc-titlebar-buttons button {
    width: 18px; height: 16px;
    font-size: 10px; line-height: 1;
    background: #c0c0c0;
    border: 1.5px outset #dfdfdf;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; color: #000;
}
.mirc-titlebar-buttons button:active { border-style: inset; }
.mirc-btn-close:hover { background: #c0392b; color: #fff; }

/* ---- Menu Bar ---- */
.mirc-menubar {
    display: flex;
    height: 20px;
    align-items: center;
    background: #c0c0c0;
    border-bottom: 1px solid #808080;
    padding: 0 2px;
    flex-shrink: 0;
}
.mirc-menu-item {
    padding: 1px 8px;
    font-size: 12px;
    cursor: pointer;
    color: #000;
}
.mirc-menu-item:hover { background: #000080; color: #fff; }

/* ---- Toolbar ---- */
.mirc-toolbar {
    display: flex;
    align-items: center;
    height: 28px;
    padding: 2px 4px;
    gap: 2px;
    background: #c0c0c0;
    border-bottom: 1px solid #808080;
    flex-shrink: 0;
}
.mirc-tool-btn {
    width: 24px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px outset #dfdfdf;
    background: #c0c0c0;
    cursor: pointer;
    color: #000;
}
.mirc-tool-btn:hover { border-color: #fff #808080 #808080 #fff; }
.mirc-tool-btn:active { border-style: inset; }
.mirc-toolbar-sep {
    width: 1px; height: 20px;
    border-left: 1px solid #808080;
    border-right: 1px solid #fff;
    margin: 0 3px;
}

/* ---- Main Body (3-column layout) ---- */
.mirc-body {
    display: flex;
    flex: 1;
    min-height: 0;
    border-top: 1px solid #fff;
}

/* ---- Switchbar (channel tree) ---- */
.mirc-switchbar {
    width: 140px;
    min-width: 100px;
    background: #fff;
    border-right: 2px inset #dfdfdf;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
}
.mirc-switchbar-header {
    padding: 4px 6px;
    font-size: 11px;
    font-weight: bold;
    background: #c0c0c0;
    border-bottom: 1px solid #808080;
    color: #000;
}
.mirc-channel-item {
    padding: 3px 8px 3px 16px;
    font-size: 12px;
    cursor: pointer;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mirc-channel-item:hover { background: #e8e8e8; }
.mirc-channel-item.active {
    background: #000080;
    color: #fff;
    font-weight: bold;
}

/* ---- Chat Area ---- */
.mirc-chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mirc-topic {
    padding: 3px 8px;
    font-size: 11px;
    background: #ececec;
    border-bottom: 1px inset #dfdfdf;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    min-height: 18px;
}
.mirc-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    padding: 4px 6px;
    font-family: 'Fixedsys', 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.45;
    color: #000;
    border: 2px inset #c0c0c0;
    word-wrap: break-word;
}

/* Message types */
.mirc-time { color: #808080; }
.mirc-nick { font-weight: bold; }
.mirc-text { color: #000; }
.mirc-system-msg { color: #808080; font-style: italic; }
.mirc-event { color: #009300; }
.mirc-kick { color: #ff0000; }
.mirc-topic-change { color: #00007f; }
.mirc-action { color: #7f0000; }
.mirc-notice { color: #9C009C; }
.mirc-user-msg, .mirc-event-msg, .mirc-action-msg, .mirc-notice-msg {
    padding: 0;
    margin: 0;
}

/* ---- Nickname List ---- */
.mirc-nicklist {
    width: 130px;
    min-width: 90px;
    background: #fff;
    border-left: 2px inset #dfdfdf;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
}
.mirc-nicklist-header {
    padding: 4px 6px;
    font-size: 11px;
    font-weight: bold;
    background: #c0c0c0;
    border-bottom: 1px solid #808080;
    color: #000;
    text-align: center;
}
.mirc-nick-entry {
    padding: 1px 6px;
    font-size: 12px;
    font-family: 'Fixedsys', 'Consolas', 'Courier New', monospace;
    cursor: default;
    color: #000;
}
.mirc-nick-entry.offline { color: #999; }
.mirc-nick-entry:hover { background: #000080; color: #fff; }

/* ---- Input Area ---- */
.mirc-input-area {
    display: flex;
    padding: 3px;
    gap: 3px;
    background: #c0c0c0;
    border-top: 1px solid #808080;
    flex-shrink: 0;
}
.mirc-input {
    flex: 1;
    height: 22px;
    border: 2px inset #c0c0c0;
    background: #fff;
    font-family: 'Fixedsys', 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    padding: 0 4px;
    outline: none;
    color: #000;
}
.mirc-send-btn {
    height: 22px;
    padding: 0 12px;
    border: 2px outset #dfdfdf;
    background: #c0c0c0;
    font-size: 12px;
    cursor: pointer;
    color: #000;
}
.mirc-send-btn:active { border-style: inset; }

/* ---- Status Bar ---- */
.mirc-statusbar {
    display: flex;
    justify-content: space-between;
    padding: 2px 6px;
    font-size: 11px;
    background: #c0c0c0;
    border-top: 1px inset #dfdfdf;
    color: #000;
    flex-shrink: 0;
}

/* ---- Dialog (Channel List, About, Help) ---- */
.mirc-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.mirc-dialog {
    background: #c0c0c0;
    border: 2px outset #dfdfdf;
    min-width: 300px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
}
.mirc-dialog .mirc-titlebar { cursor: default; }
.mirc-dialog-body {
    padding: 8px;
    overflow-y: auto;
    flex: 1;
    background: #fff;
    margin: 4px;
    border: 2px inset #c0c0c0;
    font-size: 12px;
    color: #000;
}
.mirc-dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 4px 8px 6px;
    gap: 6px;
}
.mirc-dialog-btn {
    padding: 2px 16px;
    height: 22px;
    border: 2px outset #dfdfdf;
    background: #c0c0c0;
    font-size: 12px;
    cursor: pointer;
    color: #000;
}
.mirc-dialog-btn:active { border-style: inset; }

.mirc-channel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.mirc-channel-table th {
    background: #c0c0c0;
    border: 1px solid #808080;
    padding: 2px 6px;
    text-align: left;
    font-size: 11px;
}
.mirc-channel-table td {
    border: 1px solid #ddd;
    padding: 2px 6px;
}
.mirc-channel-table tr:hover td { background: #e8e8ff; }

/* ---- Switchbar icons ---- */
.mirc-sw-icon {
    display: inline-block;
    width: 14px;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    margin-right: 2px;
}
.mirc-sw-status { color: #FC7F00; }
.mirc-sw-channel { color: #009300; }
.mirc-sw-query { color: #9C009C; }

/* ---- Unread indicators ---- */
.mirc-channel-item.mirc-unread {
    font-weight: bold;
    color: #000080;
}
.mirc-channel-item.mirc-highlight-unread {
    font-weight: bold;
    color: #FF0000;
    background: #fff3f3;
}
.mirc-channel-item.mirc-unread::after,
.mirc-channel-item.mirc-highlight-unread::after {
    content: ' *';
}

/* ---- Nick highlight in messages ---- */
.mirc-highlight {
    background: #fff3cd;
    border-left: 2px solid #FC7F00;
    padding-left: 4px;
}

/* ---- Context menu ---- */
.mirc-context-menu {
    position: fixed;
    z-index: 10000;
    background: #c0c0c0;
    border: 2px outset #dfdfdf;
    min-width: 160px;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
    font-size: 12px;
}
.mirc-ctx-item {
    padding: 3px 16px;
    cursor: pointer;
    color: #000;
}
.mirc-ctx-item:hover {
    background: #000080;
    color: #fff;
}
.mirc-ctx-sep {
    height: 1px;
    margin: 2px 4px;
    background: #808080;
    border-bottom: 1px solid #fff;
}

/* ---- Dropdown menus ---- */
.mirc-dropdown {
    position: fixed;
    z-index: 10000;
    background: #c0c0c0;
    border: 2px outset #dfdfdf;
    min-width: 180px;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
    font-size: 12px;
}
.mirc-dropdown-item {
    padding: 3px 16px;
    cursor: pointer;
    color: #000;
}
.mirc-dropdown-item:hover {
    background: #000080;
    color: #fff;
}
.mirc-dropdown-sep {
    height: 1px;
    margin: 2px 4px;
    background: #808080;
    border-bottom: 1px solid #fff;
}

/* ---- Color picker ---- */
.mirc-color-picker {
    position: fixed;
    z-index: 10000;
    background: #c0c0c0;
    border: 2px outset #dfdfdf;
    padding: 4px;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}
.mirc-color-picker-title {
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    padding: 2px 0 4px;
    color: #000;
}
.mirc-color-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}
.mirc-color-cell {
    width: 22px;
    height: 22px;
    border: 1px solid #808080;
    cursor: pointer;
}
.mirc-color-cell:hover {
    border: 2px solid #000;
}

/* ---- Options dialog ---- */
.mirc-opt-cat {
    padding: 3px 8px;
    cursor: pointer;
    color: #000;
}
.mirc-opt-cat:hover { background: #e8e8e8; }
.mirc-opt-cat.active {
    background: #000080;
    color: #fff;
    font-weight: bold;
}
.mirc-opt-panel label {
    display: block;
    margin: 2px 0;
    cursor: pointer;
    color: #000;
}

/* ---- Scripts editor ---- */
.mirc-scripts-textarea {
    flex: 1;
    width: 100%;
    min-height: 250px;
    border: 2px inset #c0c0c0;
    background: #fff;
    font-family: 'Fixedsys', 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    padding: 4px;
    resize: none;
    color: #000;
    outline: none;
}
.mirc-script-tab.active {
    border-style: inset;
    background: #a0a0a0;
}

/* ---- Mobile adjustments ---- */
@media (max-width: 600px) {
    .mirc-switchbar { width: 100px; min-width: 80px; }
    .mirc-nicklist { width: 90px; min-width: 70px; }
    .mirc-menubar { display: none; }
    .mirc-toolbar { overflow-x: auto; }
    .mirc-messages { font-size: 12px; }
}
@media (max-width: 420px) {
    .mirc-nicklist { display: none; }
    .mirc-switchbar { width: 80px; min-width: 60px; }
}

/* ---- Desktop/Mobile visibility utilities ---- */
@media screen and (min-width: 640px) {
    .desktop-hide { display: none !important; }
}
@media screen and (max-width: 639px) {
    .mobile-hide { display: none !important; }
}

/* ---- Real-desktop (>=1024px) chrome suppression ----
   The bottom tab-bar is a touch-era pattern with no keyboard/mouse
   affordance. The fake iOS status-bar, notch, and the mobile header
   bar are pure decoration on real desktop. Tablets stay below this
   threshold so they keep the mobile chrome they can actually use. */
@media screen and (min-width: 1024px) {
    #app-tab-bar,
    .tab-bar,
    .status-bar,
    .notch-area,
    .header,
    #page-header { display: none !important; }

    /* .content is position:fixed with hardcoded top/bottom offsets
       for the mobile chrome (top:62px for status+header, bottom:49px
       for tab-bar). With chrome hidden we need to fill the viewport,
       otherwise empty bands stay at top and bottom. */
    .content {
        top: 0 !important;
        bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Full-page "pinstripe" wrappers size themselves with
       min-height: calc(100vh - 120px) to leave room for the mobile chrome
       (status bar + header + tab bar). On desktop that chrome is hidden and
       .content fills the whole viewport (height = 100vh), so the -120px left
       a white band of .content's #fff background at the bottom. Stretch these
       wrappers to fill .content (which has a definite height here). */
    .cin-wrap,
    .ytd-wrap,
    .drive-container,
    .error-container,
    .forum-page-container,
    .gdpr-container,
    .guild-page-container,
    .legal-page-container,
    .mus-wrap,
    .share-container,
    .sticker-page-container,
    .store-container,
    .totp-container,
    .vm-container,
    .vnc-container {
        min-height: 100% !important;
    }
}