/* ════════════════════════════════════════════════════════════
   Global Reset & Base
   ════════════════════════════════════════════════════════════ */
* {
    box-sizing: border-box;
}

.emoji-icon {
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.2em;
    object-fit: contain;
}

.topic-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
}

/* Hide scrollbars globally */
::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

* {
    scrollbar-width: none;
}

body {
    font-family: var(--font);
    margin: 0;
    padding: 0;
    /* Safe area insets: support notch (top) and home indicator (bottom) on Android/iOS */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    height: 100dvh;
    overflow: hidden;
    background-color: var(--bg);
    color: var(--text);
    transition: background-color 0.3s, color 0.3s;
    /* Eliminate 300ms tap delay on mobile WebViews */
    touch-action: manipulation;
}

/* SVG background pattern */
body.dark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 100 100' opacity='0.03'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 20 Q5 20 5 30 Q5 40 15 40 L20 40 L20 45 L25 40 Q35 40 35 30 Q35 20 25 20 Z'/%3E%3Crect x='65' y='25' width='14' height='10' rx='2'/%3E%3Cpath d='M68 25 V20 A4 4 0 0 1 76 20 V25'/%3E%3Cpath d='M15 80 Q25 70 35 80 Q25 90 15 80 Z'/%3E%3Ccircle cx='25' cy='80' r='3'/%3E%3Cpath d='M65 85 V75 A10 10 0 0 1 85 75 V85 L81 81 L77 85 L73 81 L69 85 L65 81 Z'/%3E%3Ccircle cx='71' cy='73' r='1'/%3E%3Ccircle cx='79' cy='73' r='1'/%3E%3Ccircle cx='50' cy='50' r='1.5'/%3E%3Cpath d='M10 5 L14 9 M14 5 L10 9'/%3E%3Cpath d='M90 40 L94 44 M94 40 L90 44'/%3E%3Cpath d='M45 90 L55 90 M50 85 L50 95'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: scroll;
    background-size: 160px 160px;
}

body.light {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 100 100' opacity='0.06'%3E%3Cg fill='none' stroke='%23000000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 20 Q5 20 5 30 Q5 40 15 40 L20 40 L20 45 L25 40 Q35 40 35 30 Q35 20 25 20 Z'/%3E%3Crect x='65' y='25' width='14' height='10' rx='2'/%3E%3Cpath d='M68 25 V20 A4 4 0 0 1 76 20 V25'/%3E%3Cpath d='M15 80 Q25 70 35 80 Q25 90 15 80 Z'/%3E%3Ccircle cx='25' cy='80' r='3'/%3E%3Cpath d='M65 85 V75 A10 10 0 0 1 85 75 V85 L81 81 L77 85 L73 81 L69 85 L65 81 Z'/%3E%3Ccircle cx='71' cy='73' r='1'/%3E%3Ccircle cx='79' cy='73' r='1'/%3E%3Ccircle cx='50' cy='50' r='1.5'/%3E%3Cpath d='M10 5 L14 9 M14 5 L10 9'/%3E%3Cpath d='M90 40 L94 44 M94 40 L90 44'/%3E%3Cpath d='M45 90 L55 90 M50 85 L50 95'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: scroll;
    background-size: 160px 160px;
}

/* Prevent text/element selection on logo, brand title, and all icons */
.brand-title,
.main-logo-img,
#main-logo,
.emoji-icon,
.ui-icon,
.tab-icon,
.tab-btn svg,
.sidebar-title-icon,
[data-icon],
svg,
img {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
}

.main-logo-img,
#main-logo {
    pointer-events: none;
}