:root {
    --ghali-accent: #6366f1;
    --ghali-bg: rgba(255, 255, 255, 0.98);
    --ghali-border: #e2e8f0;
}

#ghali-overlay-container { position: relative; width: 100%; min-height: 100vh; }
#annotationCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 900; pointer-events: none; }
.drawing-active #annotationCanvas { pointer-events: auto; cursor: crosshair; }

/* L'INPUT DYNAMIQUE */
.ghali-dynamic-input {
    position: absolute;
    z-index: 1200;
    background: rgba(255,255,255,0.7);
    border: 1px dashed #6366f1;
    outline: none;
    padding: 2px 5px;
    border-radius: 4px;
    min-width: 50px;
}
#monDiv {
  width: 800px;
  height: 600px;
  display: none; /* problème */
}

/* mieux */
#monDiv {
  width: 800px;
  height: 600px;
  visibility: hidden; /* conserve les dimensions */
}

.g-toggle-btn {
    position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px;
    border-radius: 50%; background: var(--ghali-accent); color: white;
    border: none; cursor: pointer; z-index: 1100; font-size: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.ghali-controls {
    position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
    background: var(--ghali-bg); backdrop-filter: blur(5px);
    padding: 10px; border-radius: 15px; display: flex; gap: 10px;
    z-index: 1000; border: 1px solid var(--ghali-border); box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.ghali-controls.hidden { display: none; }
.g-group { display: flex; gap: 5px; padding: 0 5px; border-left: 1px solid #ddd; }
.g-group:last-child { border-left: none; }
.g-btn { width: 35px; height: 35px; border-radius: 8px; border: none; cursor: pointer; background: transparent; }
.g-btn.active { background: #6366f1; color: white; }
#g-mode-text { font-weight: bold; font-style: italic; }

.g-menu, .thickness-popover {
    position: absolute; bottom: 55px; left: 50%; transform: translateX(-50%);
    background: white; border: 1px solid #ddd; border-radius: 10px;
    display: none; padding: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.g-menu.show, .thickness-popover.show { display: flex; flex-direction: column; gap: 5px; }
.color-dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ccc; }

//* تعديل حاوية غالي لتسمح بمرور النقرات للعناصر الخلفية */
#ghali-overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    pointer-events: none; /* مهم جداً: تمرير النقرات افتراضياً */
    z-index: 999;
}

/* فقط عندما يكون القلم نشطاً، نجعل الكانفاس يستقبل النقرات */
.drawing-active #annotationCanvas {
    pointer-events: auto; 
    cursor: crosshair;
}

/* الأزرار الخاصة بغالي يجب أن تظل قابلة للنقر دائماً */
.ghali-controls, .g-toggle-btn, .ghali-dynamic-input {
    pointer-events: auto;
}

#ghali-overlay-container.drawing-active {
    pointer-events: auto; /* Activé uniquement en mode dessin */
}

#annotationCanvas {
    display: block;
    touch-action: none; /* Empêche le scroll pendant le dessin sur tablette */
}
#ghali-cursor {
    position: fixed;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    z-index: 10000;
    display: none;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}